CSS基礎

一.CSS的全稱是什么?

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。

二.CSS有幾種引入方式? link 和@import 有什么區別?

插入樣式表的方法有三種:

1.外部樣式表
當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2.內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:

<head>
<style type="text/css">
  css樣式內容
</style>
</head>

3.內聯樣式
由于要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:

<p style="color: red; margin-left: 20px">
   This is a paragraph.
</p>
link 和@import 的區別:

區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。
區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區別4:link支持使用JavaScript控制DOM去改變樣式;而@import不支持。
區別5:link方式樣式的權重高于@import的。

三.以下這幾種文件路徑分別用在什么地方,代表什么意思?

相對路徑:

css/a.css
當前目錄下css文件夾下的a.css文件
./css/a.css
當前目錄下css文件夾中的a.css文件
b.css
當前目錄中的b.css文件
../imgs/a.png
上一級目錄中的imgs文件夾下的a.png文件

絕對路徑:

/Users/hunger/project/css/a.css
根目錄下User文件夾下的hunger文件夾下的project文件夾下的css文件夾下的a.css文件

網站相對路徑:

/static/css/a.css
當前項目的根目錄下的static文件夾下的css文件夾下的a.css文件

網站絕對路徑:

http://cdn.jirengu.com/kejian1/8-1.png
引用http://cdn.jirengu.com這個CDN服務下的kejian1文件夾下的8-1.png文件

四.如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?

  • 把圖片傳到服務器,然后獲取圖片的相對地址。
  • 直接復制網絡上圖片鏈接地址。

五.列出5條以上html和css的書寫規范

html規范:

1.頁面的第一行添加標準模式聲明 <!DOCTYPE html>;
2.代碼縮進:tab鍵設置四個空格(通常在軟件右下角設置相應空格大小);
3.html中除了開頭的DOC和 'UTF-8'或者head里特殊情況可以大寫外,其他都為小寫,css類都為小寫;
4.建議為 html 根元素指定 lang 屬性,從而為文檔設置正確的語言 lang="zh-CN";

css規范:

1.CSS書寫順序
位置屬性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
2.使用CSS縮寫屬性:CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
3.長名稱或詞組可以使用中橫線來為選擇器命名。

六.截圖介紹 chrome 開發者工具的功能區

Elements標簽頁

Elements標簽頁的左側就是對頁面HTML結構的查看與編輯,你可以直接在某個元素上雙擊修改元素的屬性。
1.Edit as HTML直接對元素的HTML進行編輯,或者刪除某個元素,所有的修改都會即時在頁面上得到呈現;
2.Copy可以將HTML代碼直接復制下來,在拷貝別人網站上面的HTML代碼的時候非常方便;
3.Break on可以對某個元素進行監聽,在JS對元素的屬性或者HTML進行修改的時候,直接觸發斷點,跳轉到對改元素進行修改的JS代碼處。


1.Style看HTML元素的樣式;
2.Computed可以看元素的盒子模型;
3.Properties看到元素具有的方法與屬性,比查API手冊要方便得多。

Console標簽頁

Javascript控制臺:在這個面板可以查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本,還可以當作Javascript API查看用。

Sources標簽頁

Sources標簽頁可以查看到請求的資源情況,包括CSS、JS、圖片等的內容。也可以設置各種斷點。對存儲的內容進行編輯然后保存也會實時的反應到頁面上。

  • Wctch:監測變量
  • Breakpoints:JS斷點列表
  • Event Listener Breakpoints:事件監聽斷點
Network標簽頁

Network標簽頁對于分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用。注意是在你打開Chrome開發者工具后發起的請求,才會在這里顯示。

Application標簽頁

使用Application面板檢查加載的所有資源,包括IndexedDB與Web SQL數據庫,本地和會話存儲,cookie,應用程序緩存,圖像,字體和樣式表。

Security標簽頁

HTTPS 為您的網站和將個人信息委托給您的網站的人提供了重要的安全性和數據完整性。在 Chrome開發者工具中使用 Security 面板調試安全問題,確保您已在自己的網站上恰當地實現 HTTPS。包括以下功能:
(1)使用 Security Overview 可以立即查看當前頁面是否安全。
(2)檢查各個源以查看連接和證書詳情(安全源)或找出具體哪些請求未受保護(非安全源)。

Audits標簽頁

Audits的是用來分析頁面加載的過程,進而提供減少頁面加載時間、提升響應速度的方案。對網絡和頁面性能進行檢測,根據測試的結果進行優化。但是檢測結果只是參考,在實際的項目中肯定有特殊情況存在,并不能為了滿足某項測試結果而忽略特定情況的存在。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評論 6 540
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,275評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,368評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,736評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,919評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,481評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,235評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,427評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,656評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,160評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,380評論 2 379

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,779評論 1 92
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,109評論 0 40
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 377評論 0 1
  • 今天是女兒入小學的第一個六一兒童節,我因為工作原因沒能到現場給女兒系紅領巾,錯過了這個莊嚴的場面,很是遺...
    蘇媽媽閱讀 442評論 0 1
  • 文章原文地址如下:https://antonioleiva.com/reasons-kotlin-android/...
    逸群_9c5c閱讀 754評論 0 2