1. 元素
1.1 替換元素和非替換元素
替換元素: <img src="howdy.gif" > 它會被存儲在文檔外部的一個圖片文件所替代昌犹。
非替換元素: <span>hi there</span>是一個非替換元素监婶，文字“hi there”會由用戶代理顯示忘晤。對于段落宛蚓、標(biāo)題、表格單元格设塔、列表以及 HTML 中的其他大部分元素都是如此凄吏。
1.2 元素顯示角色: 塊級元素行內(nèi)元素
通常HTML 的層級結(jié)構(gòu)允許行內(nèi)元素作為塊級元素的后代，而不是相反闰蛔。
2. 結(jié)合CSS和HTML
2.1 link標(biāo)簽
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
一個文檔可以關(guān)聯(lián)多個樣式表痕钢。
最初的目的是允許 HTML 開發(fā)者把包含鏈接標(biāo)簽的文檔與其他文檔關(guān)聯(lián)起來。CSS使用Link標(biāo)簽把樣式表鏈接到文檔中
鏈接必須放置在head元素內(nèi)序六，外部樣式才能成功加載任连，與title不同，它不能被放置在任何其它元素里例诀。
加載頁面時随抠，link標(biāo)簽引入的 CSS 被同時加載裁着；@import引入的 CSS 將在頁面加載完畢后被加載。
@import規(guī)則必須放在其他除了@charset規(guī)則以外的CSS規(guī)則的前面拱她，除此之外沒有限制跨算。
2.1.1屬性
rel：表示“關(guān)系”（relation）。
type：始終設(shè)置為text/css椭懊，這個值描述了被link標(biāo)簽加載的數(shù)據(jù)的類型诸蚕。
href：這個屬性的值是樣式表的 URL
media：一個或多個媒體描述符
2.1.2備用樣式表
<link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text">
它們只有被用戶選擇的時候才會用于文檔顯示
2.2 style
<style type="text/css">...</style>
2.3 @import指令
@import url(sheet2.css);
與link一樣，@import可以指示瀏覽器加載一個外部樣式然后把它應(yīng)用到 HTML 文檔渲染中氧猬。它們之間主要的區(qū)別只是在于語法和命令的位置背犯。正如我們看到的這樣，@import是被包含在style中的盅抚。命令必須放在其他 CSS 規(guī)則之前漠魏，否則它不會生效。
類似link妄均，你可以在樣式表的 URL 后添加媒體描述符柱锹，來限制樣式表被用于一個或多個媒體：
如果你想要在一個外部樣式表中使用另一個外部樣式表，@import非常有用丰包。因為外部樣式表不能包含任何文檔標(biāo)記禁熏，link元素就無法使用，但@import卻可以邑彪。
3 樣式表內(nèi)容
3.1規(guī)則結(jié)構(gòu)
前綴 廠商
-epub- 國際數(shù)字出版論壇 epub 格式
-moz- 基于 Mozilla 的瀏覽器（如：Firefox）
-ms- Microsoft Internet Explorer
-o- 基于 Opera 的瀏覽器
-webkit- 基于 WebKit 的瀏覽器（如：Safari 和 Chrome）
4 媒體查詢
通過媒體查詢瞧毙，開發(fā)者可以定義不同媒體環(huán)境中瀏覽器可以使用的樣式表。過去寄症，這是通過使用media屬性來為link元素或style元素設(shè)置媒體類型宙彪，以及通過@import或@media聲明的媒體描述符來處理的。
4.1媒體查詢可以使用在以下位置
link元素的media屬性有巧。
style元素的media屬性释漆。
@import聲明的媒體描述符部分。
media聲明的媒體描述符部分篮迎。
@media projection { body {background: yellow;} }
4.2媒體類型
all: 用于所有演示媒體男图。
print:用于可視用戶打印文檔以及顯示文檔的打印預(yù)覽。
screen:用于在桌面電腦顯示器等屏幕媒體中顯示文檔柑潦。在此類系統(tǒng)上運行的所有 Web 瀏覽器都是屏幕媒體用戶代理享言。
4.3媒體描述符
彩色打印機上渲染文檔時應(yīng)用外部樣式表的兩種基本等效
<link href="print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
=
@import url(print-color.css) print and (color);
and: 只有當(dāng)每個媒體特性都為真，總的查詢結(jié)果才為真渗鬼。
not: 如果所有的條件都為真，樣式表則不會被使用荧琼。not關(guān)鍵字只能用在媒體查詢的開頭譬胎。(color) and not (min-device-width: 800px)
only:
4.4媒體特性描述符和值類型
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
另外還加入了兩個新的值類型
<ratio>
<resolution>
5. 特性查詢
通過判斷用戶代理是否支持特定的屬性-值組合來應(yīng)用樣式塊差牛，被稱作特性查詢。
@supports (color: black) {
body {color: black;}
h1 {color: purple;}
h2 {color: navy;}
}
