# [X分鐘速成Y](http://learnxinyminutes.com/)
## 其中 Y=css
源代碼下載：?[learncss-cn.css](http://learnxinyminutes.com/docs/files/learncss-cn.css)
早期的web沒有樣式，只是單純的文本。通過CSS，可以實現網頁樣式和內容的分離。
簡單來說，CSS可以指定HTML頁面上的元素所使用的樣式。
和其他語言一樣，CSS有很多版本。最新的版本是CSS 3\. CSS 2.0兼容性最好。
你可以使用[dabblet](http://dabblet.com/)來在線測試CSS的效果。
~~~
/* 注釋 */
/* ####################
## 選擇器
####################*/
/* 一般而言，CSS的聲明語句非常簡單。 */
選擇器 { 屬性: 值; /* 更多屬性...*/ }
/* 選擇器用于指定頁面上的元素。
針對頁面上的所有元素。 */
* { color:red; }
/*
假定頁面上有這樣一個元素
<div class='some-class class2' id='someId' attr='value' />
*/
/* 你可以通過類名來指定它 */
.some-class { }
/* 給出所有類名 */
.some-class.class2 { }
/* 標簽名 */
div { }
/* id */
#someId { }
/* 由于元素包含attr屬性，因此也可以通過這個來指定 */
[attr] { font-size:smaller; }
/* 以及有特定值的屬性 */
[attr='value'] { font-size:smaller; }
/* 通過屬性的值的開頭指定 */
[attr^='val'] { font-size:smaller; }
/* 通過屬性的值的結尾來指定 */
[attr$='ue'] { font-size:smaller; }
/* 通過屬性的值的部分來指定 */
[attr~='lu'] { font-size:smaller; }
/* 你可以把這些全部結合起來，注意不同部分間不應該有空格，否則會改變語義 */
div.some-class[attr$='ue'] { }
/* 你也可以通過父元素來指定。*/
/* 某個元素是另一個元素的直接子元素 */
div.some-parent > .class-name {}
/* 或者通過該元素的祖先元素 */
div.some-parent .class-name {}
/* 注意，去掉空格后語義就不同了。
你能說出哪里不同么？ */
div.some-parent.class-name {}
/* 你可以選擇某元素前的相鄰元素 */
.i-am-before + .this-element { }
/* 某元素之前的同級元素（相鄰或不相鄰） */
.i-am-any-before ~ .this-element {}
/* 偽類允許你基于頁面的行為指定元素（而不是基于頁面結構） */
/* 例如，當鼠標懸停在某個元素上時 */
:hover {}
/* 已訪問過的鏈接*/
:visited {}
/* 未訪問過的鏈接*/
:link {}
/* 當前焦點的input元素 */
:focus {}
/* ####################
## 屬性
####################*/
選擇器 {
/* 單位 */
width: 50%; /* 百分比 */
font-size: 2em; /* 當前字體大小的兩倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 點 */
width: 5cm; /* 厘米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */
/* 顏色 */
background-color: #F6E; /* 短16位 */
background-color: #F262E2; /* 長16位 */
background-color: tomato; /* 顏色名稱 */
background-color: rgb(255, 255, 255); /* rgb */
background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */
background-color: rgba(255, 0, 0, 0.3); /* rgb 加透明度 */
/* 圖片 */
background-image: url(/path-to-image/image.jpg);
/* 字體 */
font-family: Arial;
font-family: "Courier New"; /* 使用雙引號包裹含空格的字體名稱 */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一個
字體沒找到，瀏覽器會使用第二個字體，一次類推 */
}
~~~
## 使用
CSS文件使用?`.css`?后綴。
~~~
<!-- 你需要在文件的 <head> 引用CSS文件 -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<!-- 你也可以在標記中內嵌CSS。不過強烈建議不要這么干。 -->
<style>
選擇器 { 屬性:值; }
</style>
<!-- 也可以直接使用元素的style屬性。
這是你最不該干的事情。 -->
<div style='property:value;'>
</div>
~~~
## 優先級
同一個元素可能被多個不同的選擇器指定，因此可能會有沖突。
假定CSS是這樣的：
~~~
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
~~~
然后標記語言為：
~~~
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
~~~
那么將會按照下面的順序應用風格：
* `E`?優先級最高，因為它使用了?`!important`，除非很有必要，盡量避免使用這個。
* `F`?其次，因為它是嵌入的風格。
* `A`?其次，因為它比其他指令更具體。
* `C`?其次，雖然它的具體程度和`B`一樣，但是它在`B`之后。
* 接下來是?`B`。
* 最后是?`D`。
## 兼容性
CSS2 的絕大部分特性兼容各種瀏覽器和設備。現在 CSS3 的兼容性也越來越好了。 但是兼容性問題仍然是需要留意的一個問題。
[QuirksMode CSS](http://www.quirksmode.org/css/)是關于這方面最好的資源。
## 擴展閱讀
* [理解CSS的風格優先級: 特定性, 繼承和層疊](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
