第一章：CSS和文件

1.1 Web樣式簡介

• 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規範”不能涵蓋一切

1.2 元素

元素（element）是文件結構的根基。文件中的每個元素都對文件的表現起一定作用

置換元素：指用來置換元素內容的部分不由文件內容直接表示。最常見的置換元素要數 img，它的內容由文件之外的影象檔案替換

非置換元素：即元素的內容由使用者代理（通常是瀏覽器）在元素自身生成的框中顯示

塊級元素：預設生成一個填滿父級元素內容區域的框，旁邊不能有其他元素。也就是說，塊級元素在元素框的前後都“斷行”

行內元素：在一行文字內生成元素框，不打斷所在的行。行內元素不在自身所在的元素框的前後“斷行”，因此可以出現在另一個元素的內容中，且不影響所在的元素

1.3 把CSS應用到HTML上

1️⃣ link標籤

<style rel="stylesheet" type="text/css" href="sheet.css" media="all">

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”；始終用於顯示文件，這通常正是文件編寫人員想要的行為

2️⃣ style元素

<style type="text/css">
    ……
</style>

• style元素可以直接包含應用到文件上的樣式，也可以通過@import指令引入外部樣式表
• 開始和結束style標籤之間的樣式稱為文件樣式表或嵌入式樣式表
• style元素應該始終設定type屬性，對CSS文件來說，正確的值是“text/css”
• style元素也有media屬性

3️⃣ @import指令

@import url(sheet.css) all;

• Web瀏覽器遇到@import指令時會載入外部樣式表，使用其中的樣式渲染HTML文件
• @import指令在style元素內部，而且必須放在其他CSS規則前面，否則不會起作用
• 一個文件中可以有多個@import語句
• @import指令也可以顯示匯入的樣式表應用於何種媒體，方法實在樣式表的URL後面提供媒體描述符

4️⃣ HTTP連結

為文件關聯CSS還有一種鮮為人知的方式：使用HTTP首部

在Apache中，若想使用這種方式，可以在 .htaccess 檔案中引用CSS檔案。這樣設定之後，支援這種方式的瀏覽器^[1]在載入受此.htaccess檔案管理的文件時便會使用指定的樣式表，就像通過link元素連結的樣式表一樣。

Header add Link "</ul/testing.css>;rel=stylesheet;type=text/css"

此外，還可以在伺服器的 httpd.conf 檔案中新增等效的規則，這樣可以更高效。在支援這樣方式的瀏覽器中^[1:1]，這樣做的效果與前面一樣，唯一的區別就是設定所在的檔案不同。

<Directory /path/to /public/html/directory>
    Header add Link "</ul/testing.css>;rel=stylesheet;type=text/css"
</Directory>

5️⃣ 行內樣式

• 如果只想為單個元素提供少量樣式，不值得動用嵌入式樣式表或外部樣式表，可以利用HTML元素的style屬性設定行內樣式

• 除了body元素之外的標籤，所有HTML標籤都能設定style屬性

• style屬性的值只能是一系列規則宣告，而不能包含整個樣式表。因此，不能在style屬性中使用@import指令，也不能有完整的規則

• 通常不建議使用style屬性

1.4 樣式表中的內容

1️⃣ 標記

樣式表中不能有標記，不過HTML註解標記除外（歷史原因）

2️⃣ 規則的結構

• 一個樣式表由一系列規則構成
• 一個規則由選擇符和宣告塊構成
• 一個宣告塊由一個或多個宣告組成
• 一個宣告包含一個屬性和對應的值

宣告的格式是固定的：

• 先是屬性，然後是冒號，後面再跟上值和分號
• 冒號和分號後面可以有零個或多個空白
• 值幾乎都是一個關鍵字或以空格分隔的多個關鍵字
• 如果宣告中的屬性或值有誤，整個規則都將被忽略
• 屬性的值可以是多個關鍵字，關鍵字之間通常以空格分隔，有時則使用斜線（/）或逗號

3️⃣ 廠商字首

廠商字首：瀏覽器廠商通過它標記實驗性或專屬（或二者兼具）的屬性、值或其他內容

4️⃣ 處理空白

