第8章應(yīng)用CSS樣式美化網(wǎng)頁(yè)

1、第第8 8章章 應(yīng)用應(yīng)用CSS樣式美化網(wǎng)頁(yè)樣式美化網(wǎng)頁(yè) 一、一、 CSS基礎(chǔ)CSS（Cascading Style sheets，層疊樣式表）是一種制作網(wǎng)頁(yè)的新技術(shù)，主要用來(lái)指定布局、字體、顏色、背景以及其他一些圖文元素的格式。CSS現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具之一。使用CSS能夠簡(jiǎn)化網(wǎng)頁(yè)的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量，尤其是在設(shè)計(jì)者面對(duì)有數(shù)百個(gè)網(wǎng)頁(yè)的站點(diǎn)時(shí)，大大減少了重復(fù)勞動(dòng)的工作量。CSS樣式一般分為內(nèi)部樣式表文件和外部樣式表文件兩種類型。用內(nèi)容樣式表文件創(chuàng)建的樣式只對(duì)當(dāng)前文檔起作用，外部樣式表文件保存在外部，但可以鏈接到當(dāng)前文檔中

2、。外部樣式應(yīng)用于多個(gè)文檔，且生成專門的的*.css文件。CSS樣式最大的優(yōu)點(diǎn)就是它能自動(dòng)更新，當(dāng)應(yīng)用了CSS格式后，如果不滿意，僅修改CSS樣式即可更改所有的應(yīng)用。1.1.創(chuàng)建創(chuàng)建CSSCSS樣式樣式（1）選擇“窗口”-“CSS樣式”（快捷鍵為Shift+F11）命令，打開(kāi)“CSS樣式”面板。（2）單擊“CSS樣式”面板中的“新建規(guī)則樣式”按鈕，打開(kāi)“新建CSS樣式”對(duì)話框。或者選擇“文本”-“CSS 樣式”-“新建”，來(lái)打開(kāi)“新建CSS樣式”對(duì)話框。對(duì)話框中各項(xiàng)功能說(shuō)明如下：1）“類（可應(yīng)用于任何標(biāo)簽）”，生成一個(gè)新的樣式。制作完畢后，可以在樣式面板中看到制作完成的樣式。在應(yīng)用的時(shí)候，首先在

3、頁(yè)面中選中對(duì)象，然后選擇樣式即可。2）“標(biāo)簽（重新定義特定標(biāo)簽的外觀）”：將現(xiàn)有的HTML標(biāo)簽賦上樣式。制作完畢后不需要選中對(duì)象就可以直接應(yīng)用到頁(yè)面中。二、創(chuàng)建和應(yīng)用樣式表二、創(chuàng)建和應(yīng)用樣式表3）“高級(jí)（ID、上下文選擇器等）”：為具體某個(gè)標(biāo)簽組合或所有包含特定ID屬性的標(biāo)簽定義格式。在“選擇器”文本框中輸入一個(gè)或多個(gè)HTML標(biāo)簽，或從彈出式菜單中選擇一個(gè)標(biāo)簽。彈了的菜單中提供的標(biāo)簽包含a:active、a:hover、 a:link、a:visited。其中a:active表示超級(jí)鏈接文本被激活時(shí)顯示樣式，a:hover表示光標(biāo)移動(dòng)到超級(jí)鏈接文本時(shí)顯示樣式，a:link表示正常的未被訪問(wèn)過(guò)的

4、超鏈接文本的顯示樣式，a:visited表示被訪問(wèn)過(guò)的超鏈接文本的顯示樣式。4）名稱：指定CSS樣式的名稱。類名稱必須以句點(diǎn)開(kāi)頭，并且可以包含任何字母和數(shù)字組合（如，.myhead1）。如果沒(méi)有輸入開(kāi)頭的句點(diǎn)，Dreamweaver 將自動(dòng)輸入它。5）定義在：指定第一個(gè)選項(xiàng)“新建樣式表文件”時(shí)所建立的CSS樣式以外部文件的方式存在，在其它文檔中也可以應(yīng)用該CSS樣式。指定第二個(gè)選項(xiàng)“僅對(duì)該文檔”時(shí)所建立的CSS樣式存在于當(dāng)前文檔之中，只能應(yīng)用于當(dāng)前文檔。（3）單擊“確定”按鈕，彈出CSS規(guī)則定義對(duì)話框。（4）在CSS規(guī)則定義對(duì)話框中設(shè)置相應(yīng)的參數(shù)，單擊“確定”即完成CSS樣式的建立。 2 2應(yīng)

