第8章樣式表第8章樣式表第8章樣式表內(nèi)容提要CSS的基礎(chǔ)知識(shí)創(chuàng)建CSS樣式定義CSS屬性編輯CSS樣式樣式?jīng)_突第8章樣式表8.1CSS簡(jiǎn)介1、什么是CSSCSS（CascadingStyleSheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。

頁(yè)面內(nèi)容存放在HTML文檔中表現(xiàn)形式

存放在另一個(gè)文件(.css

)中HTML文檔的某一部分通常為文件頭部分

第8章樣式表8.1CSS簡(jiǎn)介2、CSS的特點(diǎn)CSS將頁(yè)面的內(nèi)容與表現(xiàn)形式分離，解決了網(wǎng)頁(yè)制作當(dāng)中普遍存在的這個(gè)問(wèn)題。樣式通常保存在外部的.css文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的CSS文檔，外部樣式表可以同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀，從而層疊樣式表極大地提高了工作效率。第8章樣式表8.1CSS簡(jiǎn)介采用CSS布局相對(duì)于傳統(tǒng)的TABLE網(wǎng)頁(yè)布局而具有以下3個(gè)顯著優(yōu)勢(shì)：1．表現(xiàn)和內(nèi)容相分離將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，HTML文件中只存放文本信息。這樣的頁(yè)面對(duì)搜索引擎更加友好。2．提高頁(yè)面瀏覽速度對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用CSS布局的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長(zhǎng)的標(biāo)簽。3．易于維護(hù)和改版只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面。4．使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn)

第8章樣式表8.1CSS簡(jiǎn)介3、css的寫(xiě)法語(yǔ)法格式為：selector{property:value}其中selector（選擇符）是可以是多種形式，通常是將要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE……，可以通過(guò)此方法定義其property（屬性）和value（值），屬性和值要用冒號(hào)隔開(kāi)。例如：body{color:black}，此例的效果是使頁(yè)面中的文字為黑色。如果屬性的值是多個(gè)單詞組成，必須在值上加引號(hào)，比如字體的名稱通常是幾個(gè)單詞的組合。例如：p{font-family:“TimesNewRoman”}(定義段落字體為T(mén)imesNewRoman)。如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，我們使用分號(hào)將所有的屬性和值分開(kāi)。例如：p{text-align:left;color:green}(段落左對(duì)齊;并且段落中的文字為綠色)。此外，CSS中還可以進(jìn)行選擇符組、類(lèi)選擇符、ID選擇符、包含選擇符和包含選擇符等具體的設(shè)置。第8章樣式表8.1CSS簡(jiǎn)介可以在CSS中插入注釋來(lái)說(shuō)明代碼的含義，注釋有利于以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*"開(kāi)頭，以"*/"結(jié)尾，如下:

/*定義段落樣式表*/

p

