第7章網(wǎng)頁表現(xiàn)語言-CSS

網(wǎng)頁設(shè)計與制作教程

(第4版）CSS簡介CSS樣式面板創(chuàng)建并使用內(nèi)部樣式表創(chuàng)建并使用外部CSS樣式第7章網(wǎng)頁表現(xiàn)語言——CSS

7.1.1CSS的特點和用途

CSS是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計者能夠以更有效的方式設(shè)置網(wǎng)頁格式。CSS樣式表是由一系列樣式選擇器和CSS屬性組成的，它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩浴⒘斜韺傩约熬_定位網(wǎng)頁元素等屬性，從而大大增強(qiáng)了網(wǎng)頁的格式化能力。

7.1CSS簡介網(wǎng)頁設(shè)計最初是使用HTML標(biāo)記來定義頁面文檔及格式，如標(biāo)題、段落、表格等，但這些標(biāo)記不能滿足更多的文檔樣式需求，為了解決這個問題，誕生了一種CSS(CascadingStyleSheet，層疊樣式表)的技術(shù)。樣式就是格式，在網(wǎng)頁中，如文字的大小、色彩以及圖片位置等，都是設(shè)置顯示內(nèi)容的樣式。層疊是指當(dāng)在HTML文檔中引用多個定義樣式的樣式文件時，若多個樣式文件間所定義的樣式發(fā)生沖突，將根據(jù)層次順序處理。

在一個頁面中頻繁地更替文本的顏色和大小，最終生成的HTML代碼的長度將臃腫不堪。如果它出現(xiàn)在多個頁面中，逐一修改更是困難。除設(shè)置文本格式外，還可以使用CSS控制Web頁面中塊級元素的格式和定位。如h1、p、div標(biāo)記?？梢栽O(shè)置塊級元素執(zhí)行以下操作：（1）設(shè)置塊級元素的邊距和邊框（2）將塊級元素放置在特定的位置（3）為塊級元素添加背景顏色（4）在塊級元素周圍設(shè)置浮動文本對塊級元素進(jìn)行操作的方法實際上就是使用CSS進(jìn)行頁面布局設(shè)置的方法。CSS的出現(xiàn)簡化了這樣的工作，CSS是通過對頁面結(jié)構(gòu)的風(fēng)格控制的思想，控制整個頁面的風(fēng)格的。當(dāng)需要更改這些頁面的樣式設(shè)置時，只要在樣式表中進(jìn)行修改，而不用對每個頁面逐個修改，從而大大簡化了格式化工作。

7.1.2CSS規(guī)則

CSS樣式設(shè)置規(guī)則由選擇符和聲明兩部分組成。選擇符是標(biāo)識已設(shè)置格式元素的術(shù)語，一種有五種類型（如下所示）；而聲明則用于定義樣式屬性。聲明由屬性和值兩部分組成。（1）標(biāo)簽選擇符（2）類選擇符（3）ID選擇符（4）偽類（5）關(guān)聯(lián)選擇符7.1CSS簡介（1）標(biāo)簽選擇符任何HTML元素都可以是一個CSS的標(biāo)記選擇符，標(biāo)記選擇符僅僅是指向特別樣式的元素，在“添加樣式規(guī)則”對話框的“元素”下拉列表中提供了所有可供使用的標(biāo)記選擇符。（2）類選擇符類選擇符的可以與標(biāo)記選擇符無關(guān)，這樣，類選擇符可以應(yīng)用于任何元素。這種定義類選擇符的形式如下：.類名{樣式屬性1：值1；樣式屬性2：值2；……}

（3）ID選擇符ID選擇符用于定義每個具體元素的樣式。指定一個ID選擇符要在名字前添加指示符#。使用時通過指定元素的id屬性來關(guān)聯(lián)。例如：#index{color:blue}引用時，使用id屬性聲明即可。例如：<pid="index">本段落的顏色為藍(lán)色</p>（4）偽類偽類是CSS中非常特殊的類，能自動被支持CSS的瀏覽器所識別。偽類可以指定HTML中的A元素以不同的方式顯示鏈接、已訪問過的鏈接和可激活的鏈接。其中，一個已訪問鏈接可以定義為以不同顏色顯示，甚至以不同字體大小和風(fēng)格顯示。CSS中用4個偽類來定義鏈接的樣式，分別是a:link、a:visited、a:hover和a:active。（5）關(guān)聯(lián)選擇符關(guān)聯(lián)選擇符是一個用空格隔開的由兩個或更多的單一標(biāo)記選擇符組成的字符串，一般格式如下：選擇符1選擇符2……{屬性：值；……}這些選擇符具有層次關(guān)系，并且它們的優(yōu)先級比單一的標(biāo)記選擇符大。例如：ph1{color:red}樣式由一組規(guī)則定義并存放在與要設(shè)置格式的實際文本分離的位置（通常在外部樣式表或HTML文檔的文件頭部分中）。因此，可以將h1標(biāo)簽的某個規(guī)則一次應(yīng)用于多個標(biāo)簽（如果在外部樣式表中，則可以將此規(guī)則一次應(yīng)用于多個不同頁面上的標(biāo)簽）。通過這種方式，CSS可提供非常便利的更新功能。如果用戶在一個位置更新CSS規(guī)則，使用已定義樣式的所有元素的格式設(shè)置將自動更新為新樣式。

7.1.3CSS常用屬性用戶可以定義CSS規(guī)則的屬性，如文本字體、背景圖像和顏色、間距和布局屬性以及列表元素外觀。首先創(chuàng)建新規(guī)則，然后定義下列任意屬性。1．定義CSS類型屬性2．定義CSS樣式背景屬性3．定義CSS樣式區(qū)塊屬性4．定義CSS樣式方框?qū)傩?．定義CSS樣式邊框?qū)傩?．定義CSS樣式列表屬性7．定義CSS樣式定位屬性8．定義CSS樣式擴(kuò)展屬性7.1CSS簡介

