學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp

關(guān)于CSS3 http://www.itdecent.cn/p/890ab5c22f13

CSS：層疊樣式表 (CascadingStyleSheets)，編寫CSS是為了解決內(nèi)容（HTML）與表現(xiàn)（CSS）分離的問題。

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表。

當(dāng)同一個 HTML 元素被不止一個樣式定義時，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中內(nèi)聯(lián)樣式擁有最高的優(yōu)先權(quán)。

- 瀏覽器缺省設(shè)置

- 外部樣式表

- 內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部）

- 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

外部樣式表：<link rel="stylesheet" type="text/css" href="mystyle.css">

內(nèi)部樣式表：<style type="text/css">....</style>

內(nèi)聯(lián)樣式：<p style="....">this is paragraph</p>

由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。

CSS 語法

CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器（需要改變樣式的 HTML 元素），以及一條或多條聲明（由一個屬性和一個值組成）。

selector {declaration1; declaration2; ... declarationN }

屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

selector {property: value}

比如：h1 {color: red/#f00/rgb(255,0,0)/rgb(100%,0%,0%); font-size: 14px; font-family: "sans serif";}

CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

PS：

p{margin: 5px 6px 7px 8px} //對應(yīng)的分別是上、右、下、左

p{margin: 5px 6px 7px} //對應(yīng)的分別是上、左右、下

p{margin: 5px 6px} ?//對應(yīng)的分別是上下、左右

p{margin: 5px} //上下左右

樣式書寫規(guī)范：

- 開括號與選擇器位于同一行

- 在開括號之前用一個空格

- 使用兩個字符的縮進(jìn)

- 在每個屬性與其值之間使用冒號加一個空格

- 在每個逗號或分號之后使用空格

- 在每個屬性值對（包括最后一個）之后使用分號

- 只在值包含空格時使用引號來包圍值

- 把閉括號放在新的一行，之前不用空格

- 避免每行超過 80 個字符

注釋：在逗號或分號之后添加空格，是所有書寫類型的通用規(guī)則。

如：

短規(guī)則

p.into {font-family: "Verdana"; font-size: 16em;}

長規(guī)則

body {

? background-color: lightgrey;

? font-family: "Arial Black", Helvetica, sans-serif;

? font-size: 16em;

? color: black;

}

選擇器的分組

被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。

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

繼承及其問題

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

body {

font-family: Verdana, sans-serif;

}

根據(jù)上面這條規(guī)則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統(tǒng)中存在該字體的話）。

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

但是在那個瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會發(fā)生，那時候?qū)?biāo)準(zhǔn)的支持并不是企業(yè)的優(yōu)先選擇。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應(yīng)用于 body 元素的規(guī)則。IE/Windows 直到 IE6 還存在相關(guān)的問題，在表格內(nèi)的字體樣式會被忽略。我們又該如何是好呢？

友善地對待Netscape 4

幸運(yùn)地是，你可以通過使用我們稱為 "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 瀏覽器無法理解繼承，不過他們可以理解組選擇器。這么做雖然會浪費(fèi)一些用戶的帶寬，但是如果需要對 Netscape 4 用戶進(jìn)行支持，就不得不這么做。

繼承是一個詛咒嗎？

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

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;

}

CSS選擇器。

元素選擇器，選擇器分組，派生選擇器，id選擇器，類選擇器，屬性選擇器，偽類，偽元素，后代選擇器，子元素選擇器，相鄰兄弟選擇器……

可以多種選擇器結(jié)合使用。

元素選擇器（文檔的元素就是最基本的選擇器。）

給某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身設(shè)置樣式：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

元素選擇器又稱為類型選擇器（type selector）。

“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”

選擇器分組，

假設(shè)希望 h2 元素和段落都有灰色。為達(dá)到這個目的，最容易的做法是使用以下聲明：

h2, p {color:gray;}

提示：通過分組，創(chuàng)作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

通配符選擇器（*）該選擇器可以與任何元素匹配

例如，下面的規(guī)則可以使文檔中的每個元素都為紅色：

* {color:red;}

聲明分組

假設(shè)您希望所有 h1 元素都有紅色背景，并使用 28 像素高的 Verdana 字體顯示為藍(lán)色文本，可以寫以下樣式：

h1 {font: 28px Verdana;}

h1 {color: blue;}

h1 {background: red;}

但是上面這種做法的效率并不高。尤其是當(dāng)我們?yōu)橐粋€有多個樣式的元素創(chuàng)建這樣一個列表時會很麻煩。相反，我們可以將聲明分組在一起：

