實(shí)驗(yàn)3 CSS樣式表的設(shè)置與應(yīng)用

1、網(wǎng)頁(yè)設(shè)計(jì)制作上機(jī)實(shí)驗(yàn)實(shí)驗(yàn)3 CSS樣式表的設(shè)置與應(yīng)用一、實(shí)驗(yàn)?zāi)康?掌握CSS樣式的作用2掌握CSS樣式的創(chuàng)建和使用二、實(shí)驗(yàn)要求1. 掌握使用CSS樣式面板創(chuàng)建4種基本選擇器類(lèi)型的CSS樣式。2. 掌握以?xún)?nèi)部樣式、外部樣式使用CSS樣式的方式三、實(shí)驗(yàn)內(nèi)容和步驟CSS（Cascading Style Sheet，層疊樣式表）技術(shù)是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它通過(guò)設(shè)置CSS屬性使網(wǎng)頁(yè)元素獲得各種不同效果。CSS不是一種程序設(shè)計(jì)語(yǔ)言，而只是一種用于網(wǎng)頁(yè)排版的標(biāo)識(shí)性語(yǔ)言，是對(duì)現(xiàn)有HTML語(yǔ)言功能的補(bǔ)充和擴(kuò)展。CSS的主要功能是通過(guò)對(duì)HTML選擇器進(jìn)行設(shè)定，來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中的字體、字號(hào)、顏色、背景、圖像及其

2、他元素的控制，使網(wǎng)頁(yè)能夠完全按照設(shè)計(jì)者的要求來(lái)顯示。 CSS的定義由三部分構(gòu)成：選擇符selector、屬性property和屬性值value。其基本格式如下：selectorproperty l:value l;property 2:value 2;其中selector（選擇符）表示需要應(yīng)用樣式的內(nèi)容，property表示由CSS標(biāo)準(zhǔn)定義的樣式屬性，value表示樣式屬性的值。準(zhǔn)備工作1 以解壓縮后的“實(shí)驗(yàn)3”文件夾為根文件夾，在Dreamweaver 中建立站點(diǎn)。2 在Dreamweaver 的首選參數(shù)中設(shè)置代碼提示功能中結(jié)束標(biāo)簽在“鍵入起始標(biāo)簽>后”3 熟悉CSS樣式面板CSS樣式

3、面板可以用來(lái)進(jìn)行新建CSS規(guī)則，編輯CSS規(guī)則，刪除CSS規(guī)則以及為網(wǎng)頁(yè)指定外部樣式表等操作。l “全部”標(biāo)簽顯示當(dāng)前網(wǎng)頁(yè)中使用的使用各種樣式選擇器的全部樣式。雙擊其中的某個(gè)樣式可以打開(kāi)“CSS規(guī)則定義”窗口對(duì)樣式進(jìn)行編輯。l “正在”標(biāo)簽顯示當(dāng)前鼠標(biāo)所在處的網(wǎng)頁(yè)元素具有的CSS屬性及屬性值?？梢栽诖翱诘南路近c(diǎn)擊某一屬性值進(jìn)行修改，不必打開(kāi)“CSS規(guī)則定義”窗口。在Dreamweaver中新建一個(gè)HTML文件，點(diǎn)擊“新建CSS規(guī)則”按鈕，查看“新建CSS規(guī)則”對(duì)話(huà)框中選擇器器類(lèi)型、選擇器名稱(chēng)、選擇器位置的選項(xiàng)。操作題一：理解樣式表的作用說(shuō)明通過(guò)給網(wǎng)頁(yè)文件添加CSS樣式表文件的引用，改變網(wǎng)頁(yè)元素

4、的格式。1. 在Dreamweaver 中打開(kāi)pm2.5.html，觀察網(wǎng)頁(yè)的HTML組成以及沒(méi)有附加CSS樣式時(shí)的表現(xiàn)。2. 點(diǎn)擊CSS樣式面板的“附加樣式表”按鈕。3. 在彈出的“鏈接外部樣式表”對(duì)話(huà)框中，通過(guò)“瀏覽”找到css/pmstyle.css并鏈接到網(wǎng)頁(yè)中。4. 觀察網(wǎng)頁(yè)head元素中的變化，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)中通過(guò)<link>元素把css/pmstyle.css 引入到了網(wǎng)頁(yè)中。<link href="css/pmstyle.css" rel="stylesheet" type="text/css">5

