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

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

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

樣式表允許以多種方式規(guī)定樣式信息涉枫。樣式可以規(guī)定在單個(gè)的 HTML 元素中苟耻，在 HTML 頁(yè)的頭元素中撼短，或在一個(gè)外部的 CSS 文件中踩寇。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表框沟。

當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)牍氛，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中晨继，其中內(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)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)紊扬。請(qǐng)慎用這種方法蜒茄，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。

CSS 語(yǔ)法

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

selector {declaration1; declaration2; ... declarationN }

屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值腹缩。屬性和值被冒號(hào)分開(kāi)屿聋。

selector {property: value}

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

CSS 對(duì)大小寫(xiě)不敏感。不過(guò)存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話藏鹊，class 和 id 名稱對(duì)大小寫(xiě)是敏感的润讥。

PS：

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

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

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

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

樣式書(shū)寫(xiě)規(guī)范：

- 開(kāi)括號(hào)與選擇器位于同一行

- 在開(kāi)括號(hào)之前用一個(gè)空格

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

- 在每個(gè)屬性與其值之間使用冒號(hào)加一個(gè)空格

- 在每個(gè)逗號(hào)或分號(hào)之后使用空格

- 在每個(gè)屬性值對(duì)（包括最后一個(gè)）之后使用分號(hào)

- 只在值包含空格時(shí)使用引號(hào)來(lái)包圍值

- 把閉括號(hào)放在新的一行，之前不用空格

- 避免每行超過(guò) 80 個(gè)字符

注釋：在逗號(hào)或分號(hào)之后添加空格菇曲，是所有書(shū)寫(xiě)類型的通用規(guī)則冠绢。

如：

短規(guī)則

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

長(zhǎng)規(guī)則

body {

? background-color: lightgrey;

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

? font-size: 16em;

? color: black;

}

選擇器的分組

被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開(kāi)常潮。

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

繼承及其問(wèn)題

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

body {

font-family: Verdana, sans-serif;

}

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

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

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

友善地對(duì)待Netscape 4

幸運(yùn)地是，你可以通過(guò)使用我們稱為 "Be Kind to Netscape 4" 的冗余法則來(lái)處理舊式瀏覽器無(wú)法理解繼承的問(wèn)題违崇。

body? {

font-family: Verdana, sans-serif;

}

p, td, ul, ol, li, dl, dt, dd? {

font-family: Verdana, sans-serif;

}

4.0 瀏覽器無(wú)法理解繼承阿弃，不過(guò)他們可以理解組選擇器。這么做雖然會(huì)浪費(fèi)一些用戶的帶寬羞延，但是如果需要對(duì) Netscape 4 用戶進(jìn)行支持渣淳，就不得不這么做。

繼承是一個(gè)詛咒嗎伴箩？

如果你不希望 "Verdana, sans-serif" 字體被所有的子元素繼承入愧，又該怎么做呢？比方說(shuō)嗤谚，你希望段落的字體是 Times棺蛛。沒(méi)問(wèn)題。創(chuàng)建一個(gè)針對(duì) p 的特殊規(guī)則巩步，這樣它就會(huì)擺脫父元素的規(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é)合使用鲸湃。

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

給某個(gè) HTML 元素子寓，比如 p暗挑、h1、em斜友、a惯雳，甚至可以是 html 本身設(shè)置樣式：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

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

“類型選擇器匹配文檔語(yǔ)言元素類型的名稱瓤狐。類型選擇器匹配文檔樹(shù)中該元素類型的每一個(gè)實(shí)例实胸。”

選擇器分組沪么，

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

h2, p {color:gray;}

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

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

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

* {color:red;}

聲明分組

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

h1 {font: 28px Verdana;}

h1 {color: blue;}

h1 {background: red;}

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

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

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

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

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

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

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

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

