Web前端實用教案

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

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

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

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

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

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

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

8、20頁/共31頁第二十頁，共32頁。3.2 CSS的特性的特性(txng)2.繼承的優(yōu)先級在制作網(wǎng)頁的過程中，制作者可能想要設(shè)置某個規(guī)則比其他的規(guī)則更重要，CSS中允許這樣設(shè)置，稱為重要規(guī)則（important rule）。這是根據(jù)其聲明的方式和它們的自然屬性命名的。通過在一條規(guī)則的分號前插入“！important”來標(biāo)記一條重要規(guī)則。第21頁/共31頁第二十一頁，共32頁。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)格不會影響父標(biāo)簽。CSS的繼承貫穿整個CSS頁面設(shè)計中，利用

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

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