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

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

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

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

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

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

/*定義段落樣式表*/

p

{

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

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

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

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

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

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

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

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

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

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

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

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

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

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