CSS入門

時間 2019-11-08

標籤 css 入門欄目 CSS 简体版

原文原文鏈接

一，CSS是什麼？

定義：CSS全稱是層疊樣式表；
做用：爲頁面內容設置好看的模樣，在整個頁面中，CSS就像是人的外表同樣重要；
語法規範：CSS由選擇器，屬性，值組成，其中屬性和值用大括號包裹，以分號結尾。例如：h1{ color: red; }; 其中h1是選擇器，color是屬性，red是值；
CSS註釋：CSS的註釋格式是：/* 註釋的語句 */;被註釋的語句不會生效；

二，CSS引入方式的介紹（3種）

內聯樣式：在標籤內使用style屬性引入（不推薦），例： <h1 style='color: red;'>666666</h1>
內部樣式：在< style >標籤內書寫樣式（不推薦），例：

外部樣式：在HTML文檔外建立.css文件，並經過<link>標籤或者@import引入： 1.<link>標籤引入（推薦用法），<link>標籤引入.css文件時最好寫在<head>標籤內，例：

2. @import引入（不推薦）：在 <style>標籤內部進行引入，以下：

此外，import引入方式還可運用在CSS文件中，以下：

★：`<link>`標籤引入和`<@import>`引入方式的不一樣點

link是HTML標籤，@import是CSS語法，同時，link標籤還可用於載入其它資源而@import不能；
link引入的樣式文件能夠進行異步加載，而@import引入須要頁面加載內容完成才加載，這樣有可能由於加載失敗致使白屏問題；
link是HTML標籤，不存在兼容性問題，而@import是CSS樣式，在低版本IE不能用；
link支持JS控制DOM改變樣式，而@import不支持；綜上所述，不推薦使用@import引入CSS樣式

三，開發者工具和瀏覽器默認樣式

開發者工具：開發者工具能夠在頁面單擊右鍵點檢查選項打開，下圖是它的模樣：

在Elements中能夠看到該網頁的HTML和CSS樣式。

瀏覽器默認樣式瀏覽器默認樣式是指在未設定樣式是，瀏覽器默認自帶的樣式，每一個瀏覽器的默認樣式都有可能不一樣，而且在默認樣式旁邊都會帶有user agent stylesheet字樣標明，瀏覽器默認樣式不能更改，可是能夠覆蓋，以下圖：

四，關於文件路徑

絕對路徑（不推薦使用）：指的是文件所在的完整路徑，若是文件上傳到服務器由於路徑改變有可能會致使文件錯誤，因此不推薦使用，以下：

網絡路徑：網站路徑指的是服務器存放網頁源代碼的路徑，一般見到的都是url（統一資源定位符）例如：

★ 相對路徑：推薦使用，即便該路徑放上服務器也不會出錯 1.css/XXX.css 指當前目錄下文件夾css中的XXX.css； 2../css/XXX.css 同上，但不一樣的是，該寫法是嚴格模式寫法； 3.XXX.css 指當前文件夾下的XXX.css文件； 4.../imgs/XXX.png 指上級文件夾下的imgs文件夾裏的XXX.png文件；

五，CSS書寫規範

統一小寫；
不要使用內聯的style屬性去定義樣式，錯誤範例：

標籤的id或者class使用有意義的詞語，不要像下面這樣：

儘量用縮寫，以下代碼：

塊內容縮進，以下圖，箭頭所指就是縮進：

★六，關於CSS選擇器

總概：一共有五中選擇器：1.基礎選擇器；2.組合選擇器；3.屬性選擇器；4.僞類選擇器；5.僞元素選擇器下面就一一來介紹他們的用法：
基礎選擇器： 1.*：通用選擇器：適用於頁面全部標籤的樣式，範圍太廣因此不多使用；

2. #id：id選擇器：匹配特定的id元素；

3. .class：類選擇器：匹配特定的class元素；

4. element：標籤選擇器：直接使用標籤名稱進行樣式設定；

組合選擇器 1.E,F：多元素選擇器：可同時設置多個元素的相一樣式:

2.E F：後代選擇器：可設置E元素包裹下全部F元素的樣式：

3.E>F：子元素選擇器：設置E元素包裹下的直接後代F，孫後代不能被選中：

4.E+F：直接相鄰選擇器：該選擇器匹配E元素以後的相鄰同級元素F：

5.E~F：普通相鄰選擇器：匹配E元素以後的同級元素F（不管相鄰與否）：css

僞類選擇器 ★1.a標籤的四種狀態： ①：a:link（未被訪問狀態），②：a:visited（訪問後的狀態），③：a:hover（鼠標懸停狀態），④：a:active（正被點擊狀態）； 2.順序排列：link，visited，hover，active， 3.順序排列的緣由：就近原則的緣由，由於CSS加載的順序是從上到下的，因此寫在後面的優先級相同的選擇器樣式會覆蓋前面的樣式，而link是未被訪問狀態，visited是訪問事後狀態，hover鼠標懸停狀態，active正在被點擊狀態。在鼠標未點擊時，a連接是處於link狀態，採用link樣式，而點擊後是visited和link狀態，此時採用的應該是visited狀態，因此link寫在visited前面。同理，鼠標懸停在a連接時是hover，link和visited狀態，而hover若是寫在link和visited前面的話，hover的樣式就會被覆蓋，因此hover要寫在link，visited後面。而點擊時，a連接處於hover，active，link，visited狀態，active寫在前面就會被其它三種覆蓋，因此active寫在最後。

2.E:enabled和E:disabled:匹配表單中可用（enabled）和禁用（disabled）的元素； PS：禁用表單元素能夠用disabled屬性設定，沒有這個屬性的都是enabled元素，以下：瀏覽器

3.E:checked：匹配表單中的radio或者checkbox元素；服務器

4.★E:nth-of-type(n)：匹配父元素的第n個子元素，但只匹配使用同種標籤的元素；網絡

5.★E:nth-chile(n)：與E:nth-of-type(n)相似；異步

6. E:first-of-type：匹配父元素下使用同種標籤的的第一個子元素；

7.E:last-of-type：匹配父元素下使用同種標籤的的最後一個子元素；工具

僞元素選擇器 1.E::first-line：匹配E元素內容的第一行；

2. E::first-letter：匹配E元素內容的第一個字符；

3.★ E::before：在E元素前插入生成的內容；

4.★ E::after：在E元素後面插入生成的內容；

屬性選擇器（由於不經常使用，只在這裏說一下大致語法格式）格式：E[abcd]：匹配全部有屬性abcd的元素；

七，選擇器優先級

由高到低排列： 1.屬性後+！importangt 2.內聯樣式：style='color: red'; 3.id選擇器： #id 4.類選擇器： .class 5.僞類選擇器：a:link 6.屬性選擇器：h1{} 7.標籤選擇器：p[XXX] 8.通用選擇器：*網站
選擇器優先級的計算 1.先設定初始值爲萬位數：0，0，0，0，0； 2.加了!important，在第一位0加上1（1，0，0，0，0）； 3.內聯樣式在第二位0加上1（0，1，0，0，0）； 4.id選擇器在第三位0加上1（0，0，1，0，0）； 5.類選擇器在第四位0加上1（0，0，0，1，0）； 6.僞類和屬性選擇器與類選擇器同樣； 7.標籤選擇器在第五位0加上1（0，0，0，0，1）； PS：上述全部選擇器，每有一個就給它相應位置的0加上1，也就是說當有兩個時，它的權值是相應位置的0加上2url