• CSS對規則之間的空白基本沒有嚴格要求，對規則內部的空白也沒有嚴格要求

• 一般來說，CSS對待空白的方式跟HTML差不多：解析時，連續的空白會合併成一個空白

5️⃣ CSS註釋

/* CSS註釋內容 */

CSS註釋不能巢狀

1.5 媒體查詢

1️⃣ 媒體查詢用法

媒體查詢可以在下述幾個地方使用：

• link元素的media屬性
• style元素的media屬性
• @import宣告的媒體描述符部分
• @media宣告的媒體描述符部分

媒體查詢可以是簡單的媒體型別，也可以是複雜的媒體型別和特性的組合

一個樣式表中可以有任意多個@media塊，而且每一個都有自己的一套媒體描述符；如果願意，可以把所有規則都放在一個@media塊裡

一個媒體描述符包含一個媒體型別和一個或多個媒體特性列表，其中特性描述符要放在圓括號中；如果沒有媒體型別，那就應用到所有媒體上

2️⃣ 簡單的媒體查詢

一個樣式表中可以有任意多個@media塊，而且每一個都有自己的一套媒體描述符；如果願意，可以把所有規則都放在一個@media塊裡

@media all {
    h1 { color: maroon; }
    body { background: yellow; }
}

3️⃣ 媒體型別

• 媒體查詢最基本的形式就是媒體型別，由CSS2引入

• 媒體型別就是指明不同媒體的標註

4️⃣ 媒體描述符

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

@media all and (min-resolution: 96dpi) {……}
@media (min-resolution: 96dpi) {……}

• 可以通過一個逗號分隔的列表，列出多個查詢

• 一般情況下，媒體特性描述符的格式類似於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：在不支援媒體查詢的舊瀏覽器中隱藏樣式表。例如：如果想在所有媒體中應用一個樣式表，但是隻在支援媒體查詢的瀏覽器中應用，可以這樣寫：@import url(new.css) only all; 在支援媒體查詢的瀏覽器中，only關鍵字被忽略，樣式表會應用到文件上。而在不支援媒體查詢的瀏覽器中，媒體型別為only all，而這是無效的，因此不會應用樣式表。注意：only關鍵字只能在媒體查詢的開頭

5️⃣ 媒體特性描述符和值的型別

媒體特性描述符：

此外，還有兩種新增的值：

• <ratio>
• <resolution>

1.6 特性查詢

• 特性查詢：根據使用者代理是否支援特定的CSS屬性及其值來應用一段樣式

• 特性查詢可以巢狀，其實還可以巢狀在媒體查詢中，而且反過來巢狀也可以

• 與媒體查詢一樣，特性查詢也支援使用邏輯運算子

• 特性查詢中既要寫屬性也要寫值。因為，瀏覽器可能支援某個屬性，但不支援它的全部取值

案例一：假設想在使用者代理支援color屬性時，為元素設定顏色

/* 如果能識別並處理color:black這樣的屬性和值組合，那就應用這段樣式；否則，跳過這段樣式如果使用者代理不支援@supports，整段樣式都會跳過*/@supports (color:black) {    body { color: black; }    h1 { color: purple; }    h2 { color: navy; }}

案例二：巢狀查詢

/* 使用彈性盒佈局編寫針對螢幕和印刷媒體的樣式，可以把媒體查詢塊放在@supports(display:flex)塊裡 */@supports (display: flex) {    @media screen {        /* 針對螢幕媒體的彈性盒樣式 */    }    @media print {        /* 針對印刷媒體的彈性盒樣式 */    }}/* 反過來，也可以在實現響應式設計的媒體查詢塊中新增@supports()塊 */@media screen and (max-width: 30em) {    @supports (display:flex) {        /* 針對小屏的彈性盒樣式 */    }}@media screen and (min-width: 30em) {    @supports (display:flex) {        /* 針對大屏的彈性盒樣式 */    }}

案例三：假如想在使用者代理同時支援柵格佈局和CSS形狀時應用一段樣式

@supports (display:grid) and (shape-outside:circle()) {    /* 柵格和形狀樣式 */}

本文來自部落格園，作者：不二橘子醬，轉載請註明原文連結：https://www.cnblogs.com/feeder/p/15017034.html