{

text-align:center;/*文本居中排列*/

color:black;/*文字為黑色*/

font-family:arial/*字體為arial*/

}第8章樣式表8.1CSS簡(jiǎn)介4、初識(shí)css面板第8章樣式表8.1CSS簡(jiǎn)介1）．顯示類(lèi)別視圖設(shè)置方式及其功能：?jiǎn)螕簟癈SS樣式面板”左下角顯示類(lèi)別視圖按鈕將CSS樣式面板切換為類(lèi)別視圖狀態(tài)，如右圖所示。在此種視圖下，將CSS屬性劃分為9個(gè)類(lèi)別，分別是“字體”、“背景”、“區(qū)塊”、“邊框”、“方框”、“列表”、“定位”、“擴(kuò)展”和“表、內(nèi)容、引用”。可以通過(guò)單擊加號(hào)展開(kāi)屬性列表，通過(guò)點(diǎn)擊減號(hào)折疊屬性列表。第8章樣式表8.1CSS簡(jiǎn)介2）.顯示列表視圖按鈕設(shè)置方式及其功能：?jiǎn)螕簟癈SS樣式面板”左下角顯示列表視圖按鈕將CSS樣式面板切換為列表視圖狀態(tài)，如圖所示。將已定義樣式顯示在視圖的前面，方便使用。在該狀態(tài)下，將全部的樣式按字母順序進(jìn)行列表，這樣可以根據(jù)字母排列順序進(jìn)行編輯和查找。第8章樣式表8.1CSS簡(jiǎn)介3）.只顯示設(shè)置屬性按鈕設(shè)置方式及其功能：?jiǎn)螕簟癈SS樣式面板”左下角只顯示設(shè)置屬性按鈕將CSS樣式面板切換為只顯示設(shè)置屬性狀態(tài)，如圖8.4所示。在該狀態(tài)下，將全部已經(jīng)設(shè)置的屬性按字母順序進(jìn)行排列顯示。通過(guò)單擊面板下方的“添加屬性”鏈接來(lái)添加新的屬性。第8章樣式表8.2創(chuàng)建CSS樣式利用dreamweaver中“CSS樣式面板”中創(chuàng)建樣式規(guī)則按鈕來(lái)創(chuàng)建一個(gè)新的樣式。具體操作步驟如下：第一步：將光標(biāo)定位在文檔中，然后在“CSS樣式面板”中，單擊面板右下角“新建CSS規(guī)則”按鈕或者利用“文本”菜單中“CSS樣式”中的新建“CSS規(guī)則”命令，打開(kāi)“新建CSS規(guī)則”對(duì)話框，如圖所示。第8章樣式表8.2創(chuàng)建CSS樣式第二步：在“新建CSS規(guī)則”對(duì)話框中，選擇所要?jiǎng)?chuàng)建的選擇器類(lèi)型。第三步：在名稱框中輸入相應(yīng)的名稱、選擇已有的標(biāo)簽或是某種鏈接狀態(tài)或ID。第四步：選擇新建CSS規(guī)則要定義的位置。第五步：?jiǎn)螕簟按_定”按鈕，出現(xiàn)“CSS規(guī)則定義”對(duì)話框，如圖所示，完成相應(yīng)的屬性設(shè)置。

