1、網頁設計制作上機實驗實驗3 CSS樣式表的設置與應用一、實驗目的1掌握CSS樣式的作用2掌握CSS樣式的創建和使用二、實驗要求1. 掌握使用CSS樣式面板創建4種基本選擇器類型的CSS樣式。2. 掌握以內部樣式、外部樣式使用CSS樣式的方式三、實驗內容和步驟CSS（Cascading Style Sheet，層疊樣式表）技術是一種格式化網頁的標準方式，它通過設置CSS屬性使網頁元素獲得各種不同效果。CSS不是一種程序設計語言，而只是一種用于網頁排版的標識性語言，是對現有HTML語言功能的補充和擴展。CSS的主要功能是通過對HTML選擇器進行設定，來實現對網頁中的字體、字號、顏色、背景、圖像及其

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

3、面板可以用來進行新建CSS規則，編輯CSS規則，刪除CSS規則以及為網頁指定外部樣式表等操作。l “全部”標簽顯示當前網頁中使用的使用各種樣式選擇器的全部樣式。雙擊其中的某個樣式可以打開“CSS規則定義”窗口對樣式進行編輯。l “正在”標簽顯示當前鼠標所在處的網頁元素具有的CSS屬性及屬性值。可以在窗口的下方點擊某一屬性值進行修改，不必打開“CSS規則定義”窗口。在Dreamweaver中新建一個HTML文件，點擊“新建CSS規則”按鈕，查看“新建CSS規則”對話框中選擇器器類型、選擇器名稱、選擇器位置的選項。操作題一：理解樣式表的作用說明通過給網頁文件添加CSS樣式表文件的引用，改變網頁元素

4、的格式。1. 在Dreamweaver 中打開pm2.5.html，觀察網頁的HTML組成以及沒有附加CSS樣式時的表現。2. 點擊CSS樣式面板的“附加樣式表”按鈕。3. 在彈出的“鏈接外部樣式表”對話框中，通過“瀏覽”找到css/pmstyle.css并鏈接到網頁中。4. 觀察網頁head元素中的變化，會發現網頁中通過<link>元素把css/pmstyle.css 引入到了網頁中。<link href="css/pmstyle.css" rel="stylesheet" type="text/css">5

5、. 保存文件并在瀏覽器中預覽。操作題二：創建CSS樣式說明通過標簽選擇器、ID選擇器、類選擇器類型的樣式定義，掌握在CSS樣式的定義和創建，以及各種選擇器的使用場景。完成后的效果如下：在Dreamweaver 中打開“worldwideweb.html”。2.1 定義h1元素的CSS樣式。目的：通過樣式定義，改變h1元素的默認樣式，具有新的背景顏色，文字顏色，文字大小，文字字體。把光標放在h1元素上，點擊”CSS樣式”面板的“新建CSS規則”按鈕，設置選擇器類型為“標簽”，選擇器名稱為”h1”，并點擊確定按鈕:在“CSS規則定義”窗口設置如下屬性：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;在設置font-family時，選擇“自定義字體堆棧”，從可用字體列表中選擇字體后，點擊加入選擇的字體。創建完字體堆棧后，從font-family的下拉列表中可以找到這一字體堆棧并選擇。然后，h1元素應該變成：2.2 定義blockquo

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

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

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

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

11、選擇器的樣式把鼠標定位到“參考書籍”所在h2元素，選擇“屬性檢查器”中“類”下拉列表中的“reference”。對“參考鏈接”所在h2元素做同樣處理，即可以把“reference”類選擇器定義的樣式應用到這兩個h2元素。請注意從代碼的角度，類樣式是如何應用到網頁元素上的：2.7 定義名稱為“footer”的ID選擇器的樣式改變“本文資料來源：整理自互聯網”所在p元素的樣式。把鼠標定位到“本文資料來源：整理自互聯網”所在元素，在“屬性檢查器”中設置ID為“footer”,按回車鍵確認。點擊”CSS樣式”面板的“新建CSS規則”按鈕，設置選擇器類型為“ID”，選擇器名稱為“footer”，并點擊確

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

13、in:0;這段代碼請放在所有樣式的前面。請思考：對于blockquote元素來說，聲明了2次padding，那么起作用的的是哪一條聲明呢？操作題三：把網頁裝在容器里說明在沒有使用容器元素把網頁元素裝進去之前，網頁元素會撐滿整個瀏覽器。這里將增加一個 div容器元素，并設置div的寬度和水平居中。Step 1. 在代碼視圖中的body元素的開始標簽后面增加一個div元素，并命名為“container”Step 2. 把div的結束標記移動到body元素的結束標簽的前面，從而使得div元素的開始標簽和結束標簽把網頁中原有的元素都包括在其中。Step 3. 在style區域編輯“#container

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

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