最近在學習CSS，做個小結，以便以後溫故而知新。
一、CSS的出現帶來的好處：
css最大的作用就是消除冗餘的樣式代碼。由於消除了冗餘樣式代碼，帶來下面幾點極大的好處：
1、大大減少編碼工作量，不必再為每個標籤分別設定樣式。
2、樣式代碼獨立，大大提高樣式代碼的可重用性
3、實現集中控制、當需要修改代碼時，只修改一處即可，從而大大提高代碼可維護性。
4、樣式代碼變少，代碼檔案就變小，從而減少傳輸到用戶端的檔案容量，節省網路流量、降低伺服器壓力，提高使用者瀏覽速度。
二、css樣式的三種存在方式：
1、外部樣式表，外部樣式表通常儲存在.CSS檔案中。
2、內部樣式表，內部樣式表位於<head>標籤內部。
3、內聯樣式，在html元素的style屬性內部。
三、外部樣式表的載入最佳化：
外部樣式表本來是最理想的，它在消除代碼冗餘、可重用性、可維護性方面達到了最佳的水平。但是應用外部樣式表時也存在一個缺點：由於外部樣式表存在一個獨立的外部檔案中，瀏覽器在載入網頁時必須多一次請求，而且這個請求發生在瀏覽器接收到html文檔中的外部樣式表存放地址之後。這樣會造成延時。個人認為一個改進辦法是：不要在html文檔中請求載入外部樣式表，用動態網頁在網頁接到請求時把外部樣式表“動態嵌入”到html文檔中，這樣用戶端得到的是內部樣式表，而在伺服器端實際上是外部樣式表，可以減少一個請求反應的時間，提高網頁載入速度。
四、樣式的優先順序：
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字4擁有最高的優先權。
1.瀏覽器預設設定
2.外部樣式表
3.內部樣式表(位於<head>標籤內部)
4.內聯樣式(在HTML元素內部) 注意：如果沒有為元素指定樣式，元素用瀏覽器預設設定時，不同的瀏覽器的最終表現很可能不一樣。所以，為了達到網頁在各個瀏覽器中的一致性，最好不要用到瀏覽器的預設設定。
五、css簡單的文法規則：
css文法很簡單，一個樣式表由一條或多條規則群組成。每條規則由兩部分組成，這兩部分是"選取器"和“樣式屬性名稱值對”。
六、選取器(八種)：
(一)單一選取器
1、元素(標籤)選取器
2、類別選取器
3、ID選取器
4、屬性選取器
(二)組合選取器
1、選取器分組
2、後代選取器
3、子項目選取器
4、相鄰兄弟選取器
七、偽類和虛擬元素
偽類和虛擬元素其實應該叫“偽類別選取器”和“虛擬元素選取器”，它們的出現是為了能方便地選擇到普通選取器沒法選擇到或者很難選擇到的特殊對象。
(一)、偽類偽類：偽類中的類應該是“類別選取器”的意思。可以把偽類當做類別選取器，只不過這類偽類相對於普通類別選取器不同的是：偽類是由系統(CSS規範)預定義的類名，而且只能用在特定的某些元素(標籤)中。由於是預定義的,所以必須硬性記住。偽類有如下幾個：(1):active (2):focus (3):hover (4):link (5):visited (6):first-child (7):lang (8)::checked
(二)、虛擬元素：只有4個：first-letter,:first-line,:before,:after
(三)、偽類和虛擬元素的區別：
1、虛擬元素的權重比偽類高，比如一個容器的為元素和偽類都定義了同一屬性，但值不一樣，那麼將採用虛擬元素的。
2、偽類允許在選取器的任何位置，但是虛擬元素只允許出現在最後一個簡單選取器的末尾。
3、偽類：偽裝的類，頁面上有一部分元素可以歸為這類。比如:link，可以將頁面上所有連結的元素歸為這類；虛擬元素：不能歸類，比如:after，不能將頁面上所有元素的下一個兄弟節點歸為一類，必須指定前置選取器。
備忘：有人解釋的偽類和虛擬元素的區別，覺得挺有道理的：
偽類針對的是某一元素自己的某種“狀態”（自身狀態）；虛擬元素則指的是跟選擇符所匹配元素相關的“某個元素”；（相關元素）
比如：:link, :visited, :hover, :active, :focus, :blur, :first-child 這些實際上都是指所選擇元素本身的某種狀態，偽類。
而:first-letter,:first-line,:before,:after實際上是所選擇元素下的文本節點（按照xml概念理念，一個標籤對應的是一個元素節點element，而其中的文字是一個文本節點textnode）的第一個字元、第一行字元、所有子項目前面添加的匿名節點和所有子項目後面添加的匿名節點。都不是針對元素本身或本身的某種狀態，而是針對相關的另一個元素，虛擬元素。
八、屬性分類(15組共120個屬性)：
高效應用CSS最關鍵的就是熟悉CSS的各種屬性和以及屬性值。為了方便記憶，把CSS屬性做如下分組，具體屬性請參考CSS手冊。
1、背景(6個)
2、文本(12個)
3、字型(8個)
4、邊框(30個)
5、輪廓(4個)
6、外邊距(5個)
7、內邊距(5個)
8、列表(5個)
9、內容產生(4個)
10、尺寸(6個)
11、定位(14個)
12、列印(5個)
13、表格(5個)
14、偽類(7個)
15、虛擬元素(4個)
暫時寫到這，以後繼續完善......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