5、. 保存文件并在瀏覽器中預(yù)覽。操作題二：創(chuàng)建CSS樣式說(shuō)明通過(guò)標(biāo)簽選擇器、ID選擇器、類(lèi)選擇器類(lèi)型的樣式定義，掌握在CSS樣式的定義和創(chuàng)建，以及各種選擇器的使用場(chǎng)景。完成后的效果如下：在Dreamweaver 中打開(kāi)“worldwideweb.html”。2.1 定義h1元素的CSS樣式。目的：通過(guò)樣式定義，改變h1元素的默認(rèn)樣式，具有新的背景顏色，文字顏色，文字大小，文字字體。把光標(biāo)放在h1元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為”h1”，并點(diǎn)擊確定按鈕:在“CSS規(guī)則定義”窗口設(shè)置如下屬性：font-size:64px;font-fam

6、ily: "微軟雅黑", "黑體", "宋體"background-color:#69F;color:#FFF;text-align: center;padding-top: 50px;padding-right: 0px;padding-bottom: 50px;padding-left: 0px;在設(shè)置font-family時(shí)，選擇“自定義字體堆?！保瑥目捎米煮w列表中選擇字體后，點(diǎn)擊加入選擇的字體。創(chuàng)建完字體堆棧后，從font-family的下拉列表中可以找到這一字體堆棧并選擇。然后，h1元素應(yīng)該變成：2.2 定義blockquo

7、te元素的CSS樣式目的：通過(guò)樣式定義，改變blockquote元素的默認(rèn)樣式，具有新的內(nèi)邊距、左邊框、背景顏色。把光標(biāo)放在blockquote元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為”blockquote”，并點(diǎn)擊確定按鈕。在“CSS規(guī)則定義”窗口設(shè)置如下屬性：background-color: #EEE;border-left-width: 10px;border-left-style: solid;border-left-color: #666;請(qǐng)觀察代碼視圖中的CSS樣式，可以看到Dreamweaver 在自動(dòng)生成CSS樣式時(shí)默認(rèn)不

8、會(huì)采用簡(jiǎn)寫(xiě)形式，因此CSS代碼會(huì)比較多，請(qǐng)嘗試刪除原來(lái)的與border相關(guān)的代碼后，自行編寫(xiě)如下的邊框的簡(jiǎn)寫(xiě)形式：border-left:10px solid #666;而且，你會(huì)發(fā)現(xiàn)如果沒(méi)有內(nèi)邊距，blockquote元素中的文字會(huì)緊貼著背景，因此通過(guò)需要增加內(nèi)邊距來(lái)使得排版不那么擁擠。padding:15px;然后，blockquote元素應(yīng)該變成：如果通過(guò)Firefox 的Firebug插件來(lái)觀察blockquote元素（把鼠標(biāo)懸停在HTML面板的blockquote元素上），F(xiàn)irebug插件會(huì)使用紫色表示內(nèi)邊距，黃色表示外邊距。2.3定義h2元素的CSS樣式通過(guò)樣式定義，改變h2元素

9、的默認(rèn)樣式，具有新的文字字體、下邊框。點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為”h2”，并點(diǎn)擊確定按鈕。在“CSS規(guī)則定義”窗口設(shè)置如下屬性：font-family: "微軟雅黑", "黑體", "宋體"border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #000;然后，h2元素應(yīng)該變成：2.4 定義p元素的CSS樣式通過(guò)樣式定義，改變p元素的默認(rèn)樣式，使得段落元素首行縮進(jìn)2個(gè)字符，行高為1.5

10、倍。在“CSS規(guī)則定義”窗口設(shè)置如下屬性：line-height:1.5;text-indent: 2em;2.5 定義名稱(chēng)為“reference”類(lèi)選擇器樣式（這里類(lèi)選擇器的名稱(chēng)根據(jù)具體場(chǎng)景由自己定義，起名為reference是為了用于具有參考含義的元素上，改變“參考書(shū)籍”和“參考鏈接”所在h2元素的文字顏色）點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“類(lèi)”，輸入選擇器名稱(chēng)為“reference”，并點(diǎn)擊確定按鈕。在“CSS規(guī)則定義”窗口設(shè)置如下屬性：color: #FC0;請(qǐng)觀察代碼視圖中以“.”開(kāi)始的reference定義。2.6 應(yīng)用名稱(chēng)為“reference”類(lèi)

11、選擇器的樣式把鼠標(biāo)定位到“參考書(shū)籍”所在h2元素，選擇“屬性檢查器”中“類(lèi)”下拉列表中的“reference”。對(duì)“參考鏈接”所在h2元素做同樣處理，即可以把“reference”類(lèi)選擇器定義的樣式應(yīng)用到這兩個(gè)h2元素。請(qǐng)注意從代碼的角度，類(lèi)樣式是如何應(yīng)用到網(wǎng)頁(yè)元素上的：2.7 定義名稱(chēng)為“footer”的ID選擇器的樣式改變“本文資料來(lái)源：整理自互聯(lián)網(wǎng)”所在p元素的樣式。把鼠標(biāo)定位到“本文資料來(lái)源：整理自互聯(lián)網(wǎng)”所在元素，在“屬性檢查器”中設(shè)置ID為“footer”,按回車(chē)鍵確認(rèn)。點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“ID”，選擇器名稱(chēng)為“footer”，并點(diǎn)擊確

