CSS語法

CSS 語法由三部分構成：選擇器、屬性和值。selector {property: value}選擇器 (selector) 通常是你希望定義的 HTML 元素或標籤，屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration）：body {color: blue}上面這行代碼的作用是將 body 元素內的文字顏色定義為藍色。在上述例子中，body 是選擇器，而包括在花括弧內的的部分是聲明。聲明依次由兩部分構成：屬性和值，color 為屬性，blue 為值。

基本介紹

• 中文名：層疊樣式表
• 外文名：Cascading Style Sheets
• 外語縮寫：css
• 其他稱呼：級聯樣式表

值的不同寫法和單位

除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：p { color: #ff0000; }

為了節約位元組，我們可以使用 CSS 的縮寫形式：p { color: #f00; }

我們還可以通過兩種方法使用 RGB 值：

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位，因為 0 就是 0，無論單位是什麼。

記得寫引號

提示：如果值為若干單詞，則要給值加引號：

p {font-family: "sans serif";}

多重聲明

提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最後一條規則是不需要加分號的，因為分號在英語中是一個分隔設定號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這么的好處是，當你從現有的規則中增減聲明時，會儘可能的減少出錯的可能性。就像這樣：

p {text-align:center; color:red;} 你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：

p {

text-align: center;

color: black;

font-family: arial;

}

空格和大小寫

大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：

body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; }是否包含空格不會影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

選擇器的分組

你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6 { color: green; }

繼承及其問題

根據 CSS，子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：

body { font-family: Verdana, sans-serif; }根據上面這條規則，站點的 body 元素將使用 Verdana 字型（假如訪問者的系統中存在該字型的話）。

通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul,li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana字型，子元素的子元素也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。

但是在那個瀏覽器大戰的血腥年代裡，這種情況就未必會發生，那時候對標準的支持並不是企業的優先選擇。比方說，Netscape 4就不支持繼承，它不僅忽略繼承，而且也忽略套用於 body 元素的規則。IE/Windows 直到 IE6還存在相關的問題，在表格內的字型樣式會被忽略。我們又該如何是好呢？

友善地對待Netscape 4

幸運地是，你可以通過使用我們稱為 "Be Kind to Netscape 4" 的冗餘法則來處理舊式瀏覽器無法理解繼承的問題。

body { font-family: Verdana, sans-serif; }p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; }4.0 瀏覽器無法理解繼承，不過他們可以理解組選擇器。這么做雖然會浪費一些用戶的頻寬，但是如果需要對 Netscape 4 用戶進行支持，就不得不這么做。

繼承是一個詛咒嗎

如果你不希望 "Verdana, sans-serif" 字型被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字型是 Times。沒問題。創建一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：

body { font-family: Verdana, sans-serif; }td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; }p { font-family: Times, "Times New Roman", serif;

派生選擇器

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。

在 CSS1 中，通過這種方式來套用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關係來套用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

派生選擇器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。

比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong { font-style: italic; font-weight: normal; }請注意標記為 <strong> 的藍色代碼的上下文關係：

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。

再看看下面的 CSS 規則：

strong { color: red; }h2 { color: red; }h2 strong { color: blue; }下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p><h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}#green {color:green;}下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p><p id="green">這個段落是綠色。</p>注意：id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎，請參閱 XHTML:網站重構。

id 選擇器和派生選擇器

在現代布局中，id 選擇器常常用於建立派生選擇器。

#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }上面的樣式只會套用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div或者是表格單元，儘管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 <em></em> 或者<span></span>，不過這樣的用法是非法的，因為不可以在內聯元素 <span> 中嵌入<p> （如果你忘記了原因，請參閱 XHTML:網站重構）。

一個選擇器，多種用法

即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：

#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }#sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。

單獨的選擇器

id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用：

#sidebar { border: 1px dotted #000; padding: 10px; }根據這條規則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀框線，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。老版本的 Windows/IE 瀏覽器可能會忽略這條規則，除非你特別地定義這個選擇器所屬的元素：

div#sidebar { border: 1px dotted #000; padding: 10px; }

在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td { color: #f60; background: #666; }在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基於它們的類而被選擇：

td.fancy { color: #f60; background: #666; }在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為fancy 的類的單元格不會受這條規則的影響。還有一點值得注意，class 為 fancy的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的表格單元（即使用 td 元素來選擇fancy 類）。

如何插入樣式表

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：

外部樣式表

當樣式需要套用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部：

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>瀏覽器會從檔案 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。

外部樣式表可以在任何文本編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表檔案的例子：

hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:

<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>

內聯樣式

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上套用一次時。

要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3 { color: red; text-align: left; font-size: 8pt; }而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3 { text-align: right; font-size: 20pt; }假如擁有內部樣式表的這個頁面同時與外部樣式表連結，那么 h3 得到的樣式是：

color: red; text-align: right; font-size: 20pt;即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。

CSS 允許套用純色作為背景，也允許使用背景圖像創建相當複雜的效果。

CSS 在這方面的能力遠遠在 HTML 之上。

背景色

可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。

這條規則把元素的背景設定為灰色：

p {background-color: gray;}如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：

p {background-color: gray; padding: 20px;}可以為所有元素設定背景色，這包括 body 一直到 em 和 a 等行內元素。

background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。

背景圖像

要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設定一個背景圖像，必須為這個屬性設定一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}大多數背景都套用到 body 元素，不過並不僅限於此。

下面例子為一個段落套用了一個背景，而不會對文檔的其他部分套用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}您甚至可以為行內元素設定背景圖像，下面的例子為一個連結設定了背景圖像：

a.radio {background-image: url(/i/eg_bg_07.gif);}理論上講，甚至可以向 textareas 和 select 等替換元素的背景套用圖像，不過並不是所有用戶代理都能很好地處理這種情況。

另外還要補充一點，background-image 也不能繼承。事實上，所有背景屬性都不能繼承。

背景重複

如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重複，no-repeat 則不允許圖像在任何方向上平鋪。

默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：

body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }背景定位

可以利用 background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置：

body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。

根據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對象垂直方向。

如果只出現一個關鍵字，則認為另一個關鍵字是 center。

所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：

p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }下面是等價的位置關鍵字：

單一關鍵字	等價的關鍵字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分數值

百分數值的表現方式更為複雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：

body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時套用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

如果圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：

body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。

background-position的默認值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什麼總是從元素內邊距區的左上角開始平鋪，除非您設定了不同的位置值。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。

比如，如果設定值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }注意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

背景關聯

如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：

body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。