5、用應(yīng)用CSSCSS樣式樣式(1)在文檔中，選擇要應(yīng)用 CSS 樣式的文本。 將插入點(diǎn)放在段落中以便將樣式應(yīng)用于整個(gè)段落。如果在單個(gè)段落中選擇一個(gè)文本范圍，則 CSS 樣式只影響所選范圍。若要指定要應(yīng)用 CSS 樣式的確切標(biāo)簽，請(qǐng)?jiān)谖挥凇拔臋n”窗口左下角的標(biāo)簽選擇器中選擇標(biāo)簽。(3)執(zhí)行下列操作之一。 l在“CSS 樣式”面板（“窗口”-“CSS 樣式”）中，選擇“所有”模式，右鍵單擊要應(yīng)用的樣式名稱，然后從上下文菜單選擇“應(yīng)用”。l在文本屬性檢查器中，從“樣式” 菜單中選擇要應(yīng)用的類樣式。l在“文檔”窗口中，右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 所

6、選文本，在上下文菜單中選擇“CSS 樣式”，然后選擇要應(yīng)用的樣式。l打開(kāi)“文本”-“CSS 樣式”，在子菜單中選擇要應(yīng)用的樣式。如果要應(yīng)用的CSS樣式為外部樣式表（即其他文檔中定義的“新建樣式表文件”），則需先添加進(jìn)外部樣式表。具體方法為：在需應(yīng)用外部樣式表的文檔中，打開(kāi)菜單“文本-CSS樣式-附加樣式表”，彈出鏈接外部樣式表對(duì)話框。點(diǎn)擊“瀏覽”按鈕，選擇需要鏈接到該文檔的CSS樣式表（此處為redapple.css）；單擊“確定”按鈕。此時(shí)在“文本CSS樣式”的子菜單中，可以看到剛剛鏈接進(jìn)來(lái)的redapple樣式。在該文檔中可以直接應(yīng)用redapple樣式。3.3.重命名樣式重命名樣式l在“

7、CSS 樣式”面板中，右鍵單擊要重命名的 CSS 類樣式，然后選擇“重命名類”。 或者：通過(guò)從“CSS 樣式”面板選項(xiàng)菜單中選擇“重命名類”來(lái)重命名類。l在“重命名類”對(duì)話框中，確保要重命名的類是在“重命名類”彈出菜單中選擇的類。 l在“新建名稱”文本框中，輸入新類的新名稱，然后單擊“確定”。 4.4.從選定內(nèi)容刪除從選定內(nèi)容刪除CSSCSS樣式樣式(1)選擇要從中刪除樣式的對(duì)象或文本。 (2)在文本屬性檢查器（“窗口”-“屬性”）中，從“樣式”彈出菜單中選擇“無(wú)”。 5.5.編輯編輯CSSCSS樣式樣式CSS 樣式表通常包含一個(gè)或多個(gè)規(guī)則?？梢允褂谩癈SS 樣式”面板編輯 CSS 樣式表中的

8、各個(gè)規(guī)則，如果您喜歡，也可以直接在 CSS 樣式表中操作。(1)在“CSS 樣式”面板（“窗口”“CSS 樣式”）中，選擇“所有”模式。 (2)在“所有規(guī)則”窗格中，雙擊要編輯的樣式表的名稱。 (3)在“文檔”窗口中，根據(jù)需要修改樣式表，然后保存樣式表。 三、定義三、定義CSSCSS屬性屬性CSS規(guī)則定義對(duì)話框中的屬性說(shuō)明如下：1“類型”中的各屬性說(shuō)明：(1)字體：為樣式設(shè)置字體系列（或多組字體系列）。瀏覽器使用用戶系統(tǒng)上安裝的字體系列中的第一種字體顯示文本。為了與 Internet Explorer 3.0 兼容，首先列出 Windows 字體。兩種瀏覽器都支持字體屬性。 (2)大?。憾x文

9、本大小?？梢酝ㄟ^(guò)選擇數(shù)字和度量單位選擇特定的大小，也可以選擇相對(duì)大小。使用像素作為單位可以有效地防止瀏覽器扭曲文本。兩種瀏覽器都支持大小屬性。 (3)樣式：指定“正?！?、“斜體”或“偏斜體”作為字體樣式。默認(rèn)設(shè)置是“正?！薄煞N瀏覽器都支持樣式屬性。 (4)行高：設(shè)置文本所在行的高度。習(xí)慣上將該設(shè)置稱為行高。選擇“正?！弊詣?dòng)計(jì)算字體大小的行高，或輸入一個(gè)確切的值并選擇一種度量單位。兩種瀏覽器都支持行高屬性。 (5)修飾：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。常規(guī)文本的默認(rèn)設(shè)置是“無(wú)”。鏈接的默認(rèn)設(shè)置是“下劃線”。將鏈接設(shè)置設(shè)為無(wú)時(shí)，可以通過(guò)定義一個(gè)特殊的類去除鏈接中的下劃線。兩種瀏