12、定按鈕。(Dreamweaver也會(huì)自動(dòng)顯示出光標(biāo)所在元素的ID)在“CSS規(guī)則定義”窗口設(shè)置如下屬性：font-size: 24px;color: #FFF;background-color: #666;text-align: center;請(qǐng)手工編輯一下footer樣式的內(nèi)邊距。然后，這一被命名為footer的p元素應(yīng)該變成：2.8 解決body和h1的內(nèi)邊距和外邊距問(wèn)題由于body元素、h1元素、blockquote元素具有默認(rèn)的內(nèi)邊距和外邊距，因此整個(gè)文章和瀏覽器的左上方具有一定的空隙，需要通過(guò)以下的CSS代碼重置樣式：body,h1, blockquotepadding:0;marg

13、in:0;這段代碼請(qǐng)放在所有樣式的前面。請(qǐng)思考：對(duì)于blockquote元素來(lái)說(shuō)，聲明了2次padding，那么起作用的的是哪一條聲明呢？操作題三：把網(wǎng)頁(yè)裝在容器里說(shuō)明在沒(méi)有使用容器元素把網(wǎng)頁(yè)元素裝進(jìn)去之前，網(wǎng)頁(yè)元素會(huì)撐滿(mǎn)整個(gè)瀏覽器。這里將增加一個(gè) div容器元素，并設(shè)置div的寬度和水平居中。Step 1. 在代碼視圖中的body元素的開(kāi)始標(biāo)簽后面增加一個(gè)div元素，并命名為“container”Step 2. 把div的結(jié)束標(biāo)記移動(dòng)到body元素的結(jié)束標(biāo)簽的前面，從而使得div元素的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽把網(wǎng)頁(yè)中原有的元素都包括在其中。Step 3. 在style區(qū)域編輯“#container

14、”樣式，使得它的寬度為960px,水平居中。#containerwidth:960px;margin:0 auto;Step 4. 保存文件并預(yù)覽。Step 5. 如果你希望讓最前面的h1元素和最后面的footer元素仍然占滿(mǎn)瀏覽器的整個(gè)寬度，那么就不把這2個(gè)元素放在container中。你的網(wǎng)頁(yè)看起來(lái)應(yīng)該是下面的樣子：操作題四：移動(dòng)CSS規(guī)則到外部樣式表中Dreamweaver默認(rèn)使用“內(nèi)部樣式表”來(lái)存放網(wǎng)頁(yè)中的樣式。如果樣式是反復(fù)利用在網(wǎng)站的其它網(wǎng)頁(yè)中的，需要把樣式從“內(nèi)部樣式表”移動(dòng)到“外部樣式表”中。1. 在“CSS樣式”面板通過(guò)shift鍵選擇“worldwideweb.html”中

15、的所有的樣式，點(diǎn)擊鼠標(biāo)右鍵，從右鍵菜單中選擇“移動(dòng)CSS規(guī)則”。2.選擇“移至外部樣式表”中的“新樣式表”，點(diǎn)擊“確定”3.在“將樣式表文件另存為”對(duì)話(huà)框中，輸入要保存的CSS樣式表文件為“base”,點(diǎn)擊保存。Dreamweaver 會(huì)將所有的樣式定義移動(dòng)到base.css文件中。觀察在 “worldwideweb.html”文件的<head>元素中，通過(guò)<link>元素把basic.css樣式表引入到了網(wǎng)頁(yè)文件中，并且在文檔工具欄以如下的方式顯示：表示現(xiàn)在worldwideweb.html中使用了base.css這1文件。當(dāng)base.css文件名稱(chēng)旁出現(xiàn)*號(hào)時(shí)，需要單獨(dú)保存或通過(guò)“文件”|“全部保存”來(lái)保存所有的文件。操作題五：把外部樣式表鏈接到同一網(wǎng)站中的其它網(wǎng)頁(yè)（從而使它們具有同樣的風(fēng)格）1. 在Dreamweaver 中打開(kāi)“cloudcomputing.html”。2. 點(diǎn)擊”CSS樣式”面板的“附件樣式表”按鈕，選擇操作題三中定義的base.css文件，點(diǎn)擊“