CSS選擇器(1h)

1、 引入引入CSSCSS的核心目的就是實現(xiàn)網(wǎng)頁內(nèi)容的核心目的就是實現(xiàn)網(wǎng)頁內(nèi)容和表現(xiàn)形式的分離，將原來由和表現(xiàn)形式的分離，將原來由HTMLHTML語言所語言所承擔的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，承擔的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由改由CSSCSS來完成。來完成。 構(gòu)造構(gòu)造CSS規(guī)則規(guī)則1.2基本基本CSS選擇器選擇器1.3在在HTML中使用中使用CSS的方法的方法1.4復(fù)合選擇器復(fù)合選擇器1.5CSS的繼承特性的繼承特性1.6CSS簡介簡介1.1Css簡介簡介1.2 1.2 構(gòu)造構(gòu)造CSSCSS規(guī)則規(guī)則 張飛 身高:185cm; 體重:105kg; 性別:男; 性格:暴躁; 民族:漢族; 實際

2、上是由實際上是由3 3個要素組成的，即姓名、屬個要素組成的，即姓名、屬性和屬性值。性和屬性值。 CSS CSS的作用就是設(shè)置網(wǎng)頁的各個組成部的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。分的表現(xiàn)形式。 因此，如果把上面的內(nèi)容換成描述網(wǎng)因此，如果把上面的內(nèi)容換成描述網(wǎng)頁上一個頁上一個標題標題的屬性表，應(yīng)該大致如下：的屬性表，應(yīng)該大致如下： 2 2級標題級標題 字體字體: :宋體宋體; ; 大小大小:15:15像素像素; ; 顏色顏色: :紅色紅色; ; 裝飾裝飾: :下劃線下劃線 如果把上面的表格用英語寫出來：如果把上面的表格用英語寫出來： h2h2 font-family: font-famil

3、y: 宋體宋體; ; font-size:15px; font-size:15px; color: red; color: red; text-decoration: underline; text-decoration: underline; CSS CSS的思想就是首先指定對什么的思想就是首先指定對什么“對象對象”進進行設(shè)置，然后指定對該對象的哪個方面的行設(shè)置，然后指定對該對象的哪個方面的“屬性屬性”進行設(shè)置，最后給出該設(shè)置的進行設(shè)置，最后給出該設(shè)置的“值值”。 因此，概括來說，因此，概括來說，CSSCSS就是由就是由3 3個基本部分個基本部分“對象對象”、“屬性屬性”和和“值值”組成的。

4、組成的。1.2 1.2 基本基本CSSCSS選擇器選擇器 在在CSSCSS的的3 3個組成部分中，個組成部分中，“對象對象”是是很重要的，它指定了對哪些網(wǎng)頁元素進行很重要的，它指定了對哪些網(wǎng)頁元素進行設(shè)置，因此，它有一個專門的名稱設(shè)置，因此，它有一個專門的名稱選選擇器（擇器（selectorselector）。）。1.2 1.2 基本基本CSSCSS選擇器選擇器 1.2.1 1.2.1 標簽選擇器標簽選擇器 1.2.2 1.2.2 類選擇器類選擇器 1.2.3 ID1.2.3 ID選擇器選擇器1.2.1 1.2.1 標簽選擇器標簽選擇器 h1 color: red; font-size: 25

5、px; 選擇器 屬性 值 屬性 值 聲明 聲明 圖圖2.1 CSS標簽選擇器標簽選擇器1.2.1 1.2.1 標簽選擇器標簽選擇器1.2.2 1.2.2 類選擇器類選擇器 .class color: green; font-size: 20px; 類別選擇器 屬性 值 屬性 值 聲明 聲明 類別名稱 圖圖2.2 類選擇器類選擇器 當頁面中同時出現(xiàn)當頁面中同時出現(xiàn)3 3個個標記，并且希望標記，并且希望它們的顏色各不相同，就可以通過設(shè)置不它們的顏色各不相同，就可以通過設(shè)置不同的類選擇器來實現(xiàn)。同的類選擇器來實現(xiàn)。 實例查看文件：實例查看文件：01-01.html01-01.html。 如果所有的如

