第2章CSS選擇器與相關(guān)特性.ppt

1、CSS網(wǎng)頁設(shè)計標準教程，第1部分，CSS的核心原則，第2章，CSS選擇器和相關(guān)特性，通過前一章的學(xué)習(xí)，我理解了將CSS引入網(wǎng)頁設(shè)計的意義。引入CSS的核心目的是實現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表達形式的分離，將一些原本由HTML語言承擔的與結(jié)構(gòu)無關(guān)的功能分離出來，用CSS來完成。本章介紹CSS是如何工作的。本文重點研究了CSS“選擇器”的核心概念和兩個相關(guān)特征，“繼承”和“級聯(lián)”。2.1構(gòu)建CSS規(guī)則。在詳細介紹CSS之前，想想生活中的一個問題。張飛身高：185厘米；重量為：105公斤；性別：男；人物：是暴力的；漢族：人；該表實際上由三個元素組成，即名稱、屬性和屬性值。CSS的功能是設(shè)置網(wǎng)頁中每個組件的表達

2、式。因此，如果上面的表被描述網(wǎng)頁上的標題的屬性表代替，可以假設(shè)它應(yīng)該大致如下：大小為：15像素；顏色：紅色；用：下劃線裝飾，如果你用英語寫上表，就更進一步：H2 font-family : Tahoma；font-size :15 px；顏色：紅色；文本修飾：下劃線；CSS的思想是首先指定要設(shè)置什么“對象”，然后設(shè)置“屬性”的哪個方面，最后給出設(shè)置的“值”。因此，簡而言之，CSS由三個基本部分組成：“對象”、“屬性”和“值”。2.2基本的CSS選擇器，在CSS的三個組件中，“對象”是非常重要的，它指定設(shè)置哪些網(wǎng)頁元素，所以它有一個特殊的名稱選擇器。2.2.1標記選擇器，h1顏色：紅色；font

3、-size : 25px；圖2.1 CSS標簽選擇器，2.2.2類選擇器，圖2.2類選擇器，類選擇器。紅色；紅色。/*紅色*/font-size :18 px；/*文本大小*/，綠色；綠色。/*綠色*/font-size:20px。/*文本大小*/，類別選擇器1類別選擇器2 h3也適用，2.2.3標識選擇器，圖2.6標識選擇器，標識選擇器#bold，font-weight : bold；/* bold */# green font-size :30 px。/* font size */color : # 009900；/*顏色*/，標識選擇器1標識選擇器2標識選擇器3標識選擇器4，2.3在超文

4、本標記語言中使用CSS的方法，2.3.1內(nèi)嵌頁面標題，正文內(nèi)容1正文內(nèi)容2正文內(nèi)容3，2.3.2嵌入，頁面標題p，顏色： # 0000 FF；文本修飾：下劃線；font-weight : bold；font-size :25 px；這是正文內(nèi)容的第一行，這是正文內(nèi)容的第二行，這是正文內(nèi)容的第三行，2.3.3鏈接，頁面標題，CSS標題，這是正文內(nèi)容CSS標題，這是正文內(nèi)容，h2顏色： # 0000 ff；p color: # FF0000文本修飾：下劃線；font-weight : bold；font-size :15 px；2.3.4導(dǎo)入，導(dǎo)入URL(sheet 1 . CSS)；導(dǎo)入URL(

5、sheet 1 . CSS)；導(dǎo)入URL(sheet 1 . CSS)；導(dǎo)入sheet 1 . CSS；導(dǎo)入sheet 1 . CSS；導(dǎo)入sheet 1 . CSS；2.4復(fù)合選擇器，2.4.1交叉選擇器，圖2.13標簽類選擇器，圖2.14交叉選擇器示意圖，選擇器。class，p/*標簽選擇器*/color : blue；P.special/*馬克。類別選擇器*/color : red；/*紅色*/。特殊/*類別選擇器*/顏色：綠色；普通段落文本(藍色)普通標題文本(黑色)段落文本(紅色)指定。特殊類別指定。特殊類別標題文本(綠色)，2.4.2聯(lián)合選擇器，圖2.16聯(lián)合選擇器圖，聯(lián)合選擇器h

6、1、h2、h3、h4、h5、p/*聯(lián)合選擇器/*文本顏色*/font-size :15 px；/* font size */，h2.special，特殊，#one/*集體聲明*/text-decoration :下劃線；/*下劃線*/，示例文本h1示例文本h2示例文本h3示例文本h4示例文本h5示例文本p1示例文本p2示例文本p3，2.4.3后代選擇器，這是最外面的文本，這是中間層文本，這是最里面的文本，最外面的層是一個標簽，它嵌套在內(nèi)部，然后它被稱為是的子元素。后代選擇器psan/*嵌套聲明*/color : red；/* color */，span color:blue/*顏色*/嵌套使用CSS(紅色)標簽的方法。嵌套外的標簽(藍色)沒有效果。后代選擇器被廣泛使用。不僅標簽選擇器可以這樣組合，而且類別選擇器和標識選擇器也可以嵌套。以下是一些典型的代碼：特殊I顏色：紅色；/*使用帶有特殊屬性的標記中包含的*/# one Li padding-left :5 px；/* id為1的標記包含*/TD . out . inside strong font-size :