前端管中窺豹之CSS篇

一、CSS簡介

• CSS 指層疊樣式表 (Cascading Style Sheets)
• 樣式定義如何顯示 HTML 元素
• 樣式通常存儲在樣式表中
• 把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
• 外部樣式表可以極大提高工作效率 外部樣式表通常存儲在 CSS 文件中
• 多個樣式定義可層疊爲一

1.註釋

    /* 註釋內容 可多行註釋 */

2.語法

    選擇器（屬性:值;屬性:值;……）

3.三種引入方式

1. head內style標籤內部直接書寫css代碼
2. link標籤引入外部css文件
3. 直接在標籤被通過style屬性書寫css樣式

4.標籤通常都必須有的屬性：

    id 唯一標識標籤
    class 標籤類屬性 可以有多個，類似python面向對象的繼承

二、如何查找標籤

1.基本選擇器

  1）標籤選擇器

標籤名{屬性名:值}

  2）id選擇器

#id名{屬性名:值}

  3）類選擇器：相同類名的標籤包括其嵌套的其他標籤都更改樣式

.類名{屬性名:值}

  4）通用選擇器：匹配 html 中的所有元素標籤

*{屬性名:值}

  5）共用選擇器：多個標籤更改樣式（不同的選擇器也可以共用一個樣式）

標籤名1，標籤名2，標籤名3{屬性名:值}

2.組合選擇器

  1）後代選擇器：A標籤中嵌套的所有B標籤都更改樣式

A B{屬性名:值}

  2）兒子選擇器:A標籤中嵌套的子標籤B(超過兩層嵌套即非子標籤)都更改樣式

A > B {屬性名:值}

  3）毗鄰選擇器:A標籤下面(非嵌套)的第一個B標籤更改樣式

A + B {屬性名:值}

  4）弟弟選擇器:A標籤下面(非嵌套)的所有B標籤更改樣式

A ~ B {屬性名:值}

3.屬性選擇器:你可以給任意標籤加任意的屬性名和屬性值

   [屬性名]{樣式}：屬性名符合的標籤更改樣式
   [屬性名=屬性值]{樣式}：屬性名及屬性值都符合的標籤會更改樣式
   也適用組合選擇器

4.僞類選擇器

   元素:僞類名{屬性名:值}
   栗子：遵循愛恨原則，順序不能變
       a:link {color:gray;}/*鏈接沒有被訪問時前景色爲灰色*/
       a:visited{color:yellow;}/*鏈接被訪問過後前景色爲黃色*/
       a:hover{color:green;}/*鼠標懸浮在鏈接上時前景色爲綠色*/
       a:active{color:blue;}/*鼠標點中激活鏈接那一下前景色爲藍色*/

5.僞元素選擇器

   第一個字母
       ::first-letter{屬性名:值}
   第一行（以瀏覽器爲準的第一行）
       ::first-line{屬性名:值}
   被選中的字行（鼠標選擇的字段）
       ::selection
   ::before 和 ::after在內部內容的前面或者後面插入內容，必須帶一個屬性content

選擇器優先級

    相同選擇器 不同引用方式——就近原則 誰靠近標籤誰生效
    不同選擇器 相同引入方式——行內樣式 > id選擇器 > 類選擇器 > 標籤選擇器