6、果所有的標記都使用相同的樣式風格，標記都使用相同的樣式風格，只有個別特殊的只有個別特殊的標記需要使用不同的風格來突標記需要使用不同的風格來突出，這時可以通過類選擇器配合標簽選擇器使用，出，這時可以通過類選擇器配合標簽選擇器使用，實例查看文件實例查看文件01-02.html01-02.html。 在在HTMLHTML的標記中，還可以同時對一個標記運用多的標記中，還可以同時對一個標記運用多個類選擇器，從而將兩個類別的風格同時運用到個類選擇器，從而將兩個類別的風格同時運用到一個標記中，實例文件為一個標記中，實例文件為01-03.html01-03.html。 注意：如果使用了相沖突的兩個類，則以定義

7、時注意：如果使用了相沖突的兩個類，則以定義時的順序為基準，采用最近定義的類樣式。如下例：的順序為基準，采用最近定義的類樣式。如下例：1.2.3 ID1.2.3 ID選擇器選擇器 #id color: yellow; font-size: 30px; ID選擇器 屬性 值 屬性 值 聲明 聲明 圖圖2.6 ID選擇器選擇器 IDID選擇器實例選擇器實例1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法2.3.1 2.3.1 行內(nèi)式（行內(nèi)式（01-05.html01-05.html）2.3.2 2.3.2 內(nèi)部內(nèi)部CSSCSS樣式樣式(01-06.html)(01-06.ht

