Cascading Style Sheets(CSS)對于未document添加樣式是一個強有力的工具，而且已經(jīng)滲透到web開發(fā)的各個角落。舉幾個例子，基于Gecko的瀏覽器使用CSS來支持自己的chrome瀏覽器渲染，很多RSS的客戶端也支持用戶自定義feeds和feed entries的CSS樣式，另外很多即時通訊的客戶端也利用CSS來生成他們的聊天窗口。
web樣式的簡史
CSS首次被發(fā)布是在1994年，那時前端也才剛剛興起。瀏覽器將所有樣式的任務(wù)都交給了用戶-the Presentation preferences in Mosaic
Elements
待添加
多種方式連接CSS與HTML
待添加
Stylesheet 內(nèi)容
待添加
Media Queries媒體查詢
最基本的媒體查詢形式就是media types，首次是在CSS2被引入。下面就列舉下不同類型的媒體media：
- all: 針對所有媒體；
- print: 只有當(dāng)為用戶打印文檔或顯示預(yù)覽時候使用；
- screen: 在電腦等屏幕上呈現(xiàn)時使用，所有的web瀏覽器都屬于屏幕介質(zhì)
如果有多個媒體類型需要設(shè)置，只需要用逗號分隔，下面舉例說明同時在scree和print下的樣式：
<link type="text/css" href="frobozz.css" media="screen, print">
<style type="text/css" media="screen, print">
@import url(frobozz.css) screen, print;
@media screen, print {...}
</style>
當(dāng)然樣式的特征屬性還不止以上這點，用戶還可以添加特征描述符（feature-specific descriptors），例如屏幕分辨率的值或是給定介質(zhì)的顏色深度。
媒體描述符
其實只要是media屬性可以設(shè)置的地方就可以設(shè)置對應(yīng)的描述符，下面的例子就展示如何實現(xiàn)：
// 添加描述符前
<link href="print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
@import url(print-color.css) print and (color);
// 添加描述符后
<link href="print-color.css" type="text/css"
media="print and (color), screen and (color-depth: 8)" rel="stylesheet">
@import url(print-color.css) print and (color), screen and (color-depth: 8);
上面例子中任意一個媒體查詢?yōu)閠rue，則下面的樣式就會被應(yīng)用。上面的@import print-color.css將會在一個彩色的打印機上呈現(xiàn)。如果是一個黑白的打印機，那么兩個query都將是false，所以print-color.css就不會應(yīng)用。同理對屏幕也是一樣的。
每一個媒體查詢都由兩部分組成，一個media type和一系列的media features，每個feature都要用括號包含。如果沒有指定media type，那么默認為all，所以說下面兩個query是一樣的：
@media all and (min-resolution: 96dpi) {...}
@media (min-resolution: 96dpi) {...}
一般來說，一個media feature描述符就是一個css中的鍵值對，不過存在些許的不同，很多features不需要設(shè)定具體值。所以說針對有顏色的介質(zhì)可以直接用color屬性，而針對16位色深的介質(zhì)就要具體指定為color：16.事實上，不帶值的描述符其默認值為true或是false。
而多個feature描述符可以通過下面的邏輯關(guān)鍵詞來鏈接，事實上就以下兩種：
- and：邏輯與，鏈接的所有query都必須為true
- not：取反操作，舉個列子not (color) and (orientation: landscape) and (min-device-width: 800px)意思是三個條件都滿足，計算結(jié)果為false。
注意not只能被用在查詢的開頭，用在中間例如(color) and not (min-device-width: 800px)是無效的。另外注意有些太老的瀏覽器因為無法識別前面加not的查詢就會直接跳過這個樣式。
有些人想是不是還漏了個OR關(guān)鍵詞，但是在查詢里是沒有OR的，對應(yīng)的逗號分隔的一系列查詢就等于代替了OR。
還有一個關(guān)鍵詞only，這個主要是為了向后兼容用的
- only： 只被用來隱藏那些不支持media query的老瀏覽器做兼容，舉例說下，想要在能識別查詢的所有頁面上添加new.css，可以這樣寫@import url(new.css) only all。那些太老的瀏覽器看到only就會直接忽略掉這個樣式。跟not一樣，only也必須在查詢的開頭設(shè)置。
feature描述符和賭贏的類型
上面的很多例子中我們看到了不少的feature描述符，但還不是全部，下面來看看截止到2017年末的最新的全部描述符吧：
- width
- min-width
- max-width
- device-width
- min-device-width
- max-device-width
- height
- min-height
- max-height
- device-height
- min-device-height
- max-device-height
- aspect-ratio
- min-aspect-ratio
- max-aspect-ratio
- device-aspect
- ratio
- min-device-aspect-ratio
- max-device-aspect-ratio
- color
- min-color
- max-color
- color-index
- min-color-index
- max-color-index
- monochrome
- min-monochrome
- max-monochrome
- resolution
- min-resolution
- max-resolution
- orientation
- scan
- grid
另外，兩個新的值類型被加入，它們是：
- <radio>
- <resolution>
如何使用它們將在后面的章節(jié)中介紹
Feature Queries
待添加
小結(jié)
借助CSS可以完全改變?yōu)g覽器渲染DOM元素的方式。既可以通過設(shè)置display屬性來實現(xiàn)，也可以通過多種方式連接css和對應(yīng)的document。用戶是永遠不會知道哪些樣式是外部的，哪些是內(nèi)嵌的。而外部樣式賦予開發(fā)者將站點所有的信息都統(tǒng)一放到一個地方進行管理，這不僅使得站點的升級和維護相當(dāng)輕松，而且還因為所有的呈現(xiàn)都從document中移除而節(jié)省了帶寬。另外借助@supports()，我們可以對原生CSS做進一步的優(yōu)化。
為了想要完全掌握CSS的威力，開發(fā)人員需要了解如何將樣式綁定到對應(yīng)的element中，而為了完全理解CSS背后的機制，則需要進一步通過下一章的選擇器來深入學(xué)習(xí)。
