柚子快報激活碼778899分享：前端 CSS3語法及選擇器總結(jié)

http://yzkb.51969.com/

CSS定義

css是一種樣式表語言，用來美化HTML文檔

一.CSS的引用

方式一:內(nèi)部樣式表(HTML中引用)

在HTML的title標(biāo)簽下方添加style雙標(biāo)簽，style標(biāo)簽里面書寫CSS

*style里面的注釋為/ * … /

CSS的書寫規(guī)則: 選擇器{屬性名：屬性值；}

代碼示例

CSS展示

方式二.外部樣式表(單獨(dú)的CSS文件)

將CSS代碼寫在單獨(dú)的CSS文件中（.css）在HTML使用link標(biāo)簽（單標(biāo)簽）引入

引用語法：

代碼示例

CSS文件

p{

color: red;

font-size: 50px;

}

HTML文件

CSS外部樣式表引用方式示例

方式三:行內(nèi)樣式（寫在標(biāo)簽的style屬性值里）

通常這種方式用來配合JavaScript使用

語法：

代碼示例

CSS外部樣式表引用方式示例

二.選擇器

選擇器的作用：查找標(biāo)簽，設(shè)置樣式

1.標(biāo)簽選擇器

使用標(biāo)簽名作為選擇器，選中同名標(biāo)簽設(shè)置相同樣式，并且無法差異化同名化標(biāo)簽的樣式

代碼示例

展示標(biāo)簽選擇器的作用

標(biāo)簽p1

標(biāo)簽p2

標(biāo)簽p3

2.類選擇器

作用：查找標(biāo)簽，差異化設(shè)置標(biāo)簽的顯示效果

一個類選擇器可以給多個標(biāo)簽使用

一個標(biāo)簽可以使用多個類名，class屬性值寫多個類名使用空格隔開即可

類名如果想命名為多個單詞，可以使用-連接，例如my-news

使用步驟：

定義類選擇器——> .類名使用類選擇器——> 標(biāo)簽添加class=“類名”

代碼示例

展示類選擇器的使用

這是第一行,展示第一個類選擇器的使用

這是第二行，沒有使用類選擇器

3.id選擇器

作用：查找標(biāo)簽，差異化設(shè)置標(biāo)簽的顯示效果

場景：id選擇器一般配合JavaScript使用，很少用來設(shè)置CSS樣式

使用步驟：

定義id選擇器——> #id名使用id選擇器——> 標(biāo)簽添加id=“id名”

同一個id選擇器在一個頁面只能使用一次

代碼示例

展示類選擇器的使用

這是第一行,展示id選擇器的使用

這是第二行，沒有使用選擇器

4.通配符選擇器

作用：查找頁面所有標(biāo)簽，設(shè)置相同樣式

通配符選擇器符號：*

通配符選擇器不需要調(diào)用，瀏覽器會自動查找頁面所有標(biāo)簽，設(shè)置相同樣式

代碼示例

展示通配符選擇器的使用

這是第一行

這是第二行

• 列表1
• 列表2
• 列表3

加粗標(biāo)簽

5.復(fù)合選擇器

定義：由兩個或多個基礎(chǔ)選擇器，通過不同方式組合而成作用：更準(zhǔn)確，更高效的選擇目標(biāo)元素（標(biāo)簽）

后代選擇器

作用：選中某元素的后代元素選擇器寫法：父選擇器，子選擇器后代選擇器會選中所有的后代（子標(biāo)簽，孫子標(biāo)簽等）

代碼示例

展示后代選擇器的使用

這是個span標(biāo)簽

子代選擇器

與后代選擇器不同的是，子代選擇器只會選擇子標(biāo)簽選擇器寫法：父選擇器 > 子選擇器{CSS屬性}

代碼示例：

展示后代選擇器的使用

這是個span標(biāo)簽

并集選擇器

作用：選中多組標(biāo)簽設(shè)置相同的樣式選擇器寫法：選擇器1，選擇器2，…選擇器N{CSS屬性},選擇器之間用，隔開

展示并集選擇器的使用

這是一個p標(biāo)簽

這是一個span標(biāo)簽

交集選擇器

作用：選中同時滿足多個條件的元素選擇器寫法：選擇器1選擇器2{CSS屬性}，選擇器之間連寫，沒有任何復(fù)合

代碼示例

展示并集選擇器的使用

這是一個p標(biāo)簽

這是一個span標(biāo)簽

柚子快報激活碼778899分享：前端 CSS3語法及選擇器總結(jié)

http://yzkb.51969.com/

參考文章