子元素選擇器：如果您不希望選擇任意的后代元素赖晶，而是希望縮小范圍律适，只選擇某個(gè)元素的子元素，請(qǐng)使用子元素選擇器（Child selector）遏插。

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

例如胳嘲，如果您希望選擇只作為 h1 元素子元素的 strong 元素厂僧，可以這樣寫(xiě)：

h1>strong {color:red;}

這個(gè)規(guī)則會(huì)把第一個(gè) h1 下面的兩個(gè) strong 元素變?yōu)榧t色，但是第二個(gè) 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)的段落的上邊距鹰祸，可以這樣寫(xiě)：

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

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

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

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

#red { color: red; }

#green { color: green; }

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

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

類選擇器浇衬，以一個(gè)點(diǎn)號(hào)顯示：

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

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

.center { text-align: center; }

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

類選擇器可以結(jié)合元素選擇器來(lái)使用耘擂。

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

p.important {color:red;}

多類選擇器

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

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

這兩個(gè)詞的順序無(wú)關(guān)緊要前域，寫(xiě)成 warning important 也可以。

如果想要將同時(shí)包含 important 和 warning 的所有元素還有一個(gè)銀色的背景 韵吨。就可以寫(xiě)作：

.important.warning {background:silver;}

通過(guò)把兩個(gè)類選擇器鏈接在一起匿垄，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限）。

如果一個(gè)多類選擇器包含類名列表中沒(méi)有的一個(gè)類名归粉，匹配就會(huì)失敗椿疗。

屬性選擇器，對(duì)帶有指定屬性的 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; }

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

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

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

比如：

如果屬性值包含用空格分隔的值列表，匹配就可能出問(wèn)題倔喂。

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

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

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

要根據(jù)具體屬性值來(lái)選擇該元素席噩，必須這樣寫(xiě)：

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

屬性和值選擇器 - 多個(gè)值

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

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

如果忽略了波浪號(hào)，則說(shuō)明需要完成完全值匹配悼枢。

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

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

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

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

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

[attribute|=value] 用于選取帶有以指定值開(kāi)頭的屬性值的元素，該值必須是整個(gè)單詞绰上。

[attribute^=value] 匹配屬性值以指定值開(kāi)頭的每個(gè)元素旨怠。

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

[attribute*=value] 匹配屬性值中包含指定值的每個(gè)元素渔期。

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

比如錨偽類，

a:link{color: #FF0000}/* 未訪問(wèn)的鏈接 */

a:visited{color: #00FF00}/* 已訪問(wèn)的鏈接 */

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

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

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

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

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

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

這個(gè)特定偽類很容易遭到誤解信峻，所以有必要舉例來(lái)說(shuō)明倦青。考慮以下標(biāo)記：

提示：最常見(jiàn)的錯(cuò)誤是認(rèn)為 :first-child 之類的選擇器會(huì)選擇元素的第一個(gè)子元素盹舞。

<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>

上面的例子中产镐，作為第一個(gè)元素的元素包括第一個(gè) p、第一個(gè) li 和 strong 和 em 元素踢步。

更多偽類：

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

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

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

:link ? ? ?向未被訪問(wèn)的鏈接添加樣式。?

:visited ?向已被訪問(wèn)的鏈接添加樣式兼丰。?

:first-child ?向元素的第一個(gè)子元素添加樣式玻孟。?

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

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

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

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

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

注釋：下面的屬性可應(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" 偽元素只能用于塊級(jí)元素艳丛。

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

font

color

background

margin

padding

border

text-decoration

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

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簡(jiǎn)寫(xiě)屬性（通常建議使用這個(gè)屬性氮双，而不是分別使用單個(gè)屬性旺聚，）

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

背景顏色：background-color

背景圖像的位置：background-position

背景圖片的尺寸：background-size

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

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

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

背景圖圖像是否固定或隨頁(yè)面滾動(dòng)：background-attachment

背景圖片：background-image

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

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

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

一般來(lái)說(shuō)碱璃，所有背景屬性都不能繼承。

背景顏色：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衷佃，長(zhǎng)度值（元素內(nèi)邊距區(qū)左上角的偏移趟卸。偏移點(diǎn)是圖像的左上角），百分?jǐn)?shù)值）

位置關(guān)鍵字（top氏义，bottom锄列，left，right惯悠，center）可以按任何順序出現(xiàn)邻邮，只要保證不超過(guò)兩個(gè)關(guān)鍵字 - 一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)應(yīng)垂直方向克婶。如果只出現(xiàn)一個(gè)關(guān)鍵字饶囚，則認(rèn)為另一個(gè)關(guān)鍵字是center。百分?jǐn)?shù)值同理鸠补。

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

