第一章：CSS和文檔
1994年，正值Web開始廣泛流行開來，CSS的第一個提案釋出了。那時，浏覽器為使用者提供了各種樣式的定制功能，而文檔編寫人員卻做不到這一點。文檔編寫人員隻能把内容标記成一個個段落、一級級标題、一塊塊預排格式文本，或者一些其他類型的元素。如果使用者願意，可以把一級标題設為粉紅色的小字，而把六級标題設為紅色的大字
CSS就是在這樣的背景下誕生的。它的目的就是提供一個簡單的聲明式樣式語言，而且具有一定的靈活性，能為文檔編寫人員和使用者提供等同的樣式化功能。文檔編寫人員和使用者都有話語權，不過最終的決策權在使用者手裡
草案制定的速度很快，到1996年年末，CSS1完成了。此後，剛組建的CSS工作組開始着手制定CSS2，而各浏覽器則互相協作，努力實作CSS1
CSS2規範于1998年年初定案。随後，CSS工作組立即投身CSS3的制定工作，以及CSS2的修訂工作（制定CSS2.1）
與以往不同的是，CSS3由多個（理論上）獨立的子產品構成，而不是單獨的一個臃腫的規範。CSS3分成了多個子產品的根本原因是各子產品可以獨立演進。尤其是重要的（或閱聽人廣的）子產品可以按照W3C的規劃向前推進，而不必受其他子產品拖累
截至2012年年初，有三個CSS3子產品（CSS Color Level3、CSS Selectors Level3、CSS Namespaces）變成了全力推薦狀态，而有七個子產品處于候選狀态，還有七個子產品處在不同的草案狀态。如果采用以前的機制，要等其他部分完成才能在一份完成的規範中釋出顔色、選擇符和命名空間的新條款。得益于子產品化，我們無需再等待
但是，這樣也有缺點，即“CSS規範”不能涵蓋一切
元素（element）是文檔結構的根基。文檔中的每個元素都對文檔的表現起一定作用
置換元素：指用來置換元素内容的部分不由文檔内容直接表示。最常見的置換元素要數 <code>img</code>，它的内容由文檔之外的圖像檔案替換
非置換元素：即元素的内容由使用者代理（通常是浏覽器）在元素自身生成的框中顯示
塊級元素：預設生成一個填滿父級元素内容區域的框，旁邊不能有其他元素。也就是說，塊級元素在元素框的前後都“斷行”
行内元素：在一行文本内生成元素框，不打斷所在的行。行内元素不在自身所在的元素框的前後“斷行”，是以可以出現在另一個元素的内容中，且不影響所在的元素
link标簽位置：link标簽必須放在head元素内，不能放在其他元素中。Web浏覽器遇到link标簽時，會查找并加載指定的樣式表，使用樣式表中的樣式渲染HTML文檔
link标簽屬性：
rel屬性：rel是“relation”關系的簡稱。這裡指定的關系是stylesheet
type屬性：type屬性值始終為"text/css"，說明通過link标簽加載的資料類型。這樣Web浏覽器才知道加載的樣式表是CSS樣式表，然後确定如何處理加載的資料
href屬性：它的值是樣式表的URL，可以是絕對位址，也可以是相對位址，具體由需求而定。另外，檔案擴充名不是必須的，但是如果檔案名不以“.css”結尾，即使在link元素中把type屬性值設為“text/css”，有些浏覽器也不會将其識别為包含樣式表的檔案
media屬性：它的值是一個或多個媒體描述符，指明媒體的類型和具有的功能，多個媒體描述符以逗号分開
注意：
外部樣式表不能包含任何文檔标記，隻能有CSS規則和CSS注釋
如果外部樣式表中有标記，可能導緻部分或全部樣式失效
補充——樣式表分類：
候選樣式表：把rel屬性的值設為“alternate stylesheet” ；僅當使用者自己選擇，文檔才會使用候選樣式表渲染
首選樣式表：為rel屬性的“stylesheet”的link元素設定title标題屬性；顯示文檔時預設使用，而選擇候選樣式表之後，首選樣式表就不使用了
永久樣式表：把rel屬性的值設為“stylesheet”；始終用于顯示文檔，這通常正是文檔編寫人員想要的行為
style元素可以直接包含應用到文檔上的樣式，也可以通過@import指令引入外部樣式表
開始和結束style标簽之間的樣式稱為文檔樣式表或嵌入式樣式表
style元素應該始終設定type屬性，對CSS文檔來說，正确的值是“text/css”
style元素也有media屬性
Web浏覽器遇到@import指令時會加載外部樣式表，使用其中的樣式渲染HTML文檔
@import指令在style元素内部，而且必須放在其他CSS規則前面，否則不會起作用
一個文檔中可以有多個@import語句
@import指令也可以顯示導入的樣式表應用于何種媒體，方法實在樣式表的URL後面提供媒體描述符
為文檔關聯CSS還有一種鮮為人知的方式：使用HTTP首部
在Apache中，若想使用這種方式，可以在 .htaccess 檔案中引用CSS檔案。這樣設定之後，支援這種方式的浏覽器[1]在加載受此.htaccess檔案管理的文檔時便會使用指定的樣式表，就像通過link元素連結的樣式表一樣。
此外，還可以在伺服器的 httpd.conf 檔案中添加等效的規則，這樣可以更高效。在支援這樣方式的浏覽器中[1:1]，這樣做的效果與前面一樣，唯一的差別就是設定所在的檔案不同。
如果隻想為單個元素提供少量樣式，不值得動用嵌入式樣式表或外部樣式表，可以利用HTML元素的style屬性設定行内樣式
除了body元素之外的标簽，所有HTML标簽都能設定style屬性
style屬性的值隻能是一系列規則聲明，而不能包含整個樣式表。是以，不能在style屬性中使用@import指令，也不能有完整的規則
通常不建議使用style屬性
樣式表中不能有标記，不過HTML注解标記除外（曆史原因）
一個樣式表由一系列規則構成
一個規則由選擇符和聲明塊構成
一個聲明塊由一個或多個聲明組成
一個聲明包含一個屬性和對應的值
聲明的格式是固定的：
先是屬性，然後是冒号，後面再跟上值和分号
冒号和分号後面可以有零個或多個空白
值幾乎都是一個關鍵字或以空格分隔的多個關鍵字
如果聲明中的屬性或值有誤，整個規則都将被忽略
屬性的值可以是多個關鍵字，關鍵字之間通常以空格分隔，有時則使用斜線（/）或逗号
廠商字首：浏覽器廠商通過它标記實驗性或專屬（或二者兼具）的屬性、值或其他内容
字首
廠商
-epub-
國際數字出版論壇定制的ePub格式
-moz-
基于Mozilla的浏覽器（如Firefox）
-ms-
微軟Internet Explorer
-o-
基于Opera的浏覽器
-webkit-
基于Webkit的浏覽器（如Safari和Chrome）
CSS對規則之間的空白基本沒有嚴格要求，對規則内部的空白也沒有嚴格要求
一般來說，CSS對待空白的方式跟HTML差不多：解析時，連續的空白會合并成一個空白
CSS注釋不能嵌套
媒體查詢可以在下述幾個地方使用：
link元素的media屬性
style元素的media屬性
@import聲明的媒體描述符部分
@media聲明的媒體描述符部分
媒體查詢可以是簡單的媒體類型，也可以是複雜的媒體類型和特性的組合 一個樣式表中可以有任意多個@media塊，而且每一個都有自己的一套媒體描述符；如果願意，可以把所有規則都放在一個@media塊裡 一個媒體描述符包含一個媒體類型和一個或多個媒體特性清單，其中特性描述符要放在圓括号中；如果沒有媒體類型，那就應用到所有媒體上
媒體查詢最基本的形式就是媒體類型，由CSS2引入
媒體類型就是指明不同媒體的标注
媒體類型
說明
all
用于所有展示媒體
為有視力的使用者列印文檔時使用，也在預覽列印效果時使用
screen
在螢幕媒體（如桌面電腦的顯示器）上展示文檔時使用
在桌面計算機上運作的所有Web浏覽器都是螢幕媒體使用者代理
projection
能以幻燈片的形式展示文檔
可以通過一個逗号分隔的清單，列出多個查詢
一般情況下，媒體特性描述符的格式類似于CSS中的一對屬性和值。二者之間最大的差別是，特性描述符可以不指定值。是以，任何彩色媒體都符合(color)指定的條件，任何色深為16位的彩色媒體都符合(color:16)指定的條件。其實不指定值時，是在做判斷，比如說(color)的意思是“這個媒體是彩色的嗎？”
多個特性描述符之間使用邏輯關鍵字連結
and： 連接配接的兩個或多個媒體特性必須同時滿足條件，整個查詢得到的結果才是真值。例如：(color) and (orientation: landscape) and (min-device-width: 800px)表示三個條件都要滿足：當媒體環境是彩色的、橫向放着、而且裝置的螢幕寬至少為800像素，才會應用樣式表
not：對整個查詢取反。假如所有條件都為真，那樣式表不會應用到文檔上。例如：not (color) and (orientation: landscape) and (min-device-width: 800px)表示三個條件都滿足時，整個語句得到的結果與之相反。是以，當媒體環境是彩色的、橫向放着，而且裝置的螢幕寬度至少為800像素，樣式表不會應用到文檔上。除此之外的情況下，都将應用樣式表
only：在不支援媒體查詢的舊浏覽器中隐藏樣式表。例如：如果想在所有媒體中應用一個樣式表，但是隻在支援媒體查詢的浏覽器中應用，可以這樣寫：<code>@import url(new.css) only all;</code> 在支援媒體查詢的浏覽器中，only關鍵字被忽略，樣式表會應用到文檔上。而在不支援媒體查詢的浏覽器中，媒體類型為only all，而這是無效的，是以不會應用樣式表。注意：only關鍵字隻能在媒體查詢的開頭
媒體特性描述符：
此外，還有兩種新增的值：
<code><ratio></code>
<code><resolution></code>
特性查詢：根據使用者代理是否支援特定的CSS屬性及其值來應用一段樣式
特性查詢可以嵌套，其實還可以嵌套在媒體查詢中，而且反過來嵌套也可以
與媒體查詢一樣，特性查詢也支援使用邏輯運算符
特性查詢中既要寫屬性也要寫值。因為，浏覽器可能支援某個屬性，但不支援它的全部取值
案例一：假設想在使用者代理支援color屬性時，為元素設定顔色
案例二：嵌套查詢
案例三：假如想在使用者代理同時支援栅格布局和CSS形狀時應用一段樣式
“支援這種方式的浏覽器”：截至2017年末，廣泛支援HTTP連結樣式表的浏覽器有Firefox系列和Opera ↩︎ ↩︎
作者：不二橘子醬