Web前端實(shí)用教案

1、能使用各種CSS選擇器進(jìn)行頁(yè)面基本設(shè)置。 能使用各種樣式表。 掌握(zhngw)CSS的繼承特性，能夠利用繼承特性控制頁(yè)面的顯示效果。 掌握(zhngw)CSS的層疊特性，能夠利用層疊特性控制頁(yè)面的顯示效果。學(xué)習(xí)學(xué)習(xí)(xux)目標(biāo)目標(biāo)第1頁(yè)/共31頁(yè)第一頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)3.1.1CSS的基本的基本(jbn)思想思想層疊樣式表單（cascading style sheets，CSS）又稱風(fēng)格樣式表，是一種用來(lái)表現(xiàn)XHTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，用于進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)。XHTML和CSS之間是“內(nèi)容結(jié)構(gòu)”與“表現(xiàn)形式”的關(guān)系。第2頁(yè)/共31頁(yè)第二頁(yè)，共32頁(yè)

2、。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)welcome網(wǎng)頁(yè)的實(shí)現(xiàn)代碼如代碼清單3-1所示第3頁(yè)/共31頁(yè)第三頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)3.1.2CSS基本基本(jbn)選擇選擇器器每個(gè)CSS選擇器都包含選擇器名、屬性和值3個(gè)部分，如圖3-2所示，其中，屬性和值可以設(shè)置多個(gè)，從而實(shí)現(xiàn)一對(duì)多的控制。第4頁(yè)/共31頁(yè)第四頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)CSS有多種類型的選擇器，但是不同的瀏覽器支持的選擇器不同，這里重點(diǎn)介紹3種基本選擇器，分別是標(biāo)簽選擇器、類選擇器和ID選擇器。標(biāo)簽選擇器類選擇器ID選擇器第5頁(yè)/共31頁(yè)第五頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基

3、礎(chǔ)知識(shí)3.1.3CSS復(fù)合復(fù)合(fh)選擇器選擇器1.交集選擇器交集選擇器由兩個(gè)選擇器直接連接構(gòu)成，其中，第一個(gè)必須是標(biāo)簽選擇器，第二個(gè)可以是類選擇器或ID選擇器，兩個(gè)選擇器名中間不能有空格，必須連續(xù)書寫。交集選擇器的結(jié)果是兩個(gè)選擇器的交集。第6頁(yè)/共31頁(yè)第六頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)2.并集選擇器并集選擇器也由多個(gè)選擇器構(gòu)成，選擇器之間由逗號(hào)連接，它的結(jié)果是多個(gè)選擇器的并集。如果某幾個(gè)頁(yè)面選擇器風(fēng)格相同或者部分相同，可以利用并集選擇器進(jìn)行聲明。第7頁(yè)/共31頁(yè)第七頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)3.后代選擇器后代選擇器通過(guò)各種選擇器的嵌套實(shí)現(xiàn)對(duì)頁(yè)面的控

4、制，其中，內(nèi)層標(biāo)簽是外層標(biāo)簽的后代。在寫法上，外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。第8頁(yè)/共31頁(yè)第八頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)3.1.4在在XHTML中使用中使用(shyng)CSS的方法的方法在XHTML中使用CSS的方法主要有4種，分別是行內(nèi)樣式表、嵌入式樣式表、鏈接式樣式表和導(dǎo)入式樣式表行內(nèi)樣式表鏈接式樣式表嵌入式樣式表導(dǎo)入式樣式表第9頁(yè)/共31頁(yè)第九頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)1.行內(nèi)樣式表行內(nèi)樣式表是最直接的一種樣式，它在XHTML中通過(guò)使用style屬性，然后將CSS代碼直接寫入其中實(shí)現(xiàn)。第10頁(yè)/共31頁(yè)第十頁(yè)，共32頁(yè)

