（基礎）為文件新增樣式的三種方法

李鬆峰發表於2012-11-10

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第1章。

為文件新增樣式的三種方法

有三種方法可以把CSS新增到網頁中，分別是寫在元素標籤裡（也叫行內樣式）、寫在<style>標籤裡（也叫嵌入樣式）和寫在單獨的CSS樣式表中（也叫連結樣式）。

行內樣式

行內樣式是寫在特定HTML標籤的style屬性裡的，比如：

<p>This paragraph simply takes on the browser's default paragraph style.</p>
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>

行內樣式的作用範圍非常有限。行內樣式只能影響它所在的標籤，而且總會覆蓋嵌入樣式和連結樣式。

嵌入樣式

嵌入的CSS樣式是放在HTML文件的head元素中的，比如：

<head>
    <!-- 其他head元素（如meta、title）放在這裡 -->
    <style type="text/css">
        h1 {font-size:16px;}
        p {color:blue;}
    </style>
</head>

嵌入樣式的應用範圍僅限於當前頁面。頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋。像本書前面例子中那樣使用嵌入方式為某個元件（比如選單）設計樣式是很方便的，因為HTML和CSS同在一頁，可以互相參照。但是，等到CSS樣式設計完畢，元件功能齊備之後，還是應該把相應的樣式轉移到外部樣式表，以便其他頁面也能共用相同的樣式。

連結樣式

在建立包含多個頁面的網站時，需要把樣式集中在一個單獨的檔案裡，這個檔案就叫樣式表。樣式表其實就是一個副檔名為.css的文字檔案。可以在任意多個HTML頁面中連結同一個樣式表檔案，每個頁面中只需加入類似下面的這一行程式碼即可：

<link href="styles.css" rel="stylesheet" type="text/css" />

連結樣式的作用範圍可以是整個網站。只要使用<link>標籤把樣式錶連結到每個頁面，相應的頁面就可以使用其中的樣式。隨後，只要修改了樣式表中的樣式，改動就會在所有被選中的元素上體現出來，無論這個元素在哪個頁面裡。這樣，既可以做到全站頁面外觀統一，又便於整站樣式更新。

除了以上三種為頁面新增樣式的方法，還有一種在樣式表中連結其他樣式表的方法，那就應用@import指令（是一種at規則）：

@import url(css/styles2.css)

要注意的是，@import指令必須出現在樣式表中其他樣式之前，否則@import引用的樣式表不會被載入。

相關文章