實戰(zhàn)Dreamweaver CC 網(wǎng)頁制作教程 第4版 課件 第6章 使用CSS層疊樣式表

學(xué)習目標了解什么是CSS樣式表。掌握CSS規(guī)則的基本語法、存在形式和選擇器的類型。能夠創(chuàng)建并靈活運用類選擇器CSS規(guī)則、標簽選擇器CSS規(guī)則、錨偽類CSS規(guī)則。能夠編輯、刪除CSS規(guī)則。能夠附加外部CSS樣式表文件。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.2

標簽選擇器CSS規(guī)則和錨偽類CSS規(guī)則的創(chuàng)建與應(yīng)用6.3如何應(yīng)用外部CSS樣式表本章內(nèi)容6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

最終制作效果如圖所示6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（1）規(guī)劃站點新建文件夾“shufa_beihou”，將素材文件夾中所有文件和文件夾拷貝到“shufa_beihou”文件夾中。（2）定義站點在DreamweaverCC2015中，單擊菜單“站點”→“新建站點”命令，通過“站點設(shè)置對象”對話框定義站點，站點名稱為“菁菁家園”，本地站點文件夾設(shè)置為shufa_beihou文件夾。（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”打開shufa_rensheng.html，創(chuàng)建一個類選擇器規(guī)則用來修飾文章內(nèi)容，字體為宋體，大小為9pt，顏色代碼為#009900，行高140%。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”1）點擊菜單“窗口”→“CSS設(shè)計器”命令，打開“CSS設(shè)計器”面板，如果“CSS設(shè)計器”命令前已打?qū)?，表示“CSS設(shè)計器”面板已經(jīng)打開，無需執(zhí)行此命令。2）添加源。在“CSS設(shè)計器”面板“源”窗格中點擊圖標，選擇“在頁面中定義”，在“源”窗格中生成<style>標簽，表示創(chuàng)建源成功。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”3）添加選擇器。選擇在“源”窗格中創(chuàng)建的源<style>，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“.content”。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”4）應(yīng)用CSS規(guī)則。在頁面中選擇文章內(nèi)容部分，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.content”規(guī)則。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”5）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.content的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“9pt”；“Color”設(shè)置為“#009900”；“Line-height”設(shè)置為“140%”。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（3）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”6）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到相應(yīng)的CSS規(guī)則效果。（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”該規(guī)則用來修飾文章的標題，字體為宋體，大小為12pt，顏色代碼為#006600，粗體。1）添加選擇器。選擇“源”窗格中的源<style>，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“.title”。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”2）應(yīng)用CSS規(guī)則。在頁面中選擇文章標題部分，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.title”規(guī)則6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”3）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.title的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12pt”；“Font-weight”設(shè)置為“bold”；“Color”設(shè)置為“#006600”。4）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到相應(yīng)的CSS規(guī)則效果。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.banquan”1）選擇“源”窗格中的源<style>，在“選擇器”窗格中添加“.banquan”選擇器。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.banquan”2）在頁面中選擇文章版權(quán)部分“版權(quán)所有：浪漫電子工作室郵箱：”，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.banquan”規(guī)則。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.banquan”3）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.banquan的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#FFFFFF”。4）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到相應(yīng)的CSS規(guī)則效果。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.biankuang”該CSS規(guī)則用于修飾花圖片所在單元格的右邊框，用于美化網(wǎng)頁。1）選擇“源”窗格中的源<style>，用同樣的方法添加一個“.biankuang”的選擇器6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.biankuang”2）在頁面中選擇左側(cè)花的圖片，此時，狀態(tài)欄中<img>標簽會呈藍色顯示，再選擇<img>標簽左側(cè)的<td>標簽,<td>標簽呈藍色顯示，表示已經(jīng)選中花圖片所在的單元格。3）將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.biankuang”規(guī)則。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.biankuang”4）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.biankuang的CSS規(guī)則定義”對話框。在左側(cè)“分類”列表中選擇“邊框”，“邊框”設(shè)置如圖所示。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.1案例制作：利用類選擇器CSS規(guī)則美化網(wǎng)頁“書法背后的人生”

（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.biankuang”5）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到相應(yīng)的CSS規(guī)則效果。點擊中的“代碼”圖標，切換到代碼視圖，可以看到<head></head>標簽中生成了相應(yīng)代碼，即CSS規(guī)則。（7）設(shè)置網(wǎng)頁屬性1）選擇菜單“修改”→“頁面屬性”命令，打開“頁面屬性”對話框。2）設(shè)置“頁面字體”為“宋體”，大小為12像素，設(shè)置“左邊界”、“右邊界”、“上邊界”、“下邊界”為0像素，如圖6-16所示。按F12預(yù)覽，可以看到網(wǎng)頁效果如圖所示，到此，本實例制作完畢。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用1．什么是CSS

CSS是層疊樣式表（CascadingStyleSheets）的英文縮寫，常稱之為CSS樣式表，是一系列對網(wǎng)頁元素和對象進行控制的規(guī)則，不僅能夠?qū)W(wǎng)頁元素和對象的顯示方式和位置進行控制，而且可以結(jié)合DIV技術(shù)實現(xiàn)網(wǎng)頁布局，目前的版本是CSS3.0。目前CSS技術(shù)在Dreamweaver軟件中得到了非常好地支持，在網(wǎng)頁制作中得到了廣泛的應(yīng)用。技術(shù)優(yōu)勢:

1）可以實現(xiàn)網(wǎng)頁內(nèi)容與形式的分離，加快了網(wǎng)頁的顯示和下載速度。

2）通過對網(wǎng)頁元素的精確控制有利于制作出界面友好、風格統(tǒng)一的網(wǎng)站。