5、。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)2.嵌入式樣式表嵌入式樣式表又稱內(nèi)嵌式樣式表，它利用和標(biāo)簽進(jìn)行頁(yè)面控制，放在和之間。第11頁(yè)/共31頁(yè)第十一頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)3.鏈接式樣式表鏈接式樣式表屬于外部樣式表的一種，它將XHTML和CSS分成兩個(gè)或者多個(gè)頁(yè)面，把CSS樣式存儲(chǔ)在擴(kuò)展名為.css的文件中，利用標(biāo)簽的href屬性實(shí)現(xiàn)樣式控制。第12頁(yè)/共31頁(yè)第十二頁(yè)，共32頁(yè)。3.1 CSS的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)4.導(dǎo)入式樣式表導(dǎo)入式樣式表也屬于外部樣式表的一種，與鏈接式樣式表的區(qū)別在于引入方法不同，它在HTML文件的和標(biāo)簽之間引入CSS文件。第13頁(yè)/共31頁(yè)第十三頁(yè)，

6、共32頁(yè)。課堂實(shí)訓(xùn)課堂實(shí)訓(xùn)3-1制作制作(zhzu)Good morning網(wǎng)頁(yè)網(wǎng)頁(yè)本實(shí)訓(xùn)將制作的網(wǎng)頁(yè)是一個(gè)個(gè)人網(wǎng)站的首頁(yè)。技能分析實(shí)訓(xùn)目的實(shí)訓(xùn)步驟實(shí)訓(xùn)提高實(shí)訓(xùn)內(nèi)容12345第14頁(yè)/共31頁(yè)第十四頁(yè)，共32頁(yè)。課堂課堂(ktng)實(shí)訓(xùn)實(shí)訓(xùn)3-1制作制作Good morning網(wǎng)頁(yè)網(wǎng)頁(yè)本實(shí)訓(xùn)將制作的網(wǎng)頁(yè)是一個(gè)個(gè)人網(wǎng)站的首頁(yè)。第15頁(yè)/共31頁(yè)第十五頁(yè)，共32頁(yè)。課堂課堂(ktng)實(shí)訓(xùn)實(shí)訓(xùn)3 -2 制作汽車制作汽車網(wǎng)頁(yè)網(wǎng)頁(yè)制作汽車網(wǎng)頁(yè)技能分析實(shí)訓(xùn)目的實(shí)訓(xùn)步驟實(shí)訓(xùn)提高實(shí)訓(xùn)內(nèi)容12345第16頁(yè)/共31頁(yè)第十六頁(yè)，共32頁(yè)。課堂實(shí)訓(xùn)課堂實(shí)訓(xùn)3 -2 制作汽車制作汽車(qch)網(wǎng)網(wǎng)頁(yè)頁(yè)制作汽車網(wǎng)頁(yè)第

7、17頁(yè)/共31頁(yè)第十七頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)3.2.1CSS的繼承的繼承(jchng)特性特性所謂CSS的繼承特性，是指被包含在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)生在整個(gè)網(wǎng)頁(yè)的樣式預(yù)設(shè)中，需要指定為其他樣式的部分，設(shè)定在個(gè)別標(biāo)簽里即可。第18頁(yè)/共31頁(yè)第十八頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)1.繼承的關(guān)系CSS的一個(gè)主要特性就是繼承，它是依賴于祖先與后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的標(biāo)簽，還可以應(yīng)用于它的后代。第19頁(yè)/共31頁(yè)第十九頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)第

8、20頁(yè)/共31頁(yè)第二十頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)2.繼承的優(yōu)先級(jí)在制作網(wǎng)頁(yè)的過(guò)程中，制作者可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要，CSS中允許這樣設(shè)置，稱為重要規(guī)則（important rule）。這是根據(jù)其聲明的方式和它們的自然屬性命名的。通過(guò)在一條規(guī)則的分號(hào)前插入“！important”來(lái)標(biāo)記一條重要規(guī)則。第21頁(yè)/共31頁(yè)第二十一頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)3.繼承的應(yīng)用CSS繼承是指子標(biāo)簽繼承父標(biāo)簽的所有樣式風(fēng)格，并可以在父標(biāo)簽的基礎(chǔ)上進(jìn)行修改覆蓋，從而產(chǎn)生新的樣式。子標(biāo)簽的風(fēng)格不會(huì)影響父標(biāo)簽。CSS的繼承貫穿整個(gè)CSS頁(yè)面設(shè)計(jì)中，利用