單一關(guān)鍵字 等價(jià)的關(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）

文本：可以改變文本的顏色、字符間距紫岩，對(duì)齊文本规惰，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)泉蝌，等等歇万。

文本顏色：color

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

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

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

注意：一般來(lái)說(shuō)刹前，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素雌桑，圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性喇喉。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像校坑，它會(huì)隨該行的其余文本移動(dòng)拣技。

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

水平對(duì)齊：text-align（值可以是left膏斤，right徐绑，center，justify兩端對(duì)齊掸绞，inherit）

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

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

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

字間距：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首字母大寫(xiě)）

文本裝飾：text-decoration（值可以是none，underline低零，overline呆馁，line-through，blink會(huì)讓文本閃爍）

處理空白符（空格毁兆、換行和 tab 字符）：white-space（值可以是normal浙滤，pre，nowrap气堕，pre-wrap纺腊，pre-line）

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

值 ? ? ?空白符 換行符 自動(dòng)換行

pre-line 合并 保留 允許

normal 合并 忽略 允許

nowrap 合并 忽略 不允許

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

pre-wrap 保留 保留 允許

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

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

文本陰影：text-shadow（CSS2 包含該屬性誓沸，但是 CSS2.1 沒(méi)有保留該屬性。）

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

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

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

通用字體系列 - 擁有相似外觀的字體系統(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; }

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

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

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

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

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

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

斜體（italic）是一種簡(jiǎn)單的字體風(fēng)格，對(duì)每個(gè)字母的結(jié)構(gòu)有一些小改動(dòng)掏熬，來(lái)反映變化的外觀佑稠。與此不同，傾斜（oblique）文本則是正常豎直文本的一個(gè)傾斜版本旗芬。

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

字體變形：font-variant疮丛，值為small-caps幔嫂。（設(shè)定小型大寫(xiě)字母辆它。小型大寫(xiě)字母不是一般的大寫(xiě)字母，也不是小寫(xiě)字母履恩，這種字母采用不同大小的大寫(xiě)字母锰茉。）

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

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

字體大兄俊：font-size（可以是絕對(duì)值或相對(duì)值）

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

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

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

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

字體：font（簡(jiǎn)寫(xiě)屬性卷胯。）

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

font-style

font-variant

font-weight

font-size/line-height

font-family

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

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

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

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

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

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

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

a:link - 普通的、未被訪問(wèn)的鏈接

a:visited - 用戶已訪問(wèn)的鏈接

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

a:active - 鏈接被點(diǎn)擊的時(shí)刻

注意：

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

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

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

比如：