1．CSS樣式面板視圖在“全部”模式和“正在”模式下，CSS樣式面板都允許用戶在屬性窗格中改變3種視圖狀態(tài)。類別視圖：將Dreamweaver支持的CSS屬性分為八個類別：字體、背景、區(qū)塊、邊框、方框、列表、定位和擴(kuò)展名。每個類別的屬性都包含在一個列表中，用戶可以單擊類別名稱旁邊的加號按鈕展開或折疊它。列表視圖：按照字母順序顯示Dreamweaver支持的所有CSS屬性。屬性視圖：為默認(rèn)視圖，僅顯示那些已進(jìn)行設(shè)置的屬性。7.2CSS樣式面板

2．CSS樣式面板按鈕在“全部”模式和“正在”模式下，CSS樣式面板還包含4個按鈕。附加：附加鏈接到或?qū)氲疆?dāng)前文檔中的外部樣式表。新建：新建CSS規(guī)則，用戶可以選擇要創(chuàng)建的樣式類型。編輯：編輯當(dāng)前文檔或外部樣式表中的樣式。刪除：刪除CSS樣式面板中選定的規(guī)則或?qū)傩裕乃鶓?yīng)用的所有元素中刪除格式設(shè)置。7.2CSS樣式面板

7.3.1創(chuàng)建自定義樣式創(chuàng)建自定義樣式的方法如下：將插入點放在文檔中，然后執(zhí)行以下操作之一：執(zhí)行“格式”→“CSS樣式”→“新建”命令。在CSS樣式面板中，單擊面板右下側(cè)的“新建CSS規(guī)則”按鈕。在文檔窗口中選擇文本，從屬性面板的“目標(biāo)規(guī)則”彈出菜單中選擇“新CSS規(guī)則”，然后單擊“編輯規(guī)則”按鈕。7.3創(chuàng)建并使用內(nèi)部樣式表

7.3.2創(chuàng)建僅應(yīng)用于一個HTML元素的樣式創(chuàng)建僅應(yīng)用于一個HTML元素的樣式的方法如下：①打開“新建CSS規(guī)則”對話框。②在“新建CSS規(guī)則”對話框中，指定要創(chuàng)建的CSS規(guī)則的“選擇器類型”為“ID（僅應(yīng)用于一個HTML元素）”，然后在“選擇器名稱”文本框中輸入ID名稱，例如，#myhead1。7.3創(chuàng)建并使用內(nèi)部樣式表

7.3.3創(chuàng)建重定義HTML標(biāo)簽樣式創(chuàng)建重定義HTML標(biāo)簽樣式的方法如下：①打開“新建CSS規(guī)則”對話框。②在“新建CSS規(guī)則”對話框中，指定要創(chuàng)建的CSS規(guī)則的“選擇器類型”為“標(biāo)簽（重新定義HTML元素）”，然后在“選擇器名稱”文本框中輸入或從下拉列表中選擇HTML元素的名稱，例如，h1，如圖7-18所示。③選擇定義規(guī)則的位置。7.3創(chuàng)建并使用內(nèi)部樣式表

7.3.4創(chuàng)建鏈接樣式創(chuàng)建重定義HTML標(biāo)簽樣式的方法如下：①打開“新建CSS規(guī)則”對話框。②在“新建CSS規(guī)則”對話框中，指定要創(chuàng)建的CSS規(guī)則的“選擇器類型”為“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，然后在“選擇器名稱”文本框中輸入或從下拉列表中選擇超鏈接狀態(tài)的名稱，例如，a:link，如圖7-19所示。③選擇定義規(guī)則的位置。④單擊“確定”按鈕，完成樣式屬性的設(shè)置。7.3創(chuàng)建并使用內(nèi)部樣式表

7.3.5樣式的應(yīng)用①在文檔窗口中，選擇要應(yīng)用CSS樣式的對象。②執(zhí)行下列操作之一：在CSS樣式面板中，選擇“全部”模式，右鍵單擊要應(yīng)用的樣式的名稱，然后從彈出菜單中選擇“套用”，如圖7-20所示。從“類”彈出菜單中選擇要應(yīng)用的類樣式。在文檔窗口中，右鍵單擊所選對象，從彈出菜單中選擇“CSS樣式”，然后選擇要應(yīng)用的樣式。執(zhí)行“格式”→“CSS樣式”命令，然后在子菜單中選擇要應(yīng)用的樣式。7.3創(chuàng)建并使用內(nèi)部樣式表

7.4.1創(chuàng)建外部樣式文件創(chuàng)建外部樣式文件的方法如下：①打開“新建CSS規(guī)則”對話框。②在“新建CSS規(guī)則”對話框中，指定要創(chuàng)建的CSS規(guī)則的選擇器類型，輸入或選擇選擇器的名稱。③選擇定義規(guī)則的位置為“（新建樣式表文件）”，如圖7-28