第8章樣式表8.2創(chuàng)建CSS樣式在dreamweaver中“CSS樣式面板”中創(chuàng)建樣式規(guī)則中提供了三種樣式類(lèi)型，分別是類(lèi)，標(biāo)簽和高級(jí)。1．自定義CSS樣式(類(lèi)樣式)：可以將樣式屬性設(shè)置為任何文本范圍或文本塊。如.self{color:#66ff00}強(qiáng)調(diào)的一點(diǎn)是在樣式名稱前必須加“.”，并且包含任何字母和數(shù)字的組合。如果沒(méi)有輸入開(kāi)頭的句點(diǎn)，在Dreamweaver中將自動(dòng)輸入。2.HTML標(biāo)簽樣式：重定義標(biāo)記的格式。創(chuàng)建或更改標(biāo)簽的CSS樣式時(shí)，所有用標(biāo)記設(shè)置了格式的文本都立即更新。如h1{font.family:TimesNewRoman}。3.CSS鏈接樣式：重定義鏈接有關(guān)的格式。有如下四種：A:link:設(shè)置正常狀態(tài)下鏈接文字的樣式。A:active:設(shè)置鼠標(biāo)單擊時(shí)的鏈接文字的外觀。A:visited:設(shè)置訪問(wèn)過(guò)的鏈接外觀。A:hover:設(shè)置鼠標(biāo)放置鏈接文字上文字的效果。第8章樣式表8.2創(chuàng)建CSS樣式1、定義css類(lèi)樣式假設(shè)一個(gè)或多個(gè)網(wǎng)頁(yè)中的某些元素使用特殊樣式，應(yīng)該選擇定義一個(gè)類(lèi)樣式，并把該樣式應(yīng)用到相應(yīng)的元素上。類(lèi)樣式是唯一可以應(yīng)用于文檔中任意元素的CSS樣式類(lèi)型。在類(lèi)樣式定義完成之后，與當(dāng)前文檔關(guān)聯(lián)的所有類(lèi)樣式都會(huì)在“CSS樣式”面板或者元素“屬性面板”的“樣式”列表中。用戶亦可以先選擇要添加樣式的元素，進(jìn)而在“CSS樣式”面板或?qū)傩悦姘逯械摹皹邮健绷斜碇羞x擇要添加的類(lèi)樣式。第8章樣式表8.2創(chuàng)建CSS樣式例如，將一個(gè)網(wǎng)頁(yè)文件如圖，要求創(chuàng)建類(lèi)樣式的方法實(shí)現(xiàn)將文章標(biāo)題設(shè)置為仿宋體，大小為20pt，顏色為藍(lán)色；正文的內(nèi)容設(shè)置為宋體，大小為14pt，顏色為綠色。第8章樣式表8.2創(chuàng)建CSS樣式具體操作步驟如下：1.在“CSS樣式”面板中單擊新建樣式規(guī)則按鈕，彈出“新建CSS樣式”對(duì)話框，在選擇類(lèi)樣式中選擇“類(lèi)”選項(xiàng)。2.將“新建CSS規(guī)則”相應(yīng)的參數(shù)設(shè)置為如圖所示。第8章樣式表8.2創(chuàng)建CSS樣式3.單擊確定，彈出“.timu的CSS規(guī)則定義”對(duì)話框，將其參數(shù)按要求設(shè)置為如圖所示。第8章樣式表8.2創(chuàng)建CSS樣式4.仿照上述步驟創(chuàng)建名為.zhengwen的類(lèi)樣式，將其字體設(shè)為宋體，大小為14pt,顏色為綠色。在CSS樣式面板中會(huì)顯示出以創(chuàng)建的兩個(gè)樣式。5.在文檔中選擇唐詩(shī)的題目，通過(guò)“屬性面板”中的“樣式”下拉列表應(yīng)用.timu樣式，或者選擇CSS樣式面板中右鍵單擊所選樣式，彈出快捷菜單選擇“套用”命令。同樣的方法應(yīng)用正文樣式。效果見(jiàn)下圖。第8章樣式表8.2創(chuàng)建CSS樣式2、重定義HTML標(biāo)簽樣式在設(shè)計(jì)制作網(wǎng)頁(yè)的過(guò)程中，有時(shí)要對(duì)網(wǎng)頁(yè)中某些特定元素更改樣式，這時(shí)就可以采用重定義HTML標(biāo)簽樣式。要想對(duì)某項(xiàng)重新設(shè)置，就選擇某標(biāo)簽。譬如要設(shè)置表格樣式可選擇“table”或“td”，設(shè)置圖像樣式選擇“img”等。

第8章樣式表8.2創(chuàng)建CSS樣式例如：<b>標(biāo)簽的作用在于把文字顯示為粗體，這是瀏覽器對(duì)<b>標(biāo)簽的默認(rèn)屬性的解釋。但可以通過(guò)樣式表對(duì)其進(jìn)行改寫(xiě)。具體操作步驟如下：1.在“CSS樣式”面板中單擊新建樣式規(guī)則按鈕，彈出“新建CSS樣式”對(duì)話框，在選擇類(lèi)樣式中選擇“標(biāo)簽”選項(xiàng)。2.將“新建CSS規(guī)則”相應(yīng)的參數(shù)設(shè)置為如下圖所示。第8章樣式表8.2創(chuàng)建CSS樣式3.單擊確定，彈出“b的CSS規(guī)則定義”對(duì)話框，將其參數(shù)按要求設(shè)置為如圖所示。4.在文檔中代碼視圖當(dāng)中，body區(qū)中寫(xiě)<b>這個(gè)字是粗體</b>，看到的效果不是粗體，而是正常。這是因?yàn)?lt;b>的font.weight屬性被重新定義了，所以在顯示的時(shí)候會(huì)優(yōu)先解析CSS對(duì)其的定義。第8章樣式表8.2創(chuàng)建CSS樣式3、修改超級(jí)鏈接樣式文字鏈接可以說(shuō)是網(wǎng)頁(yè)中最常見(jiàn)的頁(yè)面元素了，默認(rèn)的文字鏈接樣式都是帶下劃線的效果，網(wǎng)頁(yè)設(shè)計(jì)和制作者通常需要改變這一陳不變的外觀，以使之符合頁(yè)面的整體效果，自從樣式表得到廣泛的應(yīng)用后，這項(xiàng)操作就變得非常方便。在Dreamweaver8中CSS樣式類(lèi)型中的“高級(jí)”可以實(shí)現(xiàn)這一功能。操作方法類(lèi)似于重定義HTML標(biāo)簽的操作方法。定義后的鏈接狀態(tài)也會(huì)直接應(yīng)用到文檔中。第8章樣式表8.2創(chuàng)建CSS樣式例如：默認(rèn)情況下的鏈接文字，文字格式是帶有下劃線的藍(lán)色字體，而且字體也很大，為了使網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格整體一致，通過(guò)CSS樣式表來(lái)改變其顯示格式。具體的操作步驟如下：1．新建一個(gè)頁(yè)面，在文檔中寫(xiě)入“這是一個(gè)超級(jí)鏈接”，在屬性面板中設(shè)定它的鏈接為“#”。2．在CSS樣式面板中點(diǎn)擊“新建CSS規(guī)則”按鈕，彈出對(duì)話框，在“定義在”一欄選擇“僅對(duì)該文檔”，在“選擇器類(lèi)型”一欄里選擇“高級(jí)”。打開(kāi)選擇器下拉列表，如圖?？梢钥吹絼?dòng)態(tài)鏈接的4種狀態(tài)。第8章樣式表8.2創(chuàng)建CSS樣式a:link——超級(jí)鏈接的正常狀態(tài)；a:visited——訪問(wèn)過(guò)的超級(jí)鏈接狀態(tài)。a:hover——光標(biāo)移至超級(jí)鏈接上時(shí)的狀態(tài)；a:active——選中超級(jí)鏈接的狀態(tài)。3．接下來(lái)對(duì)這幾種狀態(tài)分別設(shè)定，首先從下拉菜單中選擇a:link，點(diǎn)擊“確定”按鈕后彈出樣式表設(shè)置窗口，設(shè)定該樣式無(wú)下劃線，顏色為#FF6600（橙色）。4．用同樣方法設(shè)定a:visited，設(shè)定其為無(wú)下劃線，顏色為#FFFF00（黃色）。5．接下來(lái)設(shè)定a:hover，設(shè)定其為有劃線，顏色為#FF6600（橙色）。6．a(chǎn):active不用設(shè)置，它會(huì)自動(dòng)依照a:hover而定。注意：必須按照這樣a:link、a:visited、a:hover、a:active的順序來(lái)設(shè)置，否則不會(huì)出現(xiàn)預(yù)期的效果。