a:link {color:#FF0000;}/* 未被訪問(wèn)的鏈接 */

a:visited {color:#00FF00;}/* 已被訪問(wèn)的鏈接 */

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

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

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

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

例如欺缘，在一個(gè)無(wú)序列表中，列表項(xiàng)的標(biāo)志 (marker) 是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)挤安。在有序列表中谚殊，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號(hào)蛤铜。

常用的值：

none無(wú)標(biāo)記嫩絮。

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

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

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

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

列表項(xiàng)圖像置尔，list-style-image: url()/none/inherit

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

簡(jiǎn)寫(xiě)列表樣式氢伟，list-style榜轿，值可以按任何順序列出，而且這些值都可以忽略朵锣。只要提供了一個(gè)值谬盐，其它的就會(huì)填入其默認(rèn)值。

表格：

表格邊框诚些，border

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

請(qǐng)注意飞傀，上例中的表格具有雙線條邊框。這是由于 table诬烹、th 以及 td 元素都有獨(dú)立的邊框砸烦。

如果需要把表格顯示為單線條邊框，請(qǐng)使用 border-collapse 屬性绞吁。

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

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

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

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

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

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

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

outline 簡(jiǎn)寫(xiě)屬性屈张。設(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)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊姨谷。

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

內(nèi)邊距：padding（值可以是長(zhǎng)度值或百分比值梦湘，但不允許使用負(fù)值。）使用百分比值時(shí)件甥，內(nèi)邊距要根據(jù)父元素的width來(lái)計(jì)算

比如：h1 {padding: 10px;}

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

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

或者通過(guò)使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上譬正、右宫补、下、左內(nèi)邊距：padding-top曾我，padding-right粉怕，padding-bottom，padding-left

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

可以使用簡(jiǎn)寫(xiě)屬性border稚晚，也可以：

border-top

border-bottom

border-left

border-right

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

也可以通過(guò)下列屬性分別設(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定義無(wú)邊框也搓。

hidden與 "none" 相同棍辕。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表还绘，hidden 用于解決邊框沖突楚昭。

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

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

solid定義實(shí)線昔案。

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

定義單邊樣式

border-top-style

border-right-style

border-bottom-style

border-left-style

因此這兩種方法是等價(jià)的：

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

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

注意：

如果把 border-style 設(shè)置為 none踏揣，無(wú)論寬度是多少庆亡，但是邊框樣式設(shè)置為none，此時(shí)捞稿，不僅邊框的樣式?jīng)]有了又谋，其寬度也會(huì)變成 0。

這是因?yàn)槿绻吙驑邮綖?none娱局，即邊框根本不存在彰亥，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 0衰齐，而不論您原先定義的是什么任斋。

外邊距：margin，這個(gè)屬性接受任何長(zhǎng)度單位（可以是像素耻涛、英寸废酷、毫米或 em。）抹缕、百分?jǐn)?shù)值甚至負(fù)值澈蟆。

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

margin-top

margin-right

margin-bottom

margin-left

提示和注釋

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

外邊距合并：當(dāng)兩個(gè)垂直外邊距相遇時(shí)橙垢，它們將形成一個(gè)外邊距垛叨。

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

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)柜某，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并嗽元。請(qǐng)看下圖：

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

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

假設(shè)有一個(gè)空元素翰绊，它有外邊距佩谷，但是沒(méi)有邊框或填充。在這種情況下监嗜，上外邊距與下外邊距就碰到了一起谐檀，它們會(huì)發(fā)生合并：

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

這就是一系列的段落元素占用空間非常小的原因裁奇，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄鹜┾纬闪艘粋€(gè)小的外邊距。

外邊距合并初看上去可能有點(diǎn)奇怪刽肠，但是實(shí)際上溃肪，它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例五垮。第一個(gè)段落上面的空間等于段落的上外邊距乍惊。如果沒(méi)有外邊距合并杜秸，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和放仗。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并撬碟，段落之間的上外邊距和下外邊距就合并在一起诞挨，這樣各處的距離就一致了。

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

定位：

三種基本的定位機(jī)制：普通流其障、浮動(dòng)和絕對(duì)定位银室。

position，值可以是static，relative蜈敢，absolute辜荠，fixed

relative：偏移某個(gè)距離。元素仍保持其未定位前的形狀抓狭，它原本所占的空間仍保留伯病。