8、ml)2.3.3 2.3.3 外部外部CSSCSS樣式樣式(01-07.html)(01-07.html)2.3.4 2.3.4 導入式導入式(01-09.html)(01-09.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法2.3.1 2.3.1 行內(nèi)式（行內(nèi)式（01-05.html01-05.html） 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.2 1.3.2 內(nèi)部內(nèi)部CSSCSS樣式樣式(01-06.html)(01-06.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3

9、.3 1.3.3 外部外部CSSCSS樣式樣式(01-07.html)(01-07.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.4 1.3.4 導入式導入式(01-09.html)(01-09.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.4 1.3.4 導入式導入式(01-09.html)(01-09.html) 說明：說明：導入樣式表的最大用處在于可以讓一個導入樣式表的最大用處在于可以讓一個HTMLHTML文件中導入很多的文件中導入很多的樣式表，例樣式表，例01-11.html01-11.html

10、。 注意注意importimport關(guān)鍵詞用在關(guān)鍵詞用在內(nèi)或者另一個內(nèi)或者另一個csscss文件內(nèi)。文件內(nèi)。 1.4 1.4 復(fù)合選擇器復(fù)合選擇器1.4.1 1.4.1 交集選擇器交集選擇器1.4.2 1.4.2 并集選擇器并集選擇器1.4.3 1.4.3 后代選擇器（父子）后代選擇器（父子）1.4.4 1.4.4 通配符選擇器通配符選擇器1.4.5 1.4.5 選擇器優(yōu)先級選擇器優(yōu)先級1.4.1 1.4.1 交集選擇器交集選擇器 1.1.交集選擇器由兩個選擇器直接連接構(gòu)成，中間不能有空格，交集選擇器由兩個選擇器直接連接構(gòu)成，中間不能有空格，必須連續(xù)書寫；必須連續(xù)書寫；2.2.第一個必須是標簽

11、選擇器，第二個必須是類選擇器或者是第一個必須是標簽選擇器，第二個必須是類選擇器或者是IDID選擇器。選擇器。3.3.這種方式構(gòu)成的選擇器，將選中同時滿足前后二者定義的這種方式構(gòu)成的選擇器，將選中同時滿足前后二者定義的元素。元素。4.4.假設(shè)定義了標簽選擇器假設(shè)定義了標簽選擇器h3h3和類選擇器和類選擇器.special.special和交集選擇和交集選擇器器h3.specialh3.special，則效果如圖：，則效果如圖： 圖圖2.14 交集選擇器示意圖交集選擇器示意圖 實例查看文件：實例查看文件：01-12.html01-12.html。1.4.2 1.4.2 并集選擇器并集選擇器 1.1

12、.任何形式的選擇器，都可以作為并集選擇器的一部分；任何形式的選擇器，都可以作為并集選擇器的一部分；2.2.它的結(jié)果是同時選中各個基本選擇器所選擇的范圍；它的結(jié)果是同時選中各個基本選擇器所選擇的范圍；3.3.并集選擇器是多個選擇器通過逗號鏈接而成的。并集選擇器是多個選擇器通過逗號鏈接而成的。 實例查看源文件實例查看源文件01-13.html01-13.html。1.4.3 1.4.3 后代選擇器后代選擇器1.1.后代選擇器的寫法就是把外層的標記寫在前面，內(nèi)后代選擇器的寫法就是把外層的標記寫在前面，內(nèi)層的標記寫在后面，中間用空格分隔；層的標記寫在后面，中間用空格分隔；2.2.當標記發(fā)生嵌套時，內(nèi)層

13、的標記就稱為外層標記的當標記發(fā)生嵌套時，內(nèi)層的標記就稱為外層標記的后代。例如：后代。例如： 外層的文字外層的文字中間層的文字中間層的文字最內(nèi)層的文字最內(nèi)層的文字1.4.3 1.4.3 后代選擇器后代選擇器3.3.實例源文件實例源文件01-15.html01-15.html。1.4.4 1.4.4 通配符選擇器通配符選擇器課堂練習課堂練習1.5 CSS1.5 CSS的繼承特性的繼承特性 1.5.1 1.5.1 繼承關(guān)系繼承關(guān)系 1.5.2 CSS 1.5.2 CSS繼承的運用繼承的運用 1.5.3 CSS 1.5.3 CSS的沖突特性的沖突特性 1.5.1 1.5.1 繼承關(guān)系（樹）繼承關(guān)系（樹

14、）1. 1. 在在CSSCSS中的繼承比較簡單，即將各個中的繼承比較簡單，即將各個HTMLHTML標簽看做一個容器，其中被包含的標簽看做一個容器，其中被包含的小容器會繼承包含它的大容器的風格樣式；小容器會繼承包含它的大容器的風格樣式；2. 2. 所有的所有的CSSCSS語句都是基于各個標簽之間的繼承關(guān)系的，為了更好理解繼承關(guān)語句都是基于各個標簽之間的繼承關(guān)系的，為了更好理解繼承關(guān)系，首先從系，首先從HTMLHTML文件的組織結(jié)構(gòu)入手，示例文件為文件的組織結(jié)構(gòu)入手，示例文件為01-16.html01-16.html，樹形結(jié)構(gòu)如，樹形結(jié)構(gòu)如下圖：下圖：實例源文件實例源文件01-16.html01-

15、16.html。 圖圖1.21 繼承關(guān)系樹型圖繼承關(guān)系樹型圖 1.5.2 CSS 1.5.2 CSS繼承的運用繼承的運用1. CSS1. CSS繼承是指子標簽會繼承父標簽的所有樣式風格，并可以在父標簽樣式風繼承是指子標簽會繼承父標簽的所有樣式風格，并可以在父標簽樣式風格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標簽的樣式風格完全不會影響格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標簽的樣式風格完全不會影響父標簽。實例文件父標簽。實例文件01-17.html01-17.html。 1.5.2 CSS 1.5.2 CSS繼承的運用繼承的運用 可以看到：可以看到： （1 1）子標簽）子標簽emem也顯示了下劃線，說明對父標簽的設(shè)置也對子標簽有效；也顯示了下劃線，說明對父標簽的設(shè)置也對子標簽有效； （2 2）而）而emem文字顯示為紅色，文字顯示為紅色，h1h1標題仍然為藍色，說明對子標簽的設(shè)置不會影標題仍然為藍色，說明對子標簽的設(shè)置不會影響父標簽；響父標簽； （3 3）思考：如何將嵌套最深的第）思考：如何將嵌套最深的第3 3級列表的文字顯示為粗體？級列表的文字顯示為粗體？ 請對比文件：請對比文件：01-18.html01-18.html（能否實現(xiàn)）和文件（能否實現(xiàn)）和文件01-19.html01-19.html（后代選擇（后