Dreamweaver網頁設計與制作教程課件第8章 樣式表

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

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

存放在另一個文件(.css

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

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

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

/*定義段落樣式表*/

p

{

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

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

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

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

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

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

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

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

是寫在使用它的標簽(Tag)內的，例如要在<p>標簽中使用，其語法為：<pstylefont-size:20pt>這段文字使用了內嵌樣式表，更改了字體大小為20</p>。2.內部樣式表不同于內嵌樣式表，其是寫在html網頁的<head></head>標簽之間的，所以它對本網頁全部有效。應注意的是，因為它不是寫在某一個標簽內的，所以在寫的時候要注意，自己想在那個標簽內使用這個樣式表，再定義的時候也要寫清楚，否則會造成整個頁面的混亂。3.外部樣式表外部樣式表就是將樣式表的內容單獨寫到一個記事本中，并保存為后綴為.css的文件，如果想使用外部樣式表需附加進來。

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

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

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

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

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