10、覽器都支持修飾屬性。 (6)粗細(xì)：對(duì)字體應(yīng)用特定或相對(duì)的粗體量?！罢！钡扔?400；“粗體”等于 700。兩種瀏覽器都支持粗細(xì)屬性。 (7)變體：設(shè)置文本的小型大寫字母變體。Dreamweaver 不在“文檔”窗口中顯示此屬性。Internet Explorer 支持變體屬性，但 Navigator 不支持。 (8)大小寫：將所選內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。兩種瀏覽器都支持大小寫屬性。2 2“背景背景”中的各屬性說(shuō)明中的各屬性說(shuō)明(1)背景顏色：設(shè)置元素的背景顏色。 (2)背景圖像：設(shè)置元素的背景圖像。 (3)重復(fù) ：確定是否以及如何重復(fù)背景圖像。兩種瀏覽器都支

11、持重復(fù)屬性?！安恢貜?fù)”只在元素開(kāi)始處顯示一次圖像。“重復(fù)”在元素的后面水平和垂直平鋪圖像?！皺M向重復(fù)”和“縱向重復(fù)”分別顯示圖像的水平帶區(qū)和垂直帶區(qū)。圖像被剪輯以適合元素的邊界。(4)附件：確定背景圖像是固定在其原始位置還是隨內(nèi)容一起滾動(dòng)。注意，某些瀏覽器可能將“固定”選項(xiàng)視為“滾動(dòng)”。Internet Explorer 支持該選項(xiàng)，但 Netscape Navigator 不支持。 (5)水平位置和垂直位置：指定背景圖像相對(duì)于元素的初始位置。3 3“區(qū)塊區(qū)塊”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)單詞間距：設(shè)置字詞的間距。(2)字母間距：增加或減小字母或字符的間距。若要減小字符間距，請(qǐng)指定一個(gè)負(fù)

12、值（例如 -4）。字母間距設(shè)置覆蓋對(duì)齊的文本設(shè)置。 (3)垂直對(duì)齊：指定應(yīng)用此屬性的元素的垂直對(duì)齊方式。 (4)文本對(duì)齊：設(shè)置文本在元素內(nèi)的對(duì)齊方式。兩種瀏覽器都支持“文本對(duì)齊”屬性。 (5)文字縮進(jìn)：指定第一行文本縮進(jìn)的程度。可以使用負(fù)值創(chuàng)建凸出，但顯示方式取決于瀏覽器。(6)空格：確定如何處理元素中的空格。從三個(gè)選項(xiàng)中進(jìn)行選擇：“正?！保湛s空白；“保留”，其處理方式與文本被括在 pre 標(biāo)簽中一樣（即保留所有空白，包括空格、制表符和回車）；“不換行”，指定僅當(dāng)遇到 br 標(biāo)簽時(shí)文本才換行。Dreamweaver 不在“文檔”窗口中顯示此屬性。(7)顯示 ：指定是否以及如何顯示元素?！盁o(wú)”

13、指定到某個(gè)元素時(shí)，它將禁用該元素的顯示。 4.“4.“方框方框”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)寬和高：設(shè)置元素的寬度和高度。 (2)浮動(dòng)：設(shè)置其它元素（如文本、AP Div、表格等）在圍繞元素的哪個(gè)邊浮動(dòng)。 (3)清除：定義不允許 AP 元素的邊。如果清除邊上出現(xiàn) AP 元素，則帶清除設(shè)置的元素將移到該元素的下方。 (4)填充：指定元素內(nèi)容與元素邊框之間的間距（如果沒(méi)有邊框，則為邊距）。取消選擇“全部相同”選項(xiàng)可設(shè)置元素各個(gè)邊的填充。 (5)全部相同：為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的填充屬性。 (6)邊距：指定一個(gè)元素的邊框與另一個(gè)元素之間的間距（如果沒(méi)有邊框，

14、則為填充）。僅當(dāng)該屬性應(yīng)用于塊級(jí)元素（段落、標(biāo)題、列表等）時(shí)，Dreamweaver 才會(huì)在“文檔”窗口中顯示它。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊距。 (7)全部相同：為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊距屬性。 5.“5.“邊框邊框”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)樣式：設(shè)置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。Dreamweaver 在“文檔”窗口中將所有樣式呈現(xiàn)為實(shí)線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊框樣式。 (2) “樣式”中全部相同：為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框樣式屬性。

