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

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

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

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

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

5、sheet 1 . CSS)；導(dǎo)入U(xiǎn)RL(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標(biāo)簽類選擇器，圖2.14交叉選擇器示意圖，選擇器。class，p/*標(biāo)簽選擇器*/color : blue；P.special/*馬克。類別選擇器*/color : red；/*紅色*/。特殊/*類別選擇器*/顏色：綠色；普通段落文本(藍(lán)色)普通標(biāo)題文本(黑色)段落文本(紅色)指定。特殊類別指定。特殊類別標(biāo)題文本(綠色)，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后代選擇器，這是最外面的文本，這是中間層文本，這是最里面的文本，最外面的層是一個(gè)標(biāo)簽，它嵌套在內(nèi)部，然后它被稱為是的子元素。后代選擇器psan/*嵌套聲明*/color : red；/* color */，span color:blue/*顏色*/嵌套使用CSS(紅色)標(biāo)簽的方法。嵌套外的標(biāo)簽(藍(lán)色)沒有效果。后代選擇器被廣泛使用。不僅標(biāo)簽選擇器可以這樣組合，而且類別選擇器和標(biāo)識(shí)選擇器也可以嵌套。以下是一些典型的代碼：特殊I顏色：紅色；/*使用帶有特殊屬性的標(biāo)記中包含的*/# one Li padding-left :5 px；/* id為1的標(biāo)記包含*/TD . out . inside strong font-size :