3）一次定義的CSS規(guī)則可以應(yīng)用于多個網(wǎng)頁，乃至整個網(wǎng)站，更加便于網(wǎng)站的維護和管理。

4）CSS樣式表在主流瀏覽器上得到了很好地支持，網(wǎng)頁顯示的差異性很小。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用2．CSS樣式表的基本語法

CSS樣式表由一條或多條CSS規(guī)則組成，CSS規(guī)則由選擇器和聲明兩部分組成，選擇器是用于標識需要定義格式的一些HTML標記，如<p>、<td>、標簽ID以及用戶自定義的類名稱等；聲明可以是一條或多條，CSS規(guī)則的格式如下：選擇器{聲明1;聲明2;...聲明N}每條聲明由一個屬性和一個值組成，每對屬性和值間使用冒號分開，格式如下。聲明{屬性:值}。注意：1）使用花括號來包圍聲明。

2）是否包含空格不會影響CSS規(guī)則在瀏覽器中的顯示效果。

3）在定義CSS規(guī)則時，大小寫不敏感。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

3.

CSS樣式表的存在形式在DreamweaverCC2015中CSS樣式表有三種存在形式，分別為內(nèi)嵌CSS樣式、文檔內(nèi)部CSS樣式表、外部文件CSS樣式表。（1）內(nèi)嵌CSS樣式內(nèi)嵌CSS樣式非常簡單，只需在相應(yīng)的HTML標簽中根據(jù)給出的提示寫入相應(yīng)的CSS屬性和值即可。例如在段落標簽<p>中創(chuàng)建一個樣式，字體為宋體，大小28px，顏色為綠色，代碼如下。

<pstyle="font:'宋體';color:#00FF00;font-size:28px">內(nèi)嵌CSS樣式表</p>由于內(nèi)嵌CSS樣式?jīng)]有實現(xiàn)內(nèi)容與形式的分離，故一般不推薦使用這種樣式表。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

（2）文檔內(nèi)部CSS樣式表文檔內(nèi)部CSS樣式表，創(chuàng)建的CSS樣式表位于網(wǎng)頁的<head></head>標簽內(nèi)，不生成文件，其作用范圍僅限于本網(wǎng)頁。如果用戶定義的規(guī)則只在一個網(wǎng)頁內(nèi)使用，則可以使用文檔內(nèi)部樣式表，例如一個只有.content規(guī)則的樣式表，文字大小為24px，顏色為紅色，代碼如下。

<head>

<styletype="text/css">

.content

{

font-size:24px;

color:#FF0000;

}

</style>

</head>6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

（3）外部文件CSS樣式表該外部文件CSS樣式表是將一系列CSS規(guī)則存放在一個擴展名為“.css”的外部文件中，通過鏈接或?qū)氲姆绞绞蛊淇梢跃W(wǎng)頁中應(yīng)用。這種CSS樣式表可在“CSS設(shè)計器”面板中創(chuàng)建，也可由菜單“文件”→“新建”命令新建一個CSS文件，直接寫入代碼。

它實現(xiàn)了內(nèi)容與形式的分離，便于網(wǎng)站風格的統(tǒng)一，方便網(wǎng)站的維護與管理，使用范圍可以是一個或多個網(wǎng)頁，也可以是整個站點。

網(wǎng)站中其他網(wǎng)頁文件如果要使用這一樣式表，只要鏈接該樣式表文件，然后使用即可。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

4．選擇器的類型在DreamweaverCC2015中CSS樣式表由一條或多條CSS規(guī)則組成，而CSS規(guī)則由選擇器和聲明組成，CSS選擇器有幾十種，在此只介紹常用的幾種。（1）CSS類選擇器

CSS類選擇器由用戶命名，以“.”開頭，可以應(yīng)用于任何HTML標簽。例如一個.content類選擇器，文本大小9pt、顏色#009900、文本左對齊。代碼如下：

.content{

font-size:9pt;

color:#009900;

text-align:left;

}6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用（2）標簽選擇器標簽選擇器是將原有的HTML標簽重新定義，給原有的標簽賦予新的顯示格式，如將<H2>（標題2）標簽的顯示格式重新定義為字體為黑體、大小14px、顏色為#FF0000，代碼如下所示。重新定義后，網(wǎng)頁中所有在<H2></H2>標簽中的文本都由系統(tǒng)默認的格式變?yōu)樽煮w為黑體、大小14px、顏色為#FF0000格式。

h2{

font-family:"黑體";

font-size:14px;

color:#FF0000;

}。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用（3）ID選擇器

ID選擇器以符號“#”開頭，只能應(yīng)用于網(wǎng)頁中的一個元素，如ID選擇器#footer，寬為776px，高為130px，代碼如下所示。該選擇器主要用于布局網(wǎng)頁時與<div>標簽配合使用。這部分內(nèi)容將在后面的章節(jié)中用到。

#footer{

width:776px;

height:130px;

}6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用（4）后代選擇器后代選擇器又稱為包含選擇器，后代選擇器可以選擇作為某標簽后的元素。用戶可以通過定義后代選擇器來創(chuàng)建CSS規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。（5）錨偽類在頁面中超鏈接有四種不同的狀態(tài)：未被訪問狀態(tài)、已訪問狀態(tài)、選定狀態(tài)和鼠標懸停狀態(tài)。錨偽類可以實現(xiàn)不同狀態(tài)的超鏈接以不同的格式顯示，代碼如下。