第8章樣式表8.2創(chuàng)建CSS樣式4、定義樣式規(guī)則的位置

CSS樣式表按其所在位置分三種，分別是內(nèi)嵌樣式表、內(nèi)部樣式表和外部樣式表。1.內(nèi)嵌樣式表

是寫(xiě)在使用它的標(biāo)簽(Tag)內(nèi)的，例如要在<p>標(biāo)簽中使用，其語(yǔ)法為：<pstylefont-size:20pt>這段文字使用了內(nèi)嵌樣式表，更改了字體大小為20</p>。2.內(nèi)部樣式表不同于內(nèi)嵌樣式表，其是寫(xiě)在html網(wǎng)頁(yè)的<head></head>標(biāo)簽之間的，所以它對(duì)本網(wǎng)頁(yè)全部有效。應(yīng)注意的是，因?yàn)樗皇菍?xiě)在某一個(gè)標(biāo)簽內(nèi)的，所以在寫(xiě)的時(shí)候要注意，自己想在那個(gè)標(biāo)簽內(nèi)使用這個(gè)樣式表，再定義的時(shí)候也要寫(xiě)清楚，否則會(huì)造成整個(gè)頁(yè)面的混亂。3.外部樣式表外部樣式表就是將樣式表的內(nèi)容單獨(dú)寫(xiě)到一個(gè)記事本中，并保存為后綴為.css的文件，如果想使用外部樣式表需附加進(jìn)來(lái)。

這三種樣式表區(qū)別不大，只是用外部樣式表可以使代碼重復(fù)使用，方便其它頁(yè)面調(diào)用同樣的CSS樣式表。在dreamweaver8中，在新建CSS樣式規(guī)則的時(shí)候，在新建CSS規(guī)則對(duì)話框中“定義在”中選擇定義樣式規(guī)則的位置。第8章樣式表8.3定義css屬性在“CSS規(guī)則定義”對(duì)話框”中，可以通過(guò)類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展項(xiàng)的設(shè)置，來(lái)格式化頁(yè)面。但是需要明確的是，在定義某個(gè)CSS樣式的時(shí)候，不必對(duì)每一個(gè)項(xiàng)都進(jìn)行設(shè)置，需要什么效果，對(duì)相應(yīng)的項(xiàng)進(jìn)行設(shè)置就可以。第8章樣式表8.3定義css屬性

1、類(lèi)型屬性在類(lèi)型屬性當(dāng)中，主要是對(duì)文本等樣式的設(shè)置，如圖。第8章樣式表8.3定義css屬性2、背景屬性在HTML中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用CSS之后，有了更加靈活的設(shè)置。如圖所示。