15、(3)寬度：設(shè)置元素邊框的粗細(xì)。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊框?qū)挾取?(4) “寬度”中全部相同：為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框?qū)挾取?(5)顏色：設(shè)置邊框的顏色。可以分別設(shè)置每條邊的顏色，但顯示方式取決于瀏覽器。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊框顏色。 (6)“顏色”中相同：為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框顏色。 6 6“列表列表”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)類型：設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。兩種瀏覽器都支持“類型”。 項(xiàng)目符號(hào)圖像：使您可以為項(xiàng)目符號(hào)指定自定義圖像。單擊“

16、瀏覽”(Windows) 或“選擇”(Macintosh) 通過(guò)瀏覽選擇圖像，或鍵入圖像的路徑。 (2)位置：設(shè)置列表項(xiàng)文本是否換行并縮進(jìn)（外部）或者文本是否換行到左邊距（內(nèi)部）。 7 7“定位定位”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)類型：確定瀏覽器應(yīng)如何來(lái)定位選定的元素。 (2)可見(jiàn)性：確定內(nèi)容的初始顯示條件。如果不指定可見(jiàn)性屬性，則默認(rèn)情況下內(nèi)容將繼承父級(jí)標(biāo)簽的值。body 標(biāo)簽的默認(rèn)可見(jiàn)性是可見(jiàn)的。其中“繼承”（默認(rèn)）繼承內(nèi)容的父級(jí)可見(jiàn)性屬性?！翱梢?jiàn)” 將顯示內(nèi)容，而與父級(jí)的值無(wú)關(guān)?！半[藏” 將隱藏內(nèi)容，而與父級(jí)的值無(wú)關(guān)。(3)Z 軸：確定內(nèi)容的堆疊順序。Z 軸值較高的元素顯示在 Z 軸

17、值較低的元素（或根本沒(méi)有 Z 軸值的元素）的上方。值可以為正，也可以為負(fù) (4)溢出：確定當(dāng)容器（如 DIV 或 P）的內(nèi)容超出容器的顯示范圍時(shí)的處理方式。 (5)位置：指定內(nèi)容塊的位置和大小。(6)剪輯：定義內(nèi)容的可見(jiàn)部分。如果指定了剪輯區(qū)域，可以通過(guò)腳本語(yǔ)言（如 JavaScript）訪問(wèn)它，并操作屬性以創(chuàng)建像擦除這樣的特殊效果。使用“改變屬性”行為可以設(shè)置擦除效果。 8 8“擴(kuò)展擴(kuò)展”中的各參數(shù)說(shuō)明中的各參數(shù)說(shuō)明(1)分頁(yè)：在打印期間在樣式所控制的對(duì)象之前或者之后強(qiáng)行分頁(yè)。在彈出菜單中選擇要設(shè)置的選項(xiàng)。此選項(xiàng)不受任何 4.0 版本瀏覽器的支持，但可能受未來(lái)的瀏覽器的支持。 (2)光標(biāo)：當(dāng)

18、指針位于樣式所控制的對(duì)象上時(shí)改變指針圖像。在彈出菜單中選擇要設(shè)置的選項(xiàng)。Internet Explorer 4.0 和更高版本以及 Netscape Navigator 6 支持該屬性。 (3)過(guò)濾器：對(duì)樣式所控制的對(duì)象應(yīng)用特殊效果（包括模糊和反轉(zhuǎn)）。從彈出菜單中選擇一種效果。過(guò)濾器中包括很多特殊的效果，各類效果及參數(shù)說(shuō)明如下：1)Alpha：透明效果?？梢允箞D像呈現(xiàn)出透明效果，共有七種參數(shù)，opacity為不透明度，范圍是0100，0表示完全透明，100表示完全不透明。Finishopacity為結(jié)束時(shí)的不透明度，它用來(lái)設(shè)定圖像結(jié)束時(shí)的不透明度，利用它可以制作出透明漸進(jìn)的效果，取值范圍同opacity。Style為樣式，用來(lái)指定圖像漸變的類型，0表示沒(méi)有漸變，1表示直線漸變，2表示圓形漸變，3表示矩形漸變。startX和startY表示漸變開(kāi)始的X、Y坐標(biāo)值。finishX和finishY表示漸變結(jié)束的X、Y坐標(biāo)值。2)BlendTrans：漸隱漸現(xiàn)效果。參數(shù)duration用來(lái)設(shè)定漸隱漸現(xiàn)的時(shí)間，以秒為單位。3)Bl