h1 {font: 28px Verdana; color: white; background: black;}

派生選擇器（上下文選擇器）：通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標(biāo)記更加簡潔。

（派生選擇器還包括：后代選擇器，子元素選擇器，相鄰兄弟選擇器……）

后代選擇器（descendant selector）又稱為包含選擇器。

比方說，你希望列表（li）中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong { font-style: italic; font-weight: normal; }

<li>This is a<strong>important</strong>title</li>

子元素選擇器：如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：

h1>strong {color:red;}

這個規(guī)則會把第一個 h1 下面的兩個 strong 元素變?yōu)榧t色，但是第二個 h1 中的 strong 不受影響：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

id選擇器：可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

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

<div id="red">this is text.</div>

#red { color: red; }

#green { color: green; }

id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。

ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

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

<div class="center">this is text.</div>

<p class="center">this is text too.</p>

.center { text-align: center; }

注意：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

類選擇器可以結(jié)合元素選擇器來使用。

例如，您可能希望只有段落顯示為紅色文本：

p.important {color:red;}

多類選擇器

在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標(biāo)記為重要（important）和警告（warning），就可以寫作：

<p class="important warning">This paragraph is a very important warning</p>

這兩個詞的順序無關(guān)緊要，寫成 warning important 也可以。

如果想要將同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important.warning {background:silver;}

通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。

屬性選擇器，對帶有指定屬性的 HTML 元素設(shè)置樣式。

帶有 title 屬性的所有元素設(shè)置樣式：

[title] { color: red; }

為 title="W3School" 的所有元素設(shè)置樣式：

[title="W3School"] { border: 5px solid blue; }

為 type="text" 的所有input元素設(shè)置樣式：

input[type="text"] { width: 150px; }

將同時有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫：

a[href][title] {color:red;}

屬性與屬性值必須完全匹配

比如：

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標(biāo)記片段：

<pclass="important warning">This paragraph is a very important warning.</p>

如果寫成 p[class="important"]，那么這個規(guī)則不能匹配示例標(biāo)記。

要根據(jù)具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值：

[title~=hello] { color: red; }

如果忽略了波浪號，則說明需要完成完全值匹配。

為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式。適用于由連字符分隔的屬性值：

[lang|=en] { color: red; }

[attribute] 用于選取帶有指定屬性的元素。

[attribute=value] 用于選取帶有指定屬性和值的元素。

[attribute~=value] 用于選取屬性值中包含指定詞匯的元素。