9、CSS繼承的這種關(guān)系可以大大縮短代碼的編寫量，并提高程序的可讀性。第22頁(yè)/共31頁(yè)第二十二頁(yè)，共32頁(yè)。3.2 CSS的特性的特性(txng)3.2.2CSS的層疊的層疊(cn di)特特性性CSS樣式的優(yōu)先級(jí)從高到低的順序是：行內(nèi)樣式、id樣式、類別樣式、標(biāo)簽樣式。也就是說(shuō)，CSS的層疊就是頁(yè)面樣式?jīng)_突的解決方案。 第23頁(yè)/共31頁(yè)第二十三頁(yè)，共32頁(yè)。課堂實(shí)訓(xùn)課堂實(shí)訓(xùn)3-3制作制作(zhzu)校園新校園新聞網(wǎng)頁(yè)聞網(wǎng)頁(yè)制作校園新聞網(wǎng)頁(yè)技能分析實(shí)訓(xùn)目的實(shí)訓(xùn)步驟實(shí)訓(xùn)提高實(shí)訓(xùn)內(nèi)容12345第24頁(yè)/共31頁(yè)第二十四頁(yè)，共32頁(yè)。課堂課堂(ktng)實(shí)訓(xùn)實(shí)訓(xùn)3-3制作校園新制作校園新聞網(wǎng)頁(yè)聞網(wǎng)頁(yè)

10、制作校園新聞網(wǎng)頁(yè)第25頁(yè)/共31頁(yè)第二十五頁(yè)，共32頁(yè)。課堂實(shí)訓(xùn)課堂實(shí)訓(xùn)3-3制作制作(zhzu)校園新校園新聞網(wǎng)頁(yè)聞網(wǎng)頁(yè)制作校園新聞網(wǎng)頁(yè)第26頁(yè)/共31頁(yè)第二十六頁(yè)，共32頁(yè)。3.3實(shí)戰(zhàn)訓(xùn)練：制作美術(shù)實(shí)戰(zhàn)訓(xùn)練：制作美術(shù)(mish)工作工作室頁(yè)面室頁(yè)面制作美術(shù)工作室頁(yè)面任務(wù)分析技術(shù)難點(diǎn)提示任務(wù)提示步驟提示第27頁(yè)/共31頁(yè)第二十七頁(yè)，共32頁(yè)。3.3實(shí)戰(zhàn)實(shí)戰(zhàn)(shzhn)訓(xùn)練：制作美術(shù)工訓(xùn)練：制作美術(shù)工作室頁(yè)面作室頁(yè)面制作美術(shù)工作室頁(yè)面第28頁(yè)/共31頁(yè)第二十八頁(yè)，共32頁(yè)。3.4 思考思考(sko)與與練習(xí)練習(xí)1.XHTML文檔的基本結(jié)構(gòu)由哪幾部分組成？2.如何在XHTML代碼中使用CSS代碼？3.什么是CSS的選擇器？CSS一共有幾種選擇器？4.有幾種方法能夠保證用戶設(shè)計(jì)的樣式可應(yīng)用到內(nèi)容中？第29頁(yè)/共31頁(yè)第二十九頁(yè)，共32頁(yè)。第30頁(yè)/共31頁(yè)第三十頁(yè)，共32頁(yè)。謝謝您的觀看(gunkn)！第31頁(yè)/共31頁(yè)第三十一頁(yè)，共32頁(yè)。NoImage內(nèi)容(nirng)總結(jié)能使用各種CSS選擇器進(jìn)行頁(yè)面基本設(shè)置。3.1 CSS的基礎(chǔ)知識(shí)。XHTML和CSS之間是“內(nèi)容結(jié)構(gòu)”與“表現(xiàn)形式”的關(guān)系。we