长江浮鱼王捕鱼机

2.3 CSS的基本用法

將CSS應用到HTML之中，首先要選擇合適的選擇符，選擇符是CSS控制HTML文檔中對象的一種方式，用來告訴瀏覽器這段樣式將應用到哪個對象。

在HTML內插入的樣式表可分為3種，分別是內聯樣式表、嵌入樣式表和外部樣式表。在應用時可以根據需要任意應用以上3種樣式表，越接近目標的樣式定義優先權越高，高優先權樣式將繼承低優先權樣式的未重疊定義并覆蓋重疊的定義。

（1）內聯樣式表：直接將CSS代碼寫在HTML標簽中。

（2）嵌入樣式表：將<style>標簽嵌入HTML文檔的頭部。

（3）外部樣式表：以.css為擴展名，在<head>標簽中使用<link>標簽，從而將外部CSS文件鏈接到HTML文檔內。

內聯樣式表是指直接將CSS代碼寫在HTML標簽中，其格式如下：

內聯樣式表由HTML文檔中的元素的style屬性支持，只需要將CSS代碼用分號隔開并輸入在style=" "中，便可以完成對當前標簽的樣式定義。這是CSS定義的一種基本形式。

內聯樣式表僅是HTML標簽對于style屬性的支持所產生的一種CSS編寫方式，并不符合表現與內容分離的設計模式，使用內聯樣式表與表格式布局從代碼結構上來說完全相同，僅利用了CSS對于元素的精確控制優勢，并沒有很好地實現表現與內容的分離，所以這種書寫方式應當盡量少用。

嵌入樣式表又稱為內部樣式表，是將CSS統一放置在頁面中一個固定的位置。

技能案例：設置嵌入樣式

源文件：源文件\第2章\2-3-2.html

新建一個HTML文檔，在代碼頁面輸入代碼如下：

內部樣式表是指將<style>標簽作為一個單獨的部分標記在<head></head>之間。

內部樣式表是CSS的初級應用形式，它只針對當前頁面有效，不能跨頁面執行，因此達不到CSS代碼多用的目的，在實際的大型網站開發中，很少用到內部樣式表。

外部樣式表是CSS中較為理想的一種形式。將CSS代碼單獨編寫在一個獨立文件之中，由網頁進行調用，多個網頁可以調用同一個外部樣式表文件，因此能夠實現代碼的最大化使用及網站文件的最優化配置，其格式如下：

在上面的HTML代碼中，在<head>標簽中使用<link>標簽，可以將link指定為樣式表方式，并使用href="style.css"指明外部樣式表文件的路徑，只需將樣式單獨編寫在style.css文件中即可。

在頁面中應用CSS主要是為了實現良好的網站文件管理及樣式管理，分離式的結構有助于合理分配表現與內容。

提示

推薦使用外部樣式表，其優點如下：

（1）獨立于HTML文檔，便于修改。

（2）多個文件可以引用同一個樣式表文件。

（3）樣式表文件只需要下載一次，就可以在其他鏈接了該文件的頁面內使用。

（4）瀏覽器會先顯示HTML內容，再根據樣式表文件進行渲染，從而使訪問者可以更快地看到內容。