[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[attribute^=value] 匹配屬性值以指定值開頭的每個元素。

[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個元素。

[attribute*=value] 匹配屬性值中包含指定值的每個元素。

偽類(Pseudo-classes)：用于向某些選擇器添加特殊的效果。

比如錨偽類，

a:link{color: #FF0000}/* 未訪問的鏈接 */

a:visited{color: #00FF00}/* 已訪問的鏈接 */

a:hover{color: #FF00FF}/* 鼠標(biāo)移動到鏈接上 */

a:active{color: #0000FF}/* 選定的鏈接 */

:lang偽類使你有能力為不同的語言定義特殊的規(guī)則。在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的類型：

q:lang(no) { quotes: "~" "~" }

<p>文字<lang="no">段落中的引用的文字</q>文字</p>

比如 :first-child（元素的第一個子元素），

這個特定偽類很容易遭到誤解，所以有必要舉例來說明?？紤]以下標(biāo)記：

提示：最常見的錯誤是認(rèn)為 :first-child 之類的選擇器會選擇元素的第一個子元素。

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Intert Key</li>

<li>Turn key <strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p>Do<em>not</em>push the brake at the same time as the accelerator.</p>

</div>

上面的例子中，作為第一個元素的元素包括第一個 p、第一個 li 和 strong 和 em 元素。

更多偽類：

:active ?向被激活的元素添加樣式。?

:focus ?向擁有鍵盤輸入焦點的元素添加樣式。?

:hover ?當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式。?

:link ? ? ?向未被訪問的鏈接添加樣式。?

:visited ?向已被訪問的鏈接添加樣式。?

:first-child ?向元素的第一個子元素添加樣式。?

:lang ? ? ?向帶有指定 lang 屬性的元素添加樣式。

偽元素：用于向某些選擇器設(shè)置特殊效果。

:first-line 偽元素：用于向文本的首行設(shè)置特殊樣式。

p:first-line { color:#ff0000; font-variant:small-caps; }

注釋："first-line" 偽元素只能用于塊級元素。

注釋：下面的屬性可應(yīng)用于 "first-line" 偽元素：

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

:first-letter 偽元素：用于向文本的首字母設(shè)置特殊樣式：

p:first-letter { color:#ff0000; font-size:xx-large; }

注釋："first-letter" 偽元素只能用于塊級元素。

注釋：下面的屬性可應(yīng)用于 "first-letter" 偽元素：

font

color

background

margin

padding

border

text-decoration

vertical-align (僅當(dāng) float 為 none 時)

text-transform

line-height

float

clear

:before 偽元素：可以在元素的內(nèi)容前面插入新內(nèi)容。

h1:before { content:url(logo.gif); }

:after 偽元素：可以在元素的內(nèi)容之后插入新內(nèi)容。

h1:after { content:url(logo.gif); }

背景：background簡寫屬性（通常建議使用這個屬性，而不是分別使用單個屬性，）

可以設(shè)置如下屬性：（或者值為inherit：從父元素繼承background屬性的設(shè)置。）

背景顏色：background-color

背景圖像的位置：background-position

背景圖片的尺寸：background-size

背景圖片是否重復(fù)：background-repeat

背景圖片的定位區(qū)域：background-origin

背景的繪制區(qū)域：background-clip

背景圖圖像是否固定或隨頁面滾動：background-attachment

背景圖片：background-image

比如：body? { background: #00FF00 url(bgimage.gif) no-repeat fixed top;? }

注釋：IE8 以及更早的瀏覽器不支持一個元素多個背景圖像。

注釋：IE7 以及更早的瀏覽器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

一般來說，所有背景屬性都不能繼承。

背景顏色：background-color（不能繼承，其默認(rèn)值是 transparent。透明。）不能繼承

背景圖片：background-image: url(); （默認(rèn)值是 none，也不能繼承）不能繼承

背景重復(fù)：background-repeat（值可以是repeat-x，repeat-y，no-repeat）

背景定位：background-position（值可以是top，bottom，left，right，center，長度值（元素內(nèi)邊距區(qū)左上角的偏移。偏移點是圖像的左上角），百分?jǐn)?shù)值）

位置關(guān)鍵字（top，bottom，left，right，center）可以按任何順序出現(xiàn)，只要保證不超過兩個關(guān)鍵字 - 一個對應(yīng)水平方向，另一個對應(yīng)垂直方向。如果只出現(xiàn)一個關(guān)鍵字，則認(rèn)為另一個關(guān)鍵字是center。百分?jǐn)?shù)值同理。

下面是等價的位置關(guān)鍵字：

單一關(guān)鍵字 等價的關(guān)鍵字

center == center center

top == top center 或 center top

bottom == bottom center 或 center bottom

right == right center 或 center right

left == left center 或 center left

背景關(guān)聯(lián)：background-attachement（默認(rèn)為scroll，還可以是fixed）

文本：可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等。

文本顏色：color

縮進(jìn)文本：text-indent（最常見的用途是將段落的首行縮進(jìn)，可以是數(shù)值，百分比值，繼承）

可以是負(fù)值，使用負(fù)值時可以實現(xiàn)懸掛縮進(jìn)，但是首行的某些文本可能會超出瀏覽器窗口的左邊界。建議再設(shè)置一個外邊距或一些內(nèi)邊距。

百分?jǐn)?shù)要相對于縮進(jìn)元素父元素的寬度。

注意：一般來說，可以為所有塊級元素應(yīng)用 text-indent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。

提示：如果想把一個行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。

水平對齊：text-align（值可以是left，right，center，justify兩端對齊，inherit）

提示：將塊級元素或表元素居中，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來實現(xiàn)。

需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。

例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會平均分布字母間的額外空間（不過 CSS 規(guī)范特別指出，如果letter-spacing屬性指定為一個長度值，“用戶代理不能進(jìn)一步增加或減少字符間的空間”）。還有一些用戶代理可能會減少某些行的空間，使文本擠得更緊密。所有這些做法都會影響元素的外觀，甚至改變其高度，這取決于用戶代理的對齊選擇影響了多少文本行。

字間距：word-spacing（其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。可以是負(fù)值。）

字母間隔：letter-spacing 默認(rèn)為normal，normal == letter-spacing:0（與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔）

字符轉(zhuǎn)換：text-transform（值可以是none，uppercase，lowercase，capitalize首字母大寫）

文本裝飾：text-decoration（值可以是none，underline，overline，line-through，blink會讓文本閃爍）

處理空白符（空格、換行和 tab 字符）：white-space（值可以是normal，pre，nowrap，pre-wrap，pre-line）

總結(jié)了 white-space 屬性的行為：

值 ? ? ?空白符 換行符 自動換行

pre-line 合并 保留 允許

normal 合并 忽略 允許

nowrap 合并 忽略 不允許

pre ? ? ? ?保留 保留 不允許

pre-wrap 保留 保留 允許

文本方向：direction（值可以是ltr（默認(rèn)），rtl）

注釋：對于行內(nèi)元素，只有當(dāng)unicode-bidi屬性設(shè)置為 embed 或 bidi-override 時才會應(yīng)用 direction 屬性。

文本陰影：text-shadow（CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。）

行間距：line-height（不允許負(fù)值，值可以是normal，數(shù)值，固定的行間距，百分比值，inherit）

字體：定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。

有兩種不同類型的字體系列名稱：

通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 "Serif" 或 "Monospace"）

特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：Serif 字體，Sans-serif 字體，Monospace 字體，Cursive 字體，F(xiàn)antasy 字體

更多：http://www.w3school.com.cn/css/css_font-family.asp

指定字體系列：font-family

使用通用字體系列 ?body { font-family: sans-serif; }

指定字體系列? h1 { font-family: Georgia; }

如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認(rèn)字體來顯示 h1 元素。我們可以通過結(jié)合特定字體名和通用字體系列來解決這個問題：h1 { font-family: Georgia, serif; }

建議在所有 font-family 規(guī)則中都提供一個通用字體系列。

如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優(yōu)先順序排列，然后用逗號進(jìn)行連接：

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

只有當(dāng)字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。

字體風(fēng)格：font-style（值可以是normal，italic斜體顯示，oblique傾斜顯示）

斜體（italic）是一種簡單的字體風(fēng)格，對每個字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。

通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

字體變形：font-variant，值為small-caps。（設(shè)定小型大寫字母。小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。）

字體加粗：font-weight（值可以是bold，關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。）400 等價于 normal，而 700 等價于 bold。

如果將元素的加粗設(shè)置為 bolder，瀏覽器會設(shè)置比所繼承值更粗的一個字體加粗。與此相反，關(guān)鍵詞 lighter 會導(dǎo)致瀏覽器將加粗度下移而不是上移。

字體大?。篺ont-size（可以是絕對值或相對值）

注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。

瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。

可以使用下面這個公式將像素轉(zhuǎn)換為 em：pixels/16=em

注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：pixels/20=em

字體：font（簡寫屬性。）

可以按順序設(shè)置如下屬性：

font-style

font-variant

font-weight

font-size/line-height

font-family

可以不設(shè)置其中的某個值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會使用其默認(rèn)值。

更多：http://www.w3school.com.cn/cssref/pr_font_font.asp

font-size-adjust：當(dāng)首選字體不可用時，對替換字體進(jìn)行智能縮放。（CSS2.1 已刪除該屬性。）?

font-stretch：對字體進(jìn)行水平拉伸。（CSS2.1 已刪除該屬性。）

為鏈接設(shè)置樣式。（可以改變顏色，文本修飾，背景色，字體……）

鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式。

鏈接的四種狀態(tài)：

a:link - 普通的、未被訪問的鏈接

a:visited - 用戶已訪問的鏈接

a:hover - 鼠標(biāo)指針位于鏈接的上方

a:active - 鏈接被點擊的時刻

注意：

當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時，請按照以下次序規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

比如：

a:link {color:#FF0000;}/* 未被訪問的鏈接 */

a:visited {color:#00FF00;}/* 已被訪問的鏈接 */

a:hover {color:#FF00FF;}/* 鼠標(biāo)指針移動到鏈接上 */

a:active {color:#0000FF;}/* 正在被點擊的鏈接 */

列表：允許你放置、改變列表項標(biāo)志，或者將圖像作為列表項標(biāo)志。

列表類型，list-style-type（可取值http://www.w3school.com.cn/cssref/pr_list-style-type.asp）

例如，在一個無序列表中，列表項的標(biāo)志 (marker) 是出現(xiàn)在各列表項旁邊的圓點。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。

常用的值：

none無標(biāo)記。

disc默認(rèn)。標(biāo)記是實心圓。

circle標(biāo)記是空心圓。

square標(biāo)記是實心方塊。

decimal標(biāo)記是數(shù)字。

列表項圖像，list-style-image: url()/none/inherit

列表標(biāo)志位置，list-style-position

簡寫列表樣式，list-style，值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認(rèn)值。

表格：

表格邊框，border

比如：table, th, td { border: 1px solid blue; }

請注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。

如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。

折疊邊框：border-collapse（是否將表格邊框折疊為單一邊框），值為collapse

表格文本對齊：text-align （水平對齊方式，比如左對齊、右對齊或者居中）和 vertical-align （垂直對齊方式，比如頂部對齊、底部對齊或居中對齊）

border-spacing 設(shè)置分隔單元格邊框的距離，兩個值，第一個是水平間距，第二個是垂直間距。（僅用于“邊框分離”模式）

caption-side 設(shè)置表格標(biāo)題的位置。（top/bottom）

empty-cells 設(shè)置是否顯示表格中的空單元格。（show/hide）

table-layout 設(shè)置顯示單元、行和列的算法。（automatic/fixed）

輪廓 outline：是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。規(guī)定元素輪廓的樣式、顏色和寬度。

outline 簡寫屬性。設(shè)置所有的輪廓屬性。?

p { outline: #00FF00 dotted thick; }

outline-color 設(shè)置輪廓的顏色。 （http://www.w3school.com.cn/cssref/pr_outline-color.asp）

outline-style 設(shè)置輪廓的樣式。 （http://www.w3school.com.cn/cssref/pr_outline-style.asp）

outline-width 設(shè)置輪廓的寬度。（http://www.w3school.com.cn/cssref/pr_outline-width.asp）

框模型（Box Model）：規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。

提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。

提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于單獨的邊。

提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。

內(nèi)邊距：padding（值可以是長度值或百分比值，但不允許使用負(fù)值。）使用百分比值時，內(nèi)邊距要根據(jù)父元素的width來計算

比如：h1 {padding: 10px;}

還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

或者通過使用下面四個單獨的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：padding-top，padding-right，padding-bottom，padding-left

邊框border，可以設(shè)置寬度，樣式，顏色。

可以使用簡寫屬性border，也可以：

border-top

border-bottom

border-left

border-right

寬度：border-width（可以是長度值，或者thin 、medium（默認(rèn)值） 和 thick。）

也可以通過下列屬性分別設(shè)置邊框各邊的寬度：

border-top-width

border-right-width

border-bottom-width

border-left-width

顏色：border-color，顏色可以是transparent

還有一些單邊邊框顏色屬性。

border-top-color

border-right-color

border-bottom-color

border-left-color

樣式：border-style

常用值：（更多http://www.w3school.com.cn/cssref/pr_border-style.asp）

值 描述

none定義無邊框。

hidden與 "none" 相同。不過應(yīng)用于表時除外，對于表，hidden 用于解決邊框沖突。

dotted定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。

dashed定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。

solid定義實線。

double定義雙線。雙線的寬度等于 border-width 的值。

定義單邊樣式

border-top-style

border-right-style

border-bottom-style

border-left-style

因此這兩種方法是等價的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意：

如果把 border-style 設(shè)置為 none，無論寬度是多少，但是邊框樣式設(shè)置為none，此時，不僅邊框的樣式?jīng)]有了，其寬度也會變成 0。

這是因為如果邊框樣式為 none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣釉O(shè)置為 0，而不論您原先定義的是什么。

外邊距：margin，這個屬性接受任何長度單位（可以是像素、英寸、毫米或 em。）、百分?jǐn)?shù)值甚至負(fù)值。

可以使用下列任何一個屬性來只設(shè)置相應(yīng)的外邊距，

margin-top

margin-right

margin-bottom

margin-left

提示和注釋

提示：Netscape 和 IE 對 body 標(biāo)簽定義的默認(rèn)邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內(nèi)部填充（padding）的默認(rèn)值定義為 8px，因此如果希望對整個網(wǎng)站的邊緣部分進(jìn)行調(diào)整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進(jìn)行自定義。

外邊距合并：當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。

定位：

三種基本的定位機(jī)制：普通流、浮動和絕對定位。

position，值可以是static，relative，absolute，fixed

relative：偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute：從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。（絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。）

fixed：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

可以設(shè)置top，right，bottom，left的值，

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

overflow 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。

clip 設(shè)置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。

vertical-align 設(shè)置元素的垂直對齊方式。

z-index 設(shè)置元素的堆疊順序。

浮動：float，清浮動：clear

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創(chuàng)建浮動框可以使文本圍繞圖像：

要想阻止行框圍繞浮動框，需要對該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。

為了實現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

左圖是清理第一個段落，右圖是清理第二個段落。

假設(shè)希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。（圖片作浮動，文本右浮動）

這時候出現(xiàn)了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應(yīng)用 clear：

出現(xiàn)了一個新的問題，由于沒有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能在容器內(nèi)添加一個空元素并且清理它。

這樣可以實現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear，但是有時候不得不為了進(jìn)行布局而添加無意義的標(biāo)記。

不過我們還有另一種辦法，那就是對容器 div 進(jìn)行浮動。

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進(jìn)行浮動，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點的頁腳）對這些浮動進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

（例子1：想要都浮動在左側(cè)，除了設(shè)置浮動外，還需要設(shè)置清浮動。http://www.w3school.com.cn/tiy/t.asp?f=csse_class-clear

例子2：w3school的頁面 http://www.w3school.com.cn/tiy/t.asp?f=csse_float6

例子3：常見的水平菜單就是通過設(shè)置浮動實現(xiàn)的）

水平對齊的方式：

使用 margin 屬性來水平對齊：可通過將左和右外邊距設(shè)置為 "auto"，來對齊塊元素。

.center {

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

使用 position 屬性進(jìn)行左和右對齊，對齊元素的方法之一是使用絕對定位：

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

使用 float 屬性來進(jìn)行左和右對齊

.right{ float: right; width: 300px; background-color: #b0e0e6; }

水平居中，垂直居中的方法：

div{width:50px;height:50px;position:absolute;top:50%;left:50%;margin: -25px 0 0 -25px;}（margin-left的取值是負(fù)的元素寬度的一半，margin-top的取值是負(fù)的元素高度的一半）

div{width:50px;height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;}

.element {width:600px;height:400px;position:absolute;left:?50%;top:?50%;transform:?translate(-50%,?-50%);/*?50%為自身尺寸的一半?*/}

等等……

尺寸：（可以使用像素值，百分比值，數(shù)值）

height 設(shè)置元素的高度。

line-height 設(shè)置行高。

max-height 設(shè)置元素的最大高度。

max-width 設(shè)置元素的最大寬度。

min-height 設(shè)置元素的最小高度。

min-width 設(shè)置元素的最小寬度。

width 設(shè)置元素的寬度。

分類屬性：允許你控制如何顯示元素，設(shè)置圖像顯示于另一元素中的何處，相對于其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。

clear 設(shè)置一個元素的側(cè)面是否允許其他的浮動元素。（值可以是left，right，both，none）

cursor 規(guī)定當(dāng)指向某元素之上時顯示的指針類型。（取值可以看這里：http://www.w3school.com.cn/cssref/pr_class_cursor.asp）

display 設(shè)置是否及如何顯示元素。（取值可以看這里：http://www.w3school.com.cn/cssref/pr_class_display.asp）

float 定義元素在哪個方向浮動。

position 把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。

visibility 設(shè)置元素是否可見或不可見。（值可以是visible，hidden，collapse）

圖像透明度：

http://www.w3school.com.cn/tiy/t.asp?f=css_image_transparency

img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */}

媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。

某些 CSS 屬性僅僅被設(shè)計為針對某些媒介。比方說 "voice-family" 屬性被設(shè)計為針對聽覺用戶終端。其他的屬性可被用于不同的媒介。例如，"font-size" 屬性可被用于顯示器以及印刷媒介，但是也許會帶有不同的值。顯示器上面的顯示的文檔通常會需要比紙媒介文檔更大的字號，同時，在顯示器上，sans-serif 字體更易閱讀，而在紙媒介上，serif 字體更易閱讀。

@media規(guī)則，使你有能力在相同的樣式表中，使用不同的樣式規(guī)則來針對不同的媒介。

例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁面需要被打印，將使用 10 個像素的 Times 字體。注意：font-weight 被設(shè)置為粗體，不論顯示器還是紙媒介：

@media screen{

p.test {font-family:verdana,sans-serif; font-size:14px}

}

@media print{

p.test {font-family:times,serif; font-size:10px}

}

@media screen,print{

p.test {font-weight:bold}

}

不同的媒介類型

all 用于所有的媒介設(shè)備。

aural 用于語音和音頻合成器。

braille 用于盲人用點字法觸覺回饋設(shè)備。

embossed 用于分頁的盲人用點字法打印機(jī)。

handheld 用于小的手持的設(shè)備。

print 用于打印機(jī)。

projection 用于方案展示，比如幻燈片。

screen 用于電腦顯示器。

tty 用于使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。

tv 用于電視機(jī)類型的設(shè)備。