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

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

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

7.1.1CSS的特點和用途

CSS是一種格式化網(wǎng)頁的標準方式，它擴展了HTML的功能，使網(wǎng)頁設計者能夠以更有效的方式設置網(wǎng)頁格式。CSS樣式表是由一系列樣式選擇器和CSS屬性組成的，它支持字體屬性、顏色和背景屬性、文本屬性、邊框屬性、列表屬性及精確定位網(wǎng)頁元素等屬性，從而大大增強了網(wǎng)頁的格式化能力。

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

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

7.1.2CSS規(guī)則

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

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

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

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

2．CSS樣式面板按鈕在“全部”模式和“正在”模式下，CSS樣式面板還包含4個按鈕。附加：附加鏈接到或導入到當前文檔中的外部樣式表。新建：新建CSS規(guī)則，用戶可以選擇要創(chuàng)建的樣式類型。編輯：編輯當前文檔或外部樣式表中的樣式。刪除：刪除CSS樣式面板中選定的規(guī)則或屬性，并從它所應用的所有元素中刪除格式設置。7.2CSS樣式面板

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

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

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

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

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

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