a:link{color:#FF0000} /*未訪問的超鏈接*/

a:visited{color:#00FF00} /*已訪問的超鏈接*/

a:hover{color:#FF00FF} /*鼠標懸停的超鏈接*/

a:active{color:#0000FF} /*超鏈接被激活的狀態(tài)，即按下鼠標時的超鏈接*/6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

6.CSS設(shè)計器面板“CSS設(shè)計器”面板主要用于實現(xiàn)CSS樣式表的創(chuàng)建、管理和顯示等操作，通過“CSS設(shè)計器”面板，可以方便地實現(xiàn)CSS規(guī)則的創(chuàng)建、編輯、刪除，也可以附加已有的CSS樣式表文件，為用戶管理和使用CSS樣式表提供方便。（1）打開“CSS設(shè)計器”面板的方法按Shift＋F11鍵或點擊菜單“窗口”→“CSS設(shè)計器”命令，可以打開“CSS設(shè)計器”面板，如圖5-18所示。。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

（2）“CSS設(shè)計器”面板的結(jié)構(gòu)

DreamweaverCC2015中的“CSS設(shè)計器”面板較已往的版本有所改進，變得更加方便易用，它共分為四個部分：“源”窗格“@媒體:”窗格“選擇器”窗格“屬性”窗格。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

6.創(chuàng)建CSS樣式表的方法創(chuàng)建CSS樣式表需要先添加源，再添加選擇器，最后為選擇器設(shè)置屬性，如果有多條CSS規(guī)則，則多次添加選擇器，多次設(shè)置屬性，具體步驟如下。

1）添加源。在“CSS設(shè)計器”面板中的“源”窗格點擊圖標，選擇“創(chuàng)建的新CSS文件”或“在頁面中定義”，完成源的添加。

2）添加選擇器。選擇在“源”窗格中創(chuàng)建的源，在“選擇器”窗格中點擊添加選擇器圖標，在出現(xiàn)的文本框中輸入選擇器名稱。

3）設(shè)置屬性。在“選擇器”窗格中選擇添加的選擇器，在“屬性”窗格中相應(yīng)的屬性處添加屬性值。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

7．創(chuàng)建類選擇器CSS規(guī)則一個CSS樣式表一般包含多條CSS規(guī)則，創(chuàng)建CSS樣式表的主要工作就是創(chuàng)建CSS規(guī)則。創(chuàng)建CSS規(guī)則有多種方法，在此介紹兩種可視化創(chuàng)建方法，以創(chuàng)建一條用于修飾文本的類選擇器CSS規(guī)則為例進行介紹，CSS樣式表定義在頁面中，使用類選擇，選擇器名稱為“.content”，字體為仿宋，大小為9pt，顏色代碼為#666666，行高140%。

方法一：屬性窗格法

1）添加源。在“源”窗格中點擊

圖標，如圖5-24所示，選擇“在頁面中定義”命令，在“源”窗格中生成<style>標簽，表示創(chuàng)建源成功。同時，在頁面代碼中的<head></head>標簽中會生成<styletype="text/css"></style>代碼。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

2）添加選擇器。選擇在“源”窗格中創(chuàng)建的源，在“選擇器”窗格中點擊添加選擇器圖標

，輸入選擇器名稱“.content”。

3）設(shè)置屬性。在“選擇器”窗格中選擇“.content”選擇器，在“屬性”窗格中點擊文本

圖標，進行如下設(shè)置。

“font-family”屬性，設(shè)置為“仿宋”；

“font-size”屬性，設(shè)置為“9pt”；

“color”屬性，設(shè)置為“#666666”；

“l(fā)ine-height”屬性，設(shè)置為“140%”；

在“選擇器”窗格中取消

的對勾，顯示已經(jīng)設(shè)置的屬性及值。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

方法二：編輯CSS規(guī)則法

1）添加源。方法與屬性窗格法相同。

2）添加選擇器。方法與屬性窗格法相同。

3）應(yīng)用CSS規(guī)則。在頁面中選擇要應(yīng)用CSS規(guī)則的文本，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇類選擇器規(guī)則“.content”。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

4）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.content的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-size”設(shè)置為“9pt”；“Color”設(shè)置為“#666666”；“Line-height”設(shè)置為“140%”，最后點擊“確定”按鈕。

5）這種方法同樣也會在<head></head>標簽中生成相應(yīng)代碼，即CSS規(guī)則。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

8．類選擇器CSS規(guī)則的應(yīng)用

創(chuàng)建好類選擇器規(guī)則后，就可以在網(wǎng)頁元素上應(yīng)用了，對于類選擇器的CSS規(guī)則，用戶需手動在屬性面板中選擇應(yīng)用。具體方法如下：

法一：在網(wǎng)頁中選擇要應(yīng)用CSS規(guī)則的元素，如一段文本、圖像、單元格或Div層等，

如果“屬性”面板處于HTML屬性狀態(tài)，在“類”中選擇要應(yīng)用的類選擇器規(guī)則即可。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

方法二：如果“屬性”面板處于CSS屬性狀態(tài)，則在“目標規(guī)則”中選擇要應(yīng)用的類選擇器規(guī)則即可。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

9．取消CSS規(guī)則如果是類選擇器規(guī)則不想在某元素上應(yīng)該了，可以選擇該元素，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“刪除類”即可取消原來CSS規(guī)則的應(yīng)用。如果是標簽CSS規(guī)則或錨偽類CSS規(guī)則不想在某元素上應(yīng)該了，用上面的方法是不行的，如果CSS規(guī)則的存在方式是文檔內(nèi)部CSS樣式表，則只有刪除CSS規(guī)則；如果是外部文件CSS樣式表，則可以刪除附加方式，或刪除CSS規(guī)則，注意，刪除CSS規(guī)則可能對其它網(wǎng)頁有影響。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

10．刪除CSS規(guī)則如果某些CSS規(guī)則不再使用了，可以在“選擇器”窗格中選擇某一選擇器，點擊圖標可以將其刪除，注意在此刪除的是CSS規(guī)則代碼。6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用

11.CSS樣式屬性的設(shè)置

CSS樣式的屬性有很多，以上所接觸的屬性只是一小部分，屬性設(shè)置主要在“CSS規(guī)則定義”對話框中進行。由于目前下載使用的商業(yè)模板大量地應(yīng)用了CSS樣式，因此我們將按照類別詳細講述CSS樣式的屬性設(shè)置。

（1）CSS樣式“類型”屬性（2）CSS樣式“背景”屬性（3）CSS樣式“區(qū)塊”屬性（4）CSS樣式“方框”屬性（5）CSS樣式“邊框”屬性（6）CSS樣式“列表”屬性（7）CSS樣式“定位”屬性（8）CSS樣式“擴展”屬性6.1.2新知解析6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”網(wǎng)頁效果如圖所示。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（1）規(guī)劃站點新建文件夾“baiyangdian_lvyou（6.1）”，將素材文件夾中所有文件和文件夾拷貝到“baiyangdian_lvyou（6.1）”文件夾中。（2）定義站點在DreamweaverCC2015中單擊菜單“站點”→“新建站點”命令，通過站點設(shè)置對象新建站點“白洋淀旅游”，將文件夾“baiyangdian_lvyou（6.1）”定義為站點主文件夾。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（3）類選擇器CSS規(guī)則創(chuàng)建與應(yīng)用說明在本網(wǎng)頁中主要創(chuàng)建以下CSS規(guī)則。 類選擇器規(guī)則.content用于美化文章內(nèi)容。 類選擇器規(guī)則.title用于美化文章標題。 類選擇器規(guī)則.copyright用于美化版權(quán)信息。 類選擇器規(guī)則.image設(shè)置圖像邊框、邊界。 類選擇器規(guī)則.input用于美化表單元素。6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”打開網(wǎng)頁文件“chaiputai.html”，創(chuàng)建一個類選擇器規(guī)則用來美化文章內(nèi)容，字體為宋體，大小為12px，顏色代碼為#333333，行高150%。1）添加源。點擊菜單“窗口”→“CSS設(shè)計器”命令，打開“CSS設(shè)計器”面板。在“CSS設(shè)計器”面板“源”窗格中點擊圖標，選擇“創(chuàng)建新的CSS文件”，打開“創(chuàng)建新的CSS文件”對話框。2）新建CSS文件。點擊“瀏覽”按鈕，輸入文件名“css_file”，選擇“others”文件夾，點擊“確定”，將文件保存，“添加為”選擇“鏈接”，點擊“確定”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”3）添加選擇器。選擇在“源”窗格中創(chuàng)建的源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“.content”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”4）應(yīng)用CSS規(guī)則。在頁面中選擇文章內(nèi)容部分，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.content”規(guī)則。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”5）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.content的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#333333”；“Line-height”設(shè)置為“150%”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（4）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.content”6）設(shè)置完成后，單擊“確定”按鈕，按F12預(yù)覽，可以看到文章內(nèi)容應(yīng)用CSS規(guī)則的效果。（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”該規(guī)則用來修飾文章的標題，字體為黑體，大小為18px，顏色為#333333，居中對齊。1）添加選擇器。在“源”窗格中選擇源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“.title”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”2）應(yīng)用CSS規(guī)則。在頁面中選擇文章標題部分，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.title”規(guī)則。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”3）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.title的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“黑體”；將“Font-size”設(shè)置為“18px”；“Color”設(shè)置為“#333333”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”4）在“分類”列表中選擇“區(qū)塊”，“Text-align”設(shè)為“center”，單擊“確定”按鈕。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（5）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.title”5）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到標題應(yīng)用CSS規(guī)則的效果。（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.copyright”該規(guī)則用來修飾文章的版權(quán)部分，字體為宋體，大小為12px，顏色為#FFFFFF，行高140%，居中對齊。1）選擇“源”窗格中的源“css_file.css”，在“選擇器”窗格中添加“.copyright”選擇器。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.copyright”2）在頁面中選擇文章版權(quán)部分“版權(quán)歸浪漫電子工作室更新日期：2011年7月11日”，將“屬性”面板切換至CSS屬性狀態(tài)，在“目標規(guī)則”中選擇“.copyright”規(guī)則。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（6）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.copyright”3）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“.copyright的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#FFFFFF”，“Line-height”設(shè)置為“140%”。在“分類”列表中選擇“區(qū)塊”，“Text-align”設(shè)為“center”，單擊“確定”按鈕。4）設(shè)置完成后單擊“確定”按鈕，按F12預(yù)覽，可以看到版權(quán)應(yīng)用CSS規(guī)則的效果。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（7）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.image”該CSS規(guī)則用于設(shè)置圖像邊框、邊界、填充。1）選擇“源”窗格中的源“css_file.css”，用同樣的方法添加一個“.image”的選擇器。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（7）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.image”2）在“選擇器”窗格中選擇“.image”選擇器，在“屬性”窗格中點擊布局圖標，切換到布局屬性，設(shè)置“padding”為3px，即填充為3px?！癿argin”為6px，即邊界為6px。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（7）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.image”3）在“屬性”窗格中點擊邊框圖標，切換到“邊框”屬性，將“border”中的“width”設(shè)置為1px；“style”設(shè)置為“solid”；“color”設(shè)置為“#339900”，即“樣式”、“寬度”、“顏色”分別為1px、實線、“#339900”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（7）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.image”4）在頁面內(nèi)容中選擇荷花圖片，在“屬性”面板中的“Class”中選擇“image”規(guī)則。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（7）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.image”5）保存，按F12預(yù)覽，可以看到荷花圖片的CSS規(guī)則效果，如圖所示。圖片周圍3px處有一圈1px粗的綠色邊框，圖片與周圍的文字有6px的填充間距。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”該CSS規(guī)則用于美化文本框、密碼框等。1）選擇“源”窗格中的源“css_file.css”，用同樣的方法添加一個“.input”的選擇器。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”2）在“選擇器”窗格中選擇“.input”選擇器，在“屬性”窗格中點擊文本圖標，切換到“文本”屬性，將“font-family”設(shè)置為“宋體”；將“font-size”設(shè)置為“12px”；“color”設(shè)置為“#333333”，“text-align”設(shè)為“center”，即設(shè)置文本居中

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”3）在“屬性”窗格中點擊背景圖標，切換到“背景”屬性，將“background-color”設(shè)置為“#A5DD7F”。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”4）在“屬性”窗格中點擊邊框圖標，切換到“邊框”屬性，將“底部”邊框中的“width”設(shè)置為1px，“style”設(shè)置為“solid”，“color”設(shè)置為“#4BBB00”，其它“項部”、“右側(cè)”、“左側(cè)”邊框“width”設(shè)置為0px。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”5）屬性設(shè)置完成后，分別選中文本框和密碼框，在“屬性”面板的“Class”中選擇“input”規(guī)則。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”6）保存網(wǎng)頁，按F12預(yù)覽，可以看到文本框應(yīng)用CSS規(guī)則后的效果，打開“css_file.css”文件，可以看到一系列CSS規(guī)則代碼。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（8）創(chuàng)建并應(yīng)用類選擇器CSS規(guī)則“.input”7）到此，本實例制作完畢，按F12預(yù)覽，可以看到如圖所示的效果。網(wǎng)頁主體部分距瀏覽器上邊框有部分空白，網(wǎng)頁中部分文字沒有使CSS規(guī)則，而以瀏覽器默認格式顯示。

6.1

類選擇器CSS規(guī)則的創(chuàng)建與應(yīng)用6.1.3

實戰(zhàn)演練：使用類選擇器規(guī)則美化網(wǎng)頁“采蒲臺的葦”（9）設(shè)置網(wǎng)頁屬性為了使網(wǎng)頁得到更好的效果，您也可以繼續(xù)制作。1）選擇菜單“修改”→“頁面屬性”命令，打開“頁面屬性”對話框。2）設(shè)置“頁面字體”為“宋體”，大小為12像素，設(shè)置“左邊界”、“右邊界”、“上邊界”、“下邊界”為0像素。按F12預(yù)覽，可以看到網(wǎng)頁效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁最終效果如圖所示。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（1）規(guī)劃站點新建文件夾“baiyangdian_lvyou（6.2）”，將素材文件夾中所有文件和文件夾拷貝到“baiyangdian_lvyou（6.2）”文件夾中。（2）定義站點在DreamweaverCC2015中，單擊菜單“站點”→“新建站點”命令，通過“站點設(shè)置對象”對話框定義站點，站點名稱為“白洋淀旅游”，本地站點文件夾設(shè)置為baiyangdian_lvyou（6.2）文件夾。打開“chaiputai.html”網(wǎng)頁文件。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（3）在開始制作本案例之前，已經(jīng)創(chuàng)建并應(yīng)用如下類選擇器規(guī)則。

.title類選擇器規(guī)則美化文章標題。

.content類選擇器規(guī)則美化文章內(nèi)容。

.copyright類選擇器規(guī)則美化版權(quán)信息部分。

.image類選擇器規(guī)則設(shè)置圖像邊框、邊界、填充。

.input類選擇器規(guī)則美化表單元素。接下來，我們將創(chuàng)建以下標簽選擇器CSS規(guī)則美化網(wǎng)頁。 創(chuàng)建<td>標簽選擇器規(guī)則美化網(wǎng)中的其它文字。 創(chuàng)建錨偽類CSS規(guī)則美化導(dǎo)航中的超鏈接。 創(chuàng)建<body>標簽選擇器規(guī)則設(shè)置背景與外邊界。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（4）創(chuàng)建<td>標簽選擇器規(guī)則1）添加選擇器。點擊菜單“窗口”→“CSS設(shè)計器”命令，打開“CSS設(shè)計器”面板。選擇“源”窗格中的源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“td”。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（4）創(chuàng)建<td>標簽選擇器規(guī)則2）在“選擇器”窗格中選擇“td”選擇器，在“屬性”窗格中點擊文本圖標，切換到“文本”屬性，將“font-family”設(shè)置為“宋體”、將“font-size”設(shè)置為“12px”、“color”設(shè)置為“#333333”、“l(fā)ine-height”設(shè)置為“140%”。保存網(wǎng)頁，預(yù)覽，可以看到原來沒有應(yīng)用CSS規(guī)則的文字發(fā)生的變化。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（5）創(chuàng)建<body>標簽選擇器規(guī)則1）添加選擇器。選擇“源”窗格中的源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器“body”。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（5）創(chuàng)建<body>標簽選擇器規(guī)則2）在“選擇器”窗格中選擇“body”選擇器，在“屬性”窗格中點擊布局圖標，切換到“布局”屬性。設(shè)置“margin”為0px。3）在“屬性”窗格中點擊背景圖標，切換到“背景”屬性，設(shè)置“background-image”中的“url”為“../images/t1.gif”，即設(shè)置背景圖片為“t1.gif”,也可以點擊其后的文件夾圖標，選擇“t1.gif”圖片；設(shè)置“background-repeat”為，即設(shè)置背景重復(fù)。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（5）創(chuàng)建<body>標簽選擇器規(guī)則4）保存網(wǎng)頁，按F12預(yù)覽，可以看到網(wǎng)頁邊界和背景應(yīng)用CSS規(guī)則后的效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則創(chuàng)建錨偽類CSS規(guī)則是對超鏈接的四種狀態(tài)a:link、a:visited、a:hover和a:active進行設(shè)置。1）添加a:link選擇器。選擇“源”窗格中的源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器“a:link”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則2）在“選擇器”窗格中選擇“a:link”選擇器，選中導(dǎo)航中的文字“首頁”，將“屬性”面板切換至CSS屬性狀態(tài)，可以看到“目標規(guī)則”中顯示“a:link”規(guī)則。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則3）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“a:link的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#333333”；“Text-decoration”設(shè)置為“none”，如圖6-78所示，單擊“確定”按鈕，完成“a:link”錨偽類規(guī)則，可以看到導(dǎo)航部分的文字發(fā)生了變化。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則4）添加a:visited選擇器。選擇“源”窗格中的源“css_file.css”，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器“a:visited”。5）在“選擇器”窗格中選擇“a:visited”選擇器，選中導(dǎo)航中的文字“首頁”，將“屬性”面板切換至CSS屬性狀態(tài)，可以看到“目標規(guī)則”中顯示“a:visited”規(guī)則，如果沒有顯示“a:visited”，則選擇“a:visited”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則6）點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“a:visited的CSS規(guī)則定義”對話框，在左側(cè)“分類”中點擊“類型”，將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#333333”；“Text-decoration”設(shè)置為“none”，單擊“確定”按鈕，完成“a:visited”錨偽類規(guī)則。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則7）用同樣的方法設(shè)置a:hover錨偽類CSS規(guī)則。將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#FF0000”，“Text-decoration”設(shè)置為“underline”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則8）用同樣的方法設(shè)置a:active錨偽類CSS規(guī)則。將“Font-family”設(shè)置為“宋體”；將“Font-size”設(shè)置為“12px”；“Color”設(shè)置為“#FF0000”，“Text-decoration”設(shè)置為“none”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.1利用標簽選擇器規(guī)則與錨偽類規(guī)則美化“采蒲臺的葦”網(wǎng)頁（6）創(chuàng)建錨偽類CSS規(guī)則9）按F12預(yù)覽，可以看到導(dǎo)航部分超鏈接，訪問前的狀態(tài)和訪問后的狀態(tài)呈深灰色，無下劃線；當鼠標移至超鏈接時，超鏈接變紅色，有下劃線；當按下鼠標時，超鏈接依然為紅色，下劃線消失。10）打開“css_file.css”文件，可以看到一系列CSS規(guī)則代碼。到此，本實例制作完畢，預(yù)覽觀看最終效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

1.創(chuàng)建標簽選擇器CSS規(guī)則標簽選擇器CSS規(guī)則用于重新定義HTML中的標簽，如<h1>、<td>、<p>、<body>等，被重新定義過的HTML標簽具有新的顯示格式。在此以<td>標簽選擇器CSS規(guī)則為例進行說明，CSS規(guī)則中字體大小為12px，行高150%，顏色為#333333，操作步驟如下。

1）新建1個2行2列的表格，寬為200px，其余為0px。分別在單元格中輸入古詩名，并設(shè)置在單元格中居中，建立空超鏈接。6.2.2新知解析

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

2）添加源。在“CSS選擇器”面板的“源”窗格中點擊圖標，如圖5-84所示，選擇“創(chuàng)建新的CSS文件”，打開“創(chuàng)建新的CSS文件”對話框，點擊“瀏覽”按鈕，輸入文件名“cssfile”，點擊“確定”按鈕，將文件保存至站點文件夾中，“添加為”選擇“鏈接”，點擊“確定”。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

3）添加選擇器。選擇在“源”窗格中添加的源。在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“td”。

4）創(chuàng)建td選擇器后，標簽選擇器CSS規(guī)則會自動應(yīng)用。將光標定位在單元格中，即定位于<td>標簽中，將“屬性”面板切換至CSS屬性狀態(tài)，“目標規(guī)則”中會出現(xiàn)“td”，點擊“編輯規(guī)則”按鈕，打開“td的CSS規(guī)則定義”對話框。6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

5）在“分類”列表中選擇“類型”，右側(cè)“Font-family”設(shè)置為宋體，“Font-size”為14px，“Line-height”150%，“Color”為“#F40909”，如圖所示。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

6）在“分類”列表中選擇“邊框”，邊框?qū)傩栽O(shè)置共分三個部分，Style（樣式）、Width（寬度）和Color（顏色），取消“Style”下方復(fù)選框中的對勾，“Top”、“Right”和“Left”下拉列表中分別選擇“none”，“Bottom”下拉列表框中選擇“dashed”（虛線）；勾選“Width”下方“全部相同”的復(fù)選框，寬度設(shè)置為1像素；勾選“Color”下方“全部相同”的復(fù)選框，輸入顏色代碼“#003399”，最后點擊“確定”按鈕。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

7）設(shè)置完成后，所有單元格中的文本都會應(yīng)用上面設(shè)置的CSS規(guī)則，按F12預(yù)覽。在“cssfile.css”文件中會生成相應(yīng)的CSS規(guī)則代碼。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

2.標簽選擇器CSS規(guī)則的應(yīng)用由于標簽選擇器CSS規(guī)則是對原有HTML標簽重新定義，故會自動應(yīng)用，無需用戶干預(yù)。

3.創(chuàng)建錨偽類CSS規(guī)則錨偽類CSS規(guī)則主要用于對超鏈接的四種狀態(tài)進行設(shè)置，超鏈接的四種狀態(tài)如下所示。

a:link：未訪問的超鏈接的狀態(tài)。

a:visited：已訪問超鏈接的狀態(tài)。

a:hover：鼠標懸停超鏈接的狀態(tài)。

a:active：超鏈接被激活的狀態(tài)，即按下鼠標時超鏈接的狀態(tài)。6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用在此，以前面的古詩名為例，創(chuàng)建錨偽類CSS規(guī)則，分別對超鏈接四種狀態(tài)的顯示格式進行設(shè)置，操作步驟如下。（1）創(chuàng)建a:link錨偽類CSS規(guī)則

1）選擇“源”窗格中的源“cssfile”，在“選擇器”窗格中添加選擇器，輸入選擇器名稱“a:link”。如圖所示。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

2）添加“a:link”選擇器后，錨偽類CSS規(guī)則會自動應(yīng)用。將光標定位在某古詩名文本中，即定位于<a>標簽中，將“屬性”面板切換至CSS屬性狀態(tài)，“目標規(guī)則”中會出現(xiàn)“a:link”，點擊“編輯規(guī)則”按鈕，打開“a:link的CSS規(guī)則定義”對話框。3）在“分類”列表中選擇“類型”。右側(cè)設(shè)置“Font-family”為宋體，“Font-size”為14像素，“Color”為#993300，“Text-decoration”設(shè)為“none”，如圖所示，單擊“確定”按鈕。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用（2）設(shè)置a:visited錨偽類CSS規(guī)則

同樣的方法，添加“a:visited”選擇器，在“a:visited的CSS規(guī)則定義”對話框中設(shè)置“Font-family”為宋體，“Font-size”為14像素，“Color”為#993300，“Text-decoration”設(shè)為“none”。（3）設(shè)置a:hover錨偽類CSS規(guī)則同樣的方法，添加“a:hover”選擇器，在“a:hover的CSS規(guī)則定義”對話框中設(shè)置“Font-family”為宋體，“Font-size”為14像素，“Color”為#FF0000，“Text-decoration”設(shè)為“underline”。

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用（4）設(shè)置a:active錨偽類CSS規(guī)則同樣的方法，添加“a:active”選擇器，在“a:active的CSS規(guī)則定義”對話框中設(shè)置“Font-family”為宋體，“Font-size”為14像素，“Color”為#FF0000，“Text-decoration”設(shè)為“underline”。（5）創(chuàng)建的上述四種錨偽類CSS規(guī)則，在網(wǎng)頁中的超鏈接會自動應(yīng)用，按F12預(yù)覽，效果如圖5-91所示。在“cssfile.css”文件中會生成相應(yīng)的CSS規(guī)則代碼。

a:link、a:visited錨偽類規(guī)則效果a:hover、a:active錨偽類規(guī)則效果6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用

4.錨偽類CSS規(guī)則的應(yīng)用在網(wǎng)頁中錨偽類CSS規(guī)則會自動應(yīng)用，無需用戶干預(yù)。注意：在CSS規(guī)則中有時會有兩種選擇器結(jié)合使用的情況，例如錨偽類與類選擇器相結(jié)合，例如：

a.nav:link{color:#FF0000}

a.nav:visited{color:#FFFF00}

a.nav:hover{color:#660000}

a.nav:active{color:#FF0000}

6.2.2新知解析6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁

最終制作效果如圖所示6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁

（1）規(guī)劃站點新建文件夾“hongloumeng”，將素材文件夾中所有文件和文件夾拷貝到“hongloumeng”文件夾中。（2）定義站點在DreamweaverCC2015中，單擊菜單“站點”→“新建站點”命令，通過“站點設(shè)置對象”對話框定義站點，站點名稱為“紅樓夢”，本地站點文件夾設(shè)置為hongloumeng文件夾。（3）設(shè)置標題與文章內(nèi)容1）打開hongloumeng.html，選中文章標題“關(guān)于對王國維的《〈紅樓夢〉評論》的學(xué)習和思考”，點擊“屬性”面板中的，將“屬性”面板切換至HTML屬性，在“格式”下拉列表，選擇“標題1”。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（3）設(shè)置標題與文章內(nèi)容2）同樣的方法將文章中的“一寫作背景”、“二版本源流”和“三文本解讀”設(shè)置為“標題2”。3）選擇文章中第一部分內(nèi)容“王國維（1877—1927）……”，查看狀態(tài)欄最右側(cè)的標簽是否為<p>，如果是，則表示文章內(nèi)容已分段；如果不是，則表示文章內(nèi)容沒有分段，可以在第一部分文本后按回車鍵，設(shè)置為段落。依次查看其它部分的文字。6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則1）創(chuàng)建<h1>標簽選擇器CSS規(guī)則將<h1>標簽選擇器規(guī)則設(shè)置為字體為宋體，字體大小為14pt，顏色為#FF3300，行高為2em，文本居中對齊。①添加源。在“CSS選擇器”面板的“源”窗格中點擊圖標，如圖6-94所示，選擇“創(chuàng)建新的CSS文件”，打開“創(chuàng)建新的CSS文件”對話框，點擊“瀏覽”按鈕，輸入文件名“cssfile”，選擇文件夾“other”，點擊“確定”，將文件保存至“other”文件夾，“添加為”選擇“鏈接”，點擊“確定”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則1）創(chuàng)建<h1>標簽選擇器CSS規(guī)則②添加選擇器。選擇“源”窗格中的源“cssfile.css”，如圖所示，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器名稱“h1”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則1）創(chuàng)建<h1>標簽選擇器CSS規(guī)則③將光標定位在文章標題“關(guān)于對王國維的…”中，即定位于標簽<h1></h1>中，將“屬性”面板切換至CSS屬性狀態(tài)，“目標規(guī)則”中會出現(xiàn)“h1”，點擊“編輯規(guī)則”按鈕，打開“h1的CSS規(guī)則定義”對話框。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則1）創(chuàng)建<h1>標簽選擇器CSS規(guī)則④在“分類”列表中選擇“類型”，將“Font-family”設(shè)置為宋體，“Font-size”設(shè)置為14pt，“Color”設(shè)置為“#FF3300”，“Line-height”設(shè)置2em，如圖所示。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則1）創(chuàng)建<h1>標簽選擇器CSS規(guī)則⑤在“分類”列表中選擇“區(qū)塊”，將“Text-align”設(shè)置為center，即文本水平居中，如圖所示,點擊“確定”按鈕，可以看到標題應(yīng)用了<h1>標簽選擇器CSS規(guī)則的效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則2）創(chuàng)建<h2>標簽選擇器CSS規(guī)則將<h2>標簽選擇器規(guī)則設(shè)置為字體為宋體，字體大小為10pt，顏色為#CC3300，行高為2em，文本縮進為2ems。①同樣的方法創(chuàng)建<h2>標簽選擇器CSS規(guī)則，打開“h2的CSS規(guī)則定義”對話框。在“分類”列表中選擇“類型”，將“Font-family”設(shè)置為宋體，“Font-size”設(shè)置為10pt，“Color”設(shè)置為“#CC3300”，“Line-height”設(shè)置為2em，如圖所示。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則2）創(chuàng)建<h2>標簽選擇器CSS規(guī)則①

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則2）創(chuàng)建<h2>標簽選擇器CSS規(guī)則②在“區(qū)塊”分類中設(shè)置“Text-indent”為2ems，即文本縮進為2ems，如圖所示。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則2）創(chuàng)建<h2>標簽選擇器CSS規(guī)則③在“方框”分類中設(shè)置“margin”中“全部相同”復(fù)選框為勾選狀態(tài)，“Top”為0px，即邊界全部為0px，如圖所示，設(shè)置完成后單擊“確定”按鈕，可以看到內(nèi)容中的標題應(yīng)用了<h2>標簽選擇器CSS規(guī)則的效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則3）創(chuàng)建<p>標簽選擇器CSS規(guī)則將<p>標簽選擇器規(guī)則設(shè)置為字體為宋體，字體大小為13px，顏色為#FF3300，行高為140%，文本縮進為2ems，邊界為0px。①同樣的方法創(chuàng)建<p>標簽選擇器CSS規(guī)則，將光標定位于文章中的內(nèi)容，即定位于標簽<p>中，“屬性”面板的“目標規(guī)則”中會出現(xiàn)“p”，點擊“編輯規(guī)則”按鈕，打開“p的CSS規(guī)則定義”對話框。②在“分類”列表中選擇“類型”，將“Font-family”設(shè)置為宋體，“Font-size”設(shè)置為13px，“Color”設(shè)置為“#FF3300”，“Line-height”設(shè)置為140%。③在“區(qū)塊”分類中設(shè)置“Text-indent”為2ems，即文本縮進為2ems。④在“方框”分類中設(shè)置“margin”中“全部相同”復(fù)選框為勾選狀態(tài)，“Top”為0px，即邊界全部為0px，設(shè)置完成后單擊“確定”按鈕，可以看到內(nèi)容中文本應(yīng)用了<p>標簽選擇器CSS規(guī)則的效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（4）創(chuàng)建標簽選擇器CSS規(guī)則4）創(chuàng)建<body>標簽選擇器CSS規(guī)則創(chuàng)建<body>標簽選擇器CSS規(guī)則，“背景顏色”為“#993300”,“邊界”為0px。①同樣的方法創(chuàng)建<body>標簽選擇器CSS規(guī)則，將光標定位網(wǎng)頁中，點擊最左側(cè)的標簽，即定位于標簽<body>中，將“屬性”面板的“目標規(guī)則”中會出現(xiàn)“body”，點擊“編輯規(guī)則”按鈕，打開“body的CSS規(guī)則定義”對話框。②在“分類”列表中選擇“背景”，將“Background-color”設(shè)置為#993300。③在“分類”列表中選擇“方框”，設(shè)置“margin”中“全部相同”復(fù)選框為勾選狀態(tài)，“Top”為0px，即邊界全部為0px，設(shè)置完成后單擊“確定”按鈕，網(wǎng)頁應(yīng)用了<body>標簽選擇器CSS規(guī)則的效果。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（5）創(chuàng)建錨偽類CSS規(guī)則1）創(chuàng)建錨偽類CSS規(guī)則用于修飾網(wǎng)頁中的導(dǎo)航①添加a:link選擇器。選擇“源”窗格中的源“cssfile.css，在“選擇器”窗格中點擊添加選擇器圖標，輸入選擇器“a:link”。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（5）創(chuàng)建錨偽類CSS規(guī)則1）創(chuàng)建錨偽類CSS規(guī)則用于修飾網(wǎng)頁中的導(dǎo)航②選中導(dǎo)航項文字“網(wǎng)站首頁”，將“屬性”面板切換至CSS屬性狀態(tài)，可以看到“目標規(guī)則”中顯示“a:link”規(guī)則。

6.2

標簽選擇器規(guī)則和錨偽類規(guī)則的創(chuàng)建與應(yīng)用6.2.3實戰(zhàn)演練：使用標簽選擇器規(guī)則與錨偽類規(guī)則美化網(wǎng)頁（5）創(chuàng)建錨偽類CSS規(guī)則1）創(chuàng)建錨偽類CSS規(guī)則用于修飾網(wǎng)頁中的導(dǎo)航③點擊“屬性”面板中的“編輯規(guī)則”按鈕，打開“a:link的CSS規(guī)則定義”對話框，在左側(cè)的“類型”中，將“Font-family”設(shè)置為“