absolute：從文檔流完全刪除，并相對(duì)于其包含塊定位否过。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊午笛。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣苗桂。元素定位后生成一個(gè)塊級(jí)框药磺，而不論原來(lái)它在正常流中生成何種類型的框。（絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素煤伟，如果元素沒(méi)有已定位的祖先元素与涡，那么它的位置相對(duì)于最初的包含塊。）

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

可以設(shè)置top，right鸿秆，bottom酌畜，left的值，

提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分卿叽，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置桥胞。

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

clip 設(shè)置元素的形狀考婴。元素被剪入這個(gè)形狀之中贩虾，然后顯示出來(lái)。

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

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

浮動(dòng)：float，清浮動(dòng)：clear

浮動(dòng)的框可以向左或向右移動(dòng)考杉，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/b>

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

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

當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)枕稀，直到它的左邊緣碰到包含框的左邊緣询刹。因?yàn)樗辉偬幱谖臋n流中谜嫉，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2凹联，使框 2 從視圖中消失骄恶。

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框匕垫，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框僧鲁。

行框和清理

浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間象泵，行框圍繞浮動(dòng)框寞秃。

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

要想阻止行框圍繞浮動(dòng)框偶惠，需要對(duì)該框應(yīng)用 clear 屬性春寿。clear 屬性的值可以是 left、right忽孽、both 或 none绑改，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

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

左圖是清理第一個(gè)段落，右圖是清理第二個(gè)段落出革。

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

這時(shí)候出現(xiàn)了一個(gè)問(wèn)題耳璧。因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間展箱。

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

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

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

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

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

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

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

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

---

水平對(duì)齊的方式：

使用 margin 屬性來(lái)水平對(duì)齊：可通過(guò)將左和右外邊距設(shè)置為 "auto"湾戳，來(lái)對(duì)齊塊元素贤旷。

.center {

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

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

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

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

.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è)置圖像顯示于另一元素中的何處榴徐，相對(duì)于其正常位置來(lái)定位元素守问，使用絕對(duì)值來(lái)定位元素，以及元素的可見(jiàn)度坑资。

clear 設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動(dòng)元素耗帕。（值可以是left，right袱贮，both仿便，none）

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

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

float 定義元素在哪個(gè)方向浮動(dòng)嗽仪。

position 把元素放置到一個(gè)靜態(tài)的、相對(duì)的柒莉、絕對(duì)的闻坚、或固定的位置中。

visibility 設(shè)置元素是否可見(jiàn)或不可見(jiàn)兢孝。（值可以是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)允許你定義以何種媒介來(lái)提交文檔。文檔可以被顯示在顯示器雳殊、紙媒介或者聽(tīng)覺(jué)瀏覽器等等橘沥。

某些 CSS 屬性僅僅被設(shè)計(jì)為針對(duì)某些媒介。比方說(shuō) "voice-family" 屬性被設(shè)計(jì)為針對(duì)聽(tīng)覺(jué)用戶終端夯秃。其他的屬性可被用于不同的媒介座咆。例如，"font-size" 屬性可被用于顯示器以及印刷媒介仓洼，但是也許會(huì)帶有不同的值介陶。顯示器上面的顯示的文檔通常會(huì)需要比紙媒介文檔更大的字號(hào)，同時(shí)衬潦，在顯示器上斤蔓，sans-serif 字體更易閱讀，而在紙媒介上镀岛，serif 字體更易閱讀弦牡。

@media規(guī)則，使你有能力在相同的樣式表中漂羊，使用不同的樣式規(guī)則來(lái)針對(duì)不同的媒介驾锰。

例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁(yè)面需要被打印走越，將使用 10 個(gè)像素的 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 用于語(yǔ)音和音頻合成器赏酥。

braille 用于盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備。

embossed 用于分頁(yè)的盲人用點(diǎn)字法打印機(jī)谆构。

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

print 用于打印機(jī)。

projection 用于方案展示搬素，比如幻燈片呵晨。

screen 用于電腦顯示器。

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

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