第8章樣式表8.3定義css屬性3、區(qū)塊屬性在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“區(qū)塊”項(xiàng)，能在右邊區(qū)域設(shè)置CSS樣式的區(qū)塊格式。如圖所示。第8章樣式表8.3定義css屬性4、方框?qū)傩郧懊嬷v述過(guò)設(shè)置過(guò)圖像的大小、設(shè)置圖像水平和垂直方向上的空白區(qū)域、設(shè)置圖像是否有文字環(huán)繞效果等。方框設(shè)置進(jìn)一步完善、豐富了這些設(shè)置。如圖所示。第8章樣式表8.3定義css屬性5、邊框?qū)傩赃吙驑邮皆O(shè)置能給對(duì)象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。如圖。在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“邊框”項(xiàng)，能在右邊區(qū)域設(shè)置CSS樣式的邊框格式。樣式設(shè)置邊框的樣式，如果選中“全部相同”復(fù)選框，則只需要設(shè)置“上”樣式，其他方向的樣式和“上”相同。第8章樣式表8.3定義css屬性6列表屬性CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“列表”項(xiàng)，能在右邊區(qū)域設(shè)置CSS樣式的列表格式。如圖。第8章樣式表8.3定義css屬性7定位屬性“定位”項(xiàng)實(shí)際上是對(duì)層的設(shè)置，不過(guò)因?yàn)镈W提供了可視化的層制作功能，所以此項(xiàng)設(shè)置在實(shí)際操作中幾乎不會(huì)使用。

第8章樣式表8.3定義css屬性8擴(kuò)展屬性CSS樣式還能實(shí)現(xiàn)一些擴(kuò)展功能，這些功能集中在擴(kuò)展面板上。這個(gè)面板主要包括3種效果：分頁(yè)、光標(biāo)和過(guò)濾器。在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“擴(kuò)展”項(xiàng)，能在右邊區(qū)域設(shè)置CSS樣式的擴(kuò)展格式。第8章樣式表8.4編輯css樣式1、更改css樣式為了使網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格統(tǒng)一更加完美，有時(shí)需要更改設(shè)置好的CSS樣式。在Dreamweaver8可以通過(guò)“CSS樣式面板”進(jìn)行更改。操作如下：打開(kāi)CSS樣式面板如圖，在“所有規(guī)則”當(dāng)中選中要更改的樣式，使用右下角“編輯CSS規(guī)則按鈕”，即彈出該樣式的規(guī)則定義對(duì)話框，并對(duì)其進(jìn)行設(shè)置?；蛘咴凇皩傩浴眳^(qū)域中進(jìn)行更改設(shè)置；或者雙擊“所有規(guī)則”中所要更改的樣式名稱，即彈出該樣式的規(guī)則定義對(duì)話框，并對(duì)其進(jìn)行設(shè)置。第8章樣式表8.4編輯css樣式2、刪除css樣式如果想要?jiǎng)h除已有的樣式，同樣可以通過(guò)CSS樣式面板刪除。打開(kāi)CSS樣式面板如圖，在“所有規(guī)則”當(dāng)中選中要更改的樣式，使用右下角“刪除CSS規(guī)則按鈕”即可以刪除已有的樣式規(guī)則。第8章樣式表8.4編輯css樣式3、導(dǎo)出css樣式在Dreamweaver8可以將網(wǎng)頁(yè)當(dāng)中的內(nèi)部樣式導(dǎo)出，方法一：將光標(biāo)定位在該文檔當(dāng)中，單擊“文件”菜單，選擇“導(dǎo)出”當(dāng)中的“CSS樣式”命令，或者利用“文本”菜單當(dāng)中的“導(dǎo)出”命令，會(huì)彈出如圖所示的對(duì)話框。選擇保存路徑，并寫(xiě)上文件名字即可。第8章樣式表8.4編輯css樣式

應(yīng)用外部樣式表在制作網(wǎng)頁(yè)過(guò)程中，有時(shí)需要使用已有的“外部樣式表”文件。通常來(lái)講，有兩種方式可以使用外部樣式表，一種是鏈接樣式表，其代碼如下：<linkhref="N1.css"rel="stylesheet"type="text/css"/>/*N1.css為外部樣式表文件的名稱*/來(lái)實(shí)現(xiàn)，另一種是導(dǎo)入樣式表，其代碼如下：<styletype="text/css">@import"mystyle.css";/*mystyle.css為外部樣式表文件的名稱*/</style>第8章樣式表8.4編輯css樣式兩種方式后