Cascading Style Sheets(CSS)對于未document添加樣式是一個強有力的工具，而且已經(jīng)滲透到web開發(fā)的各個角落蚁鳖。舉幾個例子磺芭，基于Gecko的瀏覽器使用CSS來支持自己的chrome瀏覽器渲染，很多RSS的客戶端也支持用戶自定義feeds和feed entries的CSS樣式醉箕，另外很多即時通訊的客戶端也利用CSS來生成他們的聊天窗口钾腺。
web樣式的簡史
CSS首次被發(fā)布是在1994年，那時前端也才剛剛興起讥裤。瀏覽器將所有樣式的任務都交給了用戶-the Presentation preferences in Mosaic
Elements
待添加
多種方式連接CSS與HTML
待添加
Stylesheet 內容
待添加
Media Queries媒體查詢
最基本的媒體查詢形式就是media types放棒，首次是在CSS2被引入。下面就列舉下不同類型的媒體media：
- all: 針對所有媒體己英；
- print: 只有當為用戶打印文檔或顯示預覽時候使用间螟；
- screen: 在電腦等屏幕上呈現(xiàn)時使用，所有的web瀏覽器都屬于屏幕介質
如果有多個媒體類型需要設置，只需要用逗號分隔厢破，下面舉例說明同時在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>
當然樣式的特征屬性還不止以上這點邮府，用戶還可以添加特征描述符（feature-specific descriptors），例如屏幕分辨率的值或是給定介質的顏色深度溉奕。
媒體描述符
其實只要是media屬性可以設置的地方就可以設置對應的描述符褂傀，下面的例子就展示如何實現(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，則下面的樣式就會被應用加勤。上面的@import print-color.css將會在一個彩色的打印機上呈現(xiàn)仙辟。如果是一個黑白的打印機，那么兩個query都將是false鳄梅，所以print-color.css就不會應用叠国。同理對屏幕也是一樣的。
每一個媒體查詢都由兩部分組成戴尸，一個media type和一系列的media features粟焊，每個feature都要用括號包含。如果沒有指定media type孙蒙，那么默認為all项棠，所以說下面兩個query是一樣的：
@media all and (min-resolution: 96dpi) {...}
@media (min-resolution: 96dpi) {...}
一般來說，一個media feature描述符就是一個css中的鍵值對挎峦，不過存在些許的不同香追，很多features不需要設定具體值。所以說針對有顏色的介質可以直接用color屬性坦胶，而針對16位色深的介質就要具體指定為color：16.事實上透典，不帶值的描述符其默認值為true或是false。
而多個feature描述符可以通過下面的邏輯關鍵詞來鏈接顿苇，事實上就以下兩種：
- and：邏輯與峭咒，鏈接的所有query都必須為true
- not：取反操作，舉個列子not (color) and (orientation: landscape) and (min-device-width: 800px)意思是三個條件都滿足纪岁，計算結果為false凑队。
注意not只能被用在查詢的開頭，用在中間例如(color) and not (min-device-width: 800px)是無效的蜂科。另外注意有些太老的瀏覽器因為無法識別前面加not的查詢就會直接跳過這個樣式顽决。
有些人想是不是還漏了個OR關鍵詞短条，但是在查詢里是沒有OR的导匣，對應的逗號分隔的一系列查詢就等于代替了OR。
還有一個關鍵詞only茸时，這個主要是為了向后兼容用的
- only： 只被用來隱藏那些不支持media query的老瀏覽器做兼容贡定，舉例說下，想要在能識別查詢的所有頁面上添加new.css可都，可以這樣寫@import url(new.css) only all缓待。那些太老的瀏覽器看到only就會直接忽略掉這個樣式蚓耽。跟not一樣，only也必須在查詢的開頭設置旋炒。
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
待添加
小結
借助CSS可以完全改變?yōu)g覽器渲染DOM元素的方式。既可以通過設置display屬性來實現(xiàn)铣除，也可以通過多種方式連接css和對應的document谚咬。用戶是永遠不會知道哪些樣式是外部的，哪些是內嵌的尚粘。而外部樣式賦予開發(fā)者將站點所有的信息都統(tǒng)一放到一個地方進行管理择卦，這不僅使得站點的升級和維護相當輕松，而且還因為所有的呈現(xiàn)都從document中移除而節(jié)省了帶寬郎嫁。另外借助@supports()秉继，我們可以對原生CSS做進一步的優(yōu)化。
為了想要完全掌握CSS的威力泽铛，開發(fā)人員需要了解如何將樣式綁定到對應的element中秕噪，而為了完全理解CSS背后的機制，則需要進一步通過下一章的選擇器來深入學習厚宰。
