小白的《CSS權威指南》筆記（上部分）

阿新 • • 發佈：2018-11-04

前言

書中言道，本書只涉及CSS2.0和CSS2.1的知識（PS：我是想學CSS3才買的書，看來買錯了，沒事，當作複習）

CSS的優點

1.豐富的樣式
2.易於使用
3.在多個頁面上使用樣式
4.層疊（也就是選擇器有權重的作用）
5.縮減檔案大小
6.為將來做準備

元素

文件中的每個元素都對文件的表現起一定作用。
替換和非替換元素
替換元素：指用來替換元素內容的部分並非文件內容直接表示。
例：img

非替換元素：大多數HTML和XHTML。

塊級元素和行內元素
塊級元素：在元素框之前和之後生成了“分隔符”。
例：p、div
特例：列表項（生成一個識別符號）

行內元素：在一個文字行內生成元素框，而不會打斷這行文字。
例：a、strong、em

關鍵屬性：display

匯入css樣式表

link標記：

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

為了成功地載入一個外部樣式表，link必須放在head元素中。

media屬性：
all：用於所有表現媒體。
aural：用於語音合成器、螢幕閱讀器和文件的其他聲音表現。
braille：用Braille裝置表現文件時使用。
embossed：用Braille列印裝置時使用。
handheld：用於手持裝置，如個人數字助理或支援Web的蜂窩電話。
print：為視力正常的使用者列印文件時使用，另外還會在顯示文件的”列印預覽“時使用。
projection：用於投影媒體，如發表演講時顯示幻燈片的數字投影儀。
screen：在螢幕媒體（如桌面計算機監視器）中表現文件時使用。在這種系統上執行的所有Web瀏覽器都是螢幕媒體使用者代理。
tty：在固定間距環境（如電傳打字機）中顯示文件時使用。
tv：在電視上顯示文件時使用。

候選樣式表

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Big Text" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Crazy colors!" />

如果沒有為樣式表指定title，那麼它將作為一個永久樣式表（persistent style sheet）。

style元素

<style type="text/css">

style一定要使用type屬性。

@import指令

@import url(sheet2.css);

@import出現在style容器中。它必須放在這裡。

<style type="text/css">
		@import url(styles.css);/*必須放前面*/
		h1 {
				color:gray;
			}

可以限制所匯入的樣式表應用於一種或多種媒體

@import url(styles.css) all;
@import url(styles.css) screen print;

作用：一個外部樣式表要使用到其他外部樣式表中的樣式。
原因：外部樣式表不能包含任何文件標記，所以不能使用link元素。

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}

向後可訪問性

在style內容區新增

<style type="text/css"><!--
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}
--></style>

CSS註釋

/*和*/

CSS註釋不能巢狀

內聯樣式（inline style）

直接寫在HTML的標籤上：

<p style="color: gray;">你好漂亮</p>

注意：不能寫在body以外的標籤上，如head、title。
一個內聯style屬性（記住，書上是說屬性，不是標籤）中只能放一個宣告塊，而不能放整個樣式表。

選擇器

規則結構：

h1 { color：red; background: yellow;}

選擇器：h1
宣告塊：{color: red; background: yellow;}
宣告：color: red;
屬性：color
值：red

元素選擇器

p {color: red;}

如果值是無效的，宣告自動被忽略。
多個值用空格分開。

選擇器分組

有相同樣式：，

h2，
p {
 	color: gray;
 }

通配選擇器

*：選中所有元素

* {
	margin：0；
	padding：0；
}

類選擇器和ID選擇器

<p class="warning">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }

一個元素可以新增多個類

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }
.urgent {
 		color: red;
 		}

選擇有多個class屬性值的元素（親測可用）

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

p.warning.urgent {
		color: red;
	}
	/*只會影響到同時有兩個class屬性的那個元素。*/

但是，感覺這個功能好像有點雞肋，也說不出為什麼，一種感覺。

ID選擇器

<p id="urgent">你好漂亮</p>
<p><span id="warning">beautiful</span></p>

#warning {
 		font-weight: bold;
 		  }
#urgent {
 		color: red;
 		}

id的值只能唯一，一個元素只能有一個id。
（聽說實際開發中id屬性不能隨便使用，由於要和後端資料傳輸的緣故，可能後端會篡改你設定的id。）

屬性選擇器

對於類選擇器和ID選擇器，所做的實際上只是選擇屬性值。
簡單屬性選擇

h1[class] {
	color: silver;
	}

選擇所有使用了class屬性的h1元素。

例項：選擇使用了alt屬性的img元素：
用來診斷不是設計，即用來確定影象是否確實有效。

還可以根據多個屬性進行選擇，只需將屬性選擇器連結在一起即可

a[href][title] {
	font-weight: bold;
	}

根據具體屬性值選擇

a[href="http://www.css-discuss.org/about.html"] {
	font-weight: bold;
	}

根據部分屬性值選擇

如果屬效能接受詞列表（詞之間用空格分隔），可以根據其中的任意一個詞進行選擇。

<p class="urgent warning">你好，世界</p>

p[class~="warning"] {
	fony-weight: bold;
	}

如果忽略~，需要完成完全值匹配。

根據部分屬性值選擇元素

img[title="Figure"] {
	border: 1px solid gray;
	}

可以匹配：
title=“Figure4. A bald-headed elder statesman”
title=“How To Figure Out Who’s In Charge”

子串匹配屬性選擇器

型別						描述
[foo^="bar"]			選擇foo屬性值以”bar“開頭的所有元素
[foo$="bar"]			選擇foo屬性值以"bar"結尾的所有元素
[foo*="bar"]			選擇foo屬性值中包含子串”bar“的所有元素

特定屬性選擇型別

*[lang |="en"] {
	color: white;
}

這個規則會選擇lang屬性等於en或者以en-開頭的所有元素。

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greatings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

選中前三個，後兩個不選中。

使用文件結構

DOM樹結構
父子關係：如果一個元素出現在文件層次結構中另一個元素的上一層，則稱前者是後者的父元素。反之，如果一個元素在另一個元素的下一層，則稱前者是後者的子元素。
父子關係是祖先-後代關係的特例

後代選擇器

descendant selector，也稱為包含選擇器或上下文選擇器（contextual selector）。

h1 em {
	color: gray;
	}

從右向左讀選擇器！

特定的後代選擇器
就是使用上class

td.siderbar {
	background: blue;
	}
td.main {
	background: white;
	}

選擇子元素

在某些情況下，可能並不想選擇一個任意的後代元素，而是希望縮小範圍。
使用子結合符，即大於號（>）：

h1 > strong {
	color: red;
	}

選中h1的子元素是strong的strong元素。

/*只會選擇第一個h1的strong*/
<h1>你好漂亮<strong>真的</strong>沒騙你</h1>
<h1>你好<em>嗎<strong>?</strong></em>好</h1>

書中：選擇作為h1元素子元素的所有strong元素。

選擇相鄰兄弟元素

對二者具有相同父元素的兄弟元素進行選擇。
使用相鄰兄弟結合符（adjacentsibling combinator），就是一個記號（+）。

h1 + p {
	margin-top: 0;
	}

選擇緊接在一個h1元素後出現的所有段落，h1要與p元素有共同的父元素。

用一個結合符只能選擇兩個相鄰兄弟元素中的第二個元素。
即：h1 + p 只會選擇p，並不會把h1選擇上。

那麼，如果有下面這個結構，要選中ol和ul，怎麼辦？
注意“+”後面的元素必須是跟在前面那個元素之後的。

<div>
	<ol>
		<li>1</li>
		<li>5</li>
		<li>2</li>
	</ol>
	一些文字（屬於div）
	<ul>
		<li>4</li>
		<li>6</li>
		<li>0</li>
	</ul>
</div>

兩個元素之間的文字內容不會影響相鄰兄弟結合符起作用。

html > body ol + ul,
html > body > ol {
	margin: 0 auto;
	}

偽類和偽元素

利用這些選擇器，可以為文件中不一定具體存在的結構指定樣式，或者為某些元素（甚至是文件本身）的狀態所指示的幻像類指定樣式。

偽類選擇器

偽類（pseudo-class）
偽類選擇器（pseudo-class selector）
a元素為例：

a.visited {
	color: red;
	}
<a href="http://www.w3.org/" class="visited">W3C Web site</a>

這種方法要求每次訪問一個新頁面時都要修改錨的類。

a:visited {
	color: red;
	}

CSS定義了偽類，使已訪問頁面的錨就好像已經有一個“visited”類一樣。

連結偽類

偽類名			描述
:link			指示作為連結（即有一個href屬性）並指向一個未訪問地址的所有錨。
				注意，有些瀏覽器可能會不正確地將:link解釋為指向任何超連結，包括
				已訪問和未訪問的超連結
:visited		指示作為已訪問地址超連結的所有錨

<body link="purple" vlink="silver">

等同於

a:link {
	color: purple;
	}
a:visited {
	color: silver;
	}

動態偽類

根據使用者行為改變文件的外觀。

偽類名		描述
:focus		指示當前擁有輸入焦點的元素，也就是說，可以接受鍵盤輸入
			或者能以某種方式啟用的元素
:hover		指示滑鼠指標停留在哪個元素上，例如，滑鼠指標可能停留在一個超連結上
			:hover就會指示這個超連結
:active		指示被使用者輸入啟用的元素，例如，滑鼠指標停留在一個超連結上時，如果
			使用者點選滑鼠，就會啟用這個超連結，:active將指示這個超連結

偽類的順序很重要，建議是：link-visited-focus-hover-active
動態偽類可以應用到任何元素。

動態樣式的實際問題

CSS規範指出，文件第一次顯示之後，使用者代理不必重繪文件。
（可能造成設計的實際效果與預期不一致）

選擇第一個子元素

靜態偽類：first-child
選擇元素的第一個子元素

<div>
	<p>你好漂亮</p>
	<ul>
		<li>Insert key</li>
		<li>是<strong>沙漠</strong></li>
		<li>Yes</li>
	</ul>
	<p>睡覺《惡魔》<em>不</em>好</p>
</div>

/*將作為某元素第一個子元素的所有p元素設定為粗體*/
p:first-child {
	font-weight: bold;
	}
/*將作為某個元素（在HTML中，這肯定是一個ol或ul元素）
	第一個子元素的所有li元素變成大寫*/
li:first-child {
	text-transform: uppercase;
	}

示例圖

作為第一個子元素的元素包括第一個p、第一個li和strong及em元素。

我覺得可以理解為第一次出現這個元素，至於從哪裡開始找，可以在前面新增內容，如：

html > body div.main p:first-child {
	color: green;
	}

根據語言選擇

lang()偽類
從對應的模式來講，:lang() 偽類就像是 |= 屬性選擇器。

/*把所有法語元素變成斜體*/
*:lang(fr) {
	font-style: italic;
	}

在需要語言特定的樣式時，偽類選擇器比屬性選擇器好。
原因：設定語言不止有lang屬性，還可以是HTTP首部（xml:lang）、META元素等。

結合偽類

用哪種順序並不重要。

a:link:hover:lang(de) {
	color: gray:
	}

注意：互斥的偽類不要結合在一起使用。使用者代理器會自動忽略。

a:link:visited

偽類選擇器

偽元素能夠在文件中插入假想的元素，從而得到某種效果。
CSS2.1中定義的4個偽元素：
1.設定首字母樣式（:first-letter）
2.設定第一行樣式（:first-line）
3.設定之前元素的樣式（:before）
4.設定之後元素的樣式（:after）

設定首字母樣式
設定一個塊級元素首字母的樣式，而且僅對該首字母設定樣式：

p:first-letter {
	color: red;
	}

每一段的第一個字母變成紅色

<p>abcs</p>
<p>fggdgs</p>

示例圖片2

設定第一行的樣式

<div style="width: 100px;">
	<p>為了放不下我順便寫幾行字</p>
</div>

p:first-line {
	color: purple;
	}

示例圖片3

:first-letter和:first-line的限制

在CSS2中，:first-letter和:first-line偽元素只能應用於標記或段落之類的塊級元素，而不能應用於超連結等的行內元素。
在CSS2.1中，:first-letter能應用到所有元素。
能應用的CSS屬性限制表：

:first-letter						:first-line
所有font屬性							所有font屬性
color								color
所有background屬性					所有background屬性
所有margin屬性						word-spacing
所有padding屬性						letter-spacing
所有border屬性						text-decoration
text-decoration 					vertical-align
vertical-align(如果float設定為none)	text-transform
text-transform						line-height
line-height							clear（僅適用於CSS2；CSS2.1已去除）
float								text-shadow（僅適用於CSS2）
letter-spacing（CSS2.1中新增）
word-spacing（CSS2.1中新增）
clear（僅適用於CSS2；CSS2.1已去除）
text-shadow（僅適用於CSS2）

設定之前和之後元素的樣式

h2:before {
	content: "}}";
	color: silver;
	}

h2:after {
	content: " the end.";
	color: silver;
	}

結構和層疊

每個文件都會生成一個結構樹，有了結構樹，選擇器才能起作用，這也是CSS另一個重要方面（即繼承）的核心。

特殊性

同一個元素可以使用兩個或多個規則來選擇，每個規則都有其自己的選擇器。
特殊性用來決定元素應用多個樣式規則中的哪一些規則。
選擇器的特殊性由瀏覽器本身的元件確定。
特殊值表述為4個部分，如：0，0，0，0。

對於選擇器中給定的各個ID屬性值，加0，1，0，0。
對於選擇器中給定的各個類屬性值、屬性選擇或偽類，加0，0，1，0。
對於選擇器中給定的各個元素和偽元素，加0，0，0，1。（偽元素是否有特殊性？在這方面CSS2有些自相矛盾，不過CSS2.1很清楚地指出，偽元素有特殊性，而且特殊性為0，0，0，1。）
結合符和通配選擇器對特殊性沒有任何貢獻。

宣告和特殊性

一旦確定一個選擇器的特殊性，這個值將授予其所有相關宣告。
即，使用者代理器會把規則“解組”為單獨的規則，再把特殊值賦給它們。

h1, 
h2.section {
	color: silver;
	background: black;
	}

解組：

h1 { color: silver;}
h1 {background: black;}
h2.section { color: silver;}
h2.section {background: black;}

通頻選擇器特殊性

根本就沒有特殊性，甚至連0特殊性都沒有。因此對選擇器的總特殊性沒有任何影響。

內聯樣式特殊性

特殊性比所有其他宣告的特殊性都高，特殊性的第一個0是為內聯樣式保留的。1，0，0，0。

重要性

!important

p.dark {
	color: #333 !important;
	background: white;
	}

繼承

樣式不僅應用到指定的元素，還會應用到它的後代元素。

ul { color: gray;}

示例圖片4

邊框不能繼承
margin、border、padding之類的。
0特殊性比無特殊性要強。

繼承bug

以下規則會導致文件中除表之外的所有文字都有更小的字型：

body {font-size: 0.8em;}

改進：

body，
table,
th,
td {
	font-size: 0.8em;
}

通配選擇器（特殊性0）的規則會覆蓋繼承（無特殊性）的規則。

使用者代理的超連結樣式可能包含以下規則：

a:link {color:blue;}

所以，以下樣式不會改變a連結文字的樣式：

#toolbar {
	color: white;
	background:black;
	}

改進：

#toolbar {
	color: white;
	background:black;
	}
#toolbar a:link {
	color: white;
	}

層疊

特殊性相同的兩個規則（就近原則）。
1.有!important的獲勝
2.宣告的順序越後，優勝。

按權重和來源排序

宣告權重方面要考慮5級。權重由大到小的順序依次為：
1.讀者的重要宣告
2.創作人員的重要宣告
3.創作人員的正常宣告
4.讀者的正常宣告
5.使用者代理宣告

按特殊性排序

較高特殊性強於較低特殊性

按順序排序

文件中包含的規則比匯入的規則權重高
可以以此解釋連結樣式順序：link-visited-focus-hover-active、link-visited-hover-active（LVHA）

其實:link和:visited的順序並不重要，可以是LVHA和VLHA，但是建議LVHA。

值和單位

1.數字
2.百分數
3.顏色（命名顏色、#十六進位制程式碼、rgb()、rgba()）
rgb(a,b,c)：
裡面a、b、c引數可以是百分數和數字(0-255)。
留意：Web安全色。

長度單位

1.絕對長度單位：

英寸（in）
釐米（cm）
毫米（mm）
點（pt）：印表機和打字機使用，一英寸=72點。
派卡（pc）：印刷術語。1派卡=12點。

2.相對長度單位

em（em-height）：預設等於給定字型font-size的值。在設定字型大小時，em的值會相對於父元素的字型大小改變。
ex（x-height）：字型中小寫x的高度。
px

em和ex的實際問題

一般取em值的一半作為ex的值。（因為ex的計算相對困難）

畫素長度

參考畫素：90ppi
印表機：96ppi

URL

1.相對URL（relative URL）
2.絕對URL（absolute URL）
一個位於http://www.waffles.org/toppings/tips.html的HTML文件，它包含一個指向樣式表http://www.waffles.org/styles/basic.css的連結：

<link rel="stylesheet" type="text/css" 
href="http://www.waffles.org/styles/basic.css">

在檔案basic.css中有一個@import語句指向另一個樣式表：

@import url(special/toppings.css);

則實際要匯入的樣式表位於：
http://www.waffles.org/styles/special/toppings.css
而不是：
http://www.waffles.org/toppings/special/toppings.css

關鍵字

一個值需要用某個詞來描述，這種詞就稱為關鍵字。
none、normal之類，一個屬性的關鍵字於另一個屬性的關鍵字如果相同，可能代表不同行為。

inherit

CSS2.1中所有屬性共有的關鍵字。
inherit使一個屬性的值於其父元素的值相同。
（我怎麼覺得很雞肋啊）
正常情況下，直接指定的樣式總會優先於繼承的樣式，但是通過使用inherit可以把情況反過來。

CSS2單位

1.角度值

度（deg）
梯度（grad）
弧度（rad）

2.時間值

毫秒（ms）
秒（s）

3.頻率值

赫茲（Hz）
兆赫（MHz）

URI（Uniform Resource Identifier，統一資源識別符號）
URL（Uniform Resource Locator，統一資源定位符）

字型

有很多字型，它們的分辨度也不是很高，字型的屬性分辨度也不是很高。所以CSS為字型問題提供一些解決機制。

字體系列

除了各種特定字體系列外（如Times、Verdana、Helvetica或Arial），CSS還定義了5種通用字體系列。

Serif字型：字型成比例，而且有上下短線。
Sans-serif字型：字型成比例，而且沒有上下短線。
Monospace字型：字型不成比例。
Cursive字型：模仿人的手寫體。
Fantasy字型：無法用任何特徵來定義。
成比例：字型中的所有字元根據其不同大小有不同的寬度。

使用通用字體系列

使用屬性font-family在文件中採用上述任何字體系列。

指定字體系列

通過結合特定字型名和通用字體系列，可以建立與你們預想的完全相同（或者至少很接近）的文件。

h1 {font-family: Georgia,serif;}

當沒有Georgia字型時，則系統會選另一種serif字型。

使用引號
當一個字型名中有一個或多個空格（如New York），或者如果字型名包括#或$之類的符號，才需要在font-family宣告中加引號。
至於使用單引號還是雙引號，這兩種都是可以接受的。
在style中使用的時候不能和style使用相同的引號。

字型加粗

font-weight：

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit

Zurich字型可以直接使用變形字型來加粗：

Zurich Bold
Zurich Black
Zurich UltraBlack
Zurich Light
Zurich Regular

加粗如何起作用

400定義等價於normal
700定義等價於bold
會尋找不同粗細程度的字型，使用可能設定多個值看起來字型粗細差不多。
變形詞有：Normal、Regular、Roman或Book：400、Medium：500等
font-weight是可以繼承的。

讓字型更粗

bolder屬性值。使用者代理首先必須確定從父元素繼承的font-weight值。
上移規則：有更粗字型則移到更粗字型對應的字號，沒有就加100，直到900不可上升。

讓字型更細

lighter屬性值。粗度下移。

字型大小

font-size屬性：

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<length>
<percentage>

字型大小由一個em框來確定。

絕對大小

如果medium=10px；
則large=15px；
CSS2中縮放因子可能介於1.0~1.2之間。

相對大小

larger和smaller

百分數和大小

百分數值總是根據從父元素繼承的大小進行計算。
百分數一般是取最接近的整數。
em是和百分數一樣的規則。
1em=100%

字型大小和繼承

font-size可以繼承。不過繼承的是計算值而不是百分數。
如果有多級繼承，取整錯誤將逐漸積累。

使用長度單位

以下所有font-size宣告都是等價的：

p.one {font-size: 36pt;}
p.two {font-size: 3pc;}
p.three {font-size: 0.5in;}
p.four {font-size: 1.27cm;}
p.five {font-size: 12.7mm;}

由於不同作業系統的點不一樣大和顯示器解析度不同的原因，一般使用畫素值來指定字型大小。
使用畫素大小保持文字和圖形等高

風格和變形

font-style和font-variant

有風格的字型

font-style：

italic（斜體）
oblique（傾斜）
normal（豎直，最好描述為“非斜體或傾斜的文字”）
inherit（繼承）
斜體和傾斜不一樣，傾斜只是將豎直的字型進行簡單的計算得到而已。

字型變形

font-variant：

small-caps（要求使用小型大寫字母文字）
normal（正常文字）
inherit

h1 {font-variant: small-caps;}
h1 code,
p {font-variant: normal;}

<h1>The Uses of <code>font-variant</code> On the Web</h1>
<p>
The property <code>font-variant</code> is very interesting... 
</p>

示例圖片6

大寫字母：更大的字母；
小寫字母：轉為小型大寫字母。
（與text-transform: uppercase;很類似，但是不一樣）

拉伸和調整字型

CSS2的屬性，CSS2.1已移除。
拉伸：font-stretch：

normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
expanded
extra-expanded
ultra-expanded
inherit

讓字型變得更胖或更瘦

拉伸字型字元：font-size-adjust：

<number>
none
inherit
當所用字型並非創作人員首選時，仍然保證可以辨識。（x-height）
公式：
宣告的font-size × （font-size-adjust值 ÷ 可用字型的方面值）= 調整後的font-size
方面值 = x-height ÷ font-size

font屬性

簡寫屬性。

[[<font-style> || <font-variant> || <font-weight>]?<font-size>
[/<line-height>]?<font-family>] | caption | icon | menu |
message-box | small-caption | status-bar | inherit

三個值：font-style、font-variant、font-weight可以任意順序。
font-size、font-family必須這個順序。

增加行高

line-height屬性（文字屬性，不是字型屬性）
可以作為font-size的一個補充值，並用一個斜線（/）與之分隔。

font-size必須在line-height之前。

適當地使用簡寫

在使用簡寫屬性font時，所有被忽略的值都會重置為其預設值。

使用系統字型

Web頁面結合使用者作業系統的配置。這些值用於取得作業系統的字型大小、字體系列、字型加粗、字型風格和字型變形，並將其應用到一個元素。

caption：用於有標題的控制元件，如按鈕。
icon：用於對圖示加標籤
menu：用於選單，即下拉選單和選單列表。
message-box：用於對話方塊。
small-caption：用於對小控制元件加標籤。
status-bar：用於視窗狀態條。

例：把一個按鈕的字型設定為與作業系統中的按鈕字型完全相同：

button {font: caption;}

可修改其中的單個值。

字型匹配

工作流程:

使用者代理建立（或訪問）一個字型屬性資料庫。
使用者代理取得應用了字型屬性的元素，並構建一個字型屬性列表，其中列出顯示該元素的必要字型屬性。
a.font-style
b.font-variant
c.font-weight
d.font-size
若在第2步中未匹配任何字型，使用者代理就會在這個字體系列中查詢下一個候選字型。如果找到，則重複第2步。
找到一個通用匹配，未包含元素所需的一切，回到步驟3，再回到步驟2。
沒有匹配，使用預設字型。

font-face規則

@font-face已經從CSS2.1中去除。太複雜。

4種確定文件使用字型的方法

字型名匹配
智慧字型匹配
字型合成
字型下載

@font-face (font-family: "Scarborough Fair";
src: url(http://www.example.com/fonts/ps/scarborough.ps);}

文字屬性

文字是內容，而字型用於顯示這個內容。

縮排和水平對齊

縮排文字：text-indent屬性
值：

<length>
<percentage>
inherit

所有元素的第一行都可以縮排一個給定長度，可以是負值。
一般地，可以為所有塊級元素應用text-indent，但無法將這個屬性應用到行內元素，影象之類的替換元素也無法應用text-indent屬性。
負值可以實現“懸掛縮排”：

p {
	text-indent: -4em;
	padding-left: 4em;
	}

百分數要相對於縮排元素父元素的寬度。
這個屬性可以繼承

水平對齊

text-align：
CSS2.1：

left（預設值。邊界呈鋸齒狀）
center
right
justify（兩端文字對齊）
inherit

CSS2：

left
center
right
justify（兩端文字對齊）
<string>
inherit

text-align不會控制元素對齊，而隻影響其內部內容。
是使用者代理（而不是CSS）來確定兩端對齊文字如何拉伸。

垂直對齊

line-height和vertical-align

行高

line-height屬性是指文字行基線之間的距離，而不是字型的大小，它確定了將各個元素框的高度增加或減少多少。

<length>
<percentage>
<number>
normal（預設值）
inherit

文字基線拉開的距離可能比line-height值更大。
line-height並不影響替換元素的佈局，不過確實可以應用到替換元素。

構造文字行

行間距 = line-height的計算值 - font-size的計算值。

指定line-height值

p {line-height: 1.5em;}

行高和繼承

line-height值從父元素繼承時，要從父元素計算，而不是在子元素上計算。

body {font-size: 10px;}
div {line-height: 1em; width:200px;}
/*計算結果是10px*/
p {font-size: 18px;}

<div>
	<p>這是一段為了測試打的文字，沒有什麼特別的，還有點囉嗦，當作練習打字</p>
</div>

示例圖片7

解決方法：指定一個數作為縮放因子。縮放因子將是繼承值而不是計算值。

body {font-size: 10px;}
div {line-height: 1.5; width:200px;}
/*計算結果是10px*/
p {font-size: 18px;}

<div>
	<p>這是一段為了測試打的文字，沒有什麼特別的，還有點囉嗦，當作練習打字</p>
</div>

示例圖片8

垂直對齊文字

vertical-align屬性：只應用於行內元素和替換元素。
vertical-align屬性不能繼承。
值：

baseline（要求一個元素的基線與其父元素的基線對齊）
sub（下標）
super（上標）
top（將元素行內框的頂端與行框的頂端對齊）
text-top（要對齊的元素的行內框頂端與預設文字框的頂端對齊）
middle（居中對齊）
bottom（將元素行內框的底端與行框的底端對齊）
text-bottom（要對齊的元素的行內框底端與預設文字框的底端對齊）
<percentage>（會把元素的基線（或者替換元素的底邊）相對於父元素的基線升高或降低指定的量（為該元素line-height的百分數））
<length>（把元素與對齊前相比上升或下降指定數值高度）
inherit

字母隔和字母間隔

word-spacing和letter-spacing

字母隔

word-spacing：每個單詞的間隔（中文沒有用，應該）

<length>
normal
inherit

字母間隔

letter-spacing：每個字母之間的間隔（每個漢字之間的間隔）

<length>
normal
inherit

間隔和對齊

word-spacing的值可能受text-align屬性值的影響。
letter-spacing的值不會受text-align屬性值的影響。

文字轉換

text-transform：

uppercase（大寫）
lowercase（小寫）
capitalize（每個單詞的首字母大寫）
none（預設值）
inherit

文字裝飾

text-decoration：

none（關閉所有裝飾）
[underline || overline || line-through || blink]（分別是：下劃線、上劃線、刪除線、文字閃爍）
inherit

怪異的裝飾

text-decoration不能夠繼承。
text-decoration和vertical-align搭配會更加奇怪，比如上劃線不會跟著文字一起移動。
使用none消除文字裝飾的行為是不符合規範的。

文字陰影

CSS2中的屬性，CSS2.1不保留。
text-shadow：可以接受一個顏色值和三個數值。

none
[<color> || <length><length><length>?,]*[<color> || <length><length><length>?]
inherit

text-shadow: green 5px 0.5em;

相對於文字向右偏移5畫素向下偏移0.5em的綠色陰影。

處理空白符

white-space：

normal（預設值，丟棄多餘的空白符）
nowrap（防止元素中的文字換行）
pre（保留多餘的空白符，包括回車）
pre-wrap（該元素的文字會保留空白符序列，文字行會正常地換行）
pre-line（像正常文字一樣合併空白符，但是保留換行符）
inherit

white-space屬性：

值			空白符			換行符			自動換行
pre-line	合併				保留				允許
normal		合併				忽略				允許
nowrap		合併				忽略				不允許
pre			保留				保留				不允許
pre-wrap	保留				保留				允許

文字方向

direction：影響塊級元素中文字的書寫方向、表中列布局的方向、內容水平填充其元素框的方向，以及兩端對齊元素中最後一行的位置。
只有unicode-bidi屬性設定為embed或bidi-override時才會應用direction屬性。

ltr（left to right）
rtl（right to left）
inherit

unicode-bidi

normal（預設值，元素不會對雙向演算法開啟附加的一層巢狀。對於行內元素，順序的隱式重排會跨元素邊界進行。）
embed（如果是一個行內元素，這個值會對於雙向演算法開啟附加的一層巢狀。這個巢狀層的方向由direction屬性指定。）
bidi-override（這會為行內元素建立一個覆蓋。對於塊級元素，將為不在另一塊中的行內後代建立一個覆蓋。）
inherit

基本視覺格式化

基本框

CSS假定每個元素都會生成一個或多個矩形框，這稱為元素框。
各元素框中心有一個內容區（content area）
這個內容區周圍有內邊距，邊框，外邊距。
邊框的寬度絕對不能負值。

包含塊

每個元素都相對於其包含快擺放。
包含塊就是一個元素的“佈局上下文”

<body>
	<div>
		<p>This is a paragraph.</p>
	</div>
</body>

p元素的包含塊是div元素，div的包含塊是body元素。

塊級元素

外邊界、外邊距、邊框、內邊距、內邊界、寬高。

水平格式化

width影響的是內容區的寬度，而不是整個可見的元素框。

水平屬性

margin-left
margin-right
border-left
border-right
padding-left
padding-right
width

只有3個屬性可以設定為auto：width、margin-left、margin-right。
width必須設定為auto或某種型別的非負值。

使用auto

可以用auto彌補實際值與所需總和的差距。

不只一個auto

比如將margin-left和margin-right設定為auto，width設定為值，則可以實現內容區水平居中。
一個外邊距和width設定為auto，則設定為auto的外邊距會減為0，width會設定為所需的值，使得元素完全填充其包含塊。
三個都是auto，則兩個外邊距都減為0，width儘可能寬。

負外邊距

子元素比父元素更寬。
設定為auto的右外邊距計算為負值的情況：如果其他屬性的值要求右外邊距為負，以便滿足元素不能比其包含塊更寬的需求。

div {
	width: 400px;
	border: 3px solid black;
	}
p.wide {
	margin-left: 10px;
	width: 500px;
	margin-right: auto;
	border: 3px solid gray;
	}

<div>
	<p class="wide">這是一段文字，不會很長，也不會很短，就是有點無聊。</p>
</div>

示例圖片9

此時margin-right為-116px。

如果左外邊距為負，不僅段落會超出div的邊框，還會超出瀏覽器視窗本身的邊界！

百分數

如果width、內邊距、外邊距設定為百分數值，會應用同樣的基本規則。
邊框的寬度不能是百分數，而只能是長度。

替換元素

非替換元素的所有規則同樣適用於替換塊元素，只有一個例外：如果width為auto，元素的寬高則是內容的固有寬高。
當width和height只設置一個時，另一個為auto。

垂直格式化

一個元素的預設高度由其內容決定。
在CSS中，可以對任何塊級元素設定顯式高度：
1.如果指定高度 > 內容所需高度：
多餘的高度產生一個視覺效果。
2.如果指定高度 < 內容所需高度：
預設：增加滾動條。
具體行為：取決於overflow屬性的值。

垂直屬性

margin-top
border-top
padding-top
height
padding-bottom
border-bottom
margin-bottom

只有3個屬性可以設定為auto：height、margin-top、margin-bottom。
有無設定border-style屬性的邊框寬度：
有：medium
無：0

如果在一個正常流中一個塊元素的margin-top或margin-bottom設定為auto，它會自動計算為0。

百分數高度

將元素垂直居中的唯一方法就是把上、下外邊距都設定為一個百分數（比如內容區50%，上下外邊距25%）。

auto高度

在最簡單的情況下，如果塊級正常流設定為height：auto，顯示時其高度將恰好足以包含其內容（包括文字）的行盒。
如果塊級正常流元素的高度設定為auto，而且只有塊級子元素，其預設高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。
（因此，子元素的外邊距會“超出”包含這些子元素的元素。）

合併垂直外邊距

這種合併行為只應用於外邊距。
相鄰外邊距會沿著豎軸合併。
也可以用“重疊”代替“合併”的說法。

負外邊距

負外邊距確實對垂直格式化有影響，而且它們會影響外邊距如何合併。
都負：取絕對值大的負值。一正一負：正減去負的絕對值。

文件中後出現的正常流元素可能會覆蓋較早出現的元素（如果這兩個元素重疊）。

列表項

CSS2引入了專門為解決列表項樣式問題而設計的一些屬性，如marker-offset（CSS2.1中已去除）。

在列表項內容之外，處理為內容開始處的一個內聯標誌的屬性：list-style-position。

行內元素

非替換元素和替換元素在內聯內容方面的處理稍有不同。

行佈局

一個挨著一個放。上下邊框可能重疊。

基本術語和概念

匿名文字（anonymous text）：指所有未包含在行內元素中的字串。
em框：em框在字型中定義，也稱字元框（character box）。
內容區：元素中各字元的em框串在一起構成的框。
行間距（leading）：font-size值 - line-height值。
行內框：這個框通過向內容區增加行間距來描述。
行框：這是包含該行中出現的行內框的最高點和最低點的最小框。

行內框在行中根據其vertical-align屬性值垂直對齊。

確定元素行內框高度：行間距處以2，分別應用到em框的頂部和底邊，加上替換元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width和border-bottom-width值。
找到基線位置
確定偏移量
計算行框高度

行內格式化

可以為一個塊級元素設定line-height值，並將這個值應用到塊中的所有內容，而不論內容是否包含在行內元素中。

行內非替換元素

建立框
font-size值確定內容區的高度。
line-height值行內框高度。
行框：兩者最大值。
垂直對齊
如果改變行內框的垂直對齊，會應用同樣的高度確定原則。

vertical-align各個關鍵字值的效果描述如下：

top：將元素行內框的頂端與包含該元素的行框的頂端對齊。
bottom：將元素行內框的底端與包含該元素的行框的底端對齊。
text-top：將元素行內框的頂端與父元素內容區的頂端對齊。
text-bottom：將元素行內框的底端與父元素內容區的底端對齊。
middle：將元素行內框的垂直中點與父元素基線上0.5ex處的一點對齊。
super：將元素的內容區和行內框上移。上移的距離未指定，可能因使用者代理的不同而不同。
sub：與super相同，只不過元素會下移而不是上移。
<percentage>：將元素上移或下移一定距離，這個距離由相對於元素line-height值指定的一個百分數確定。

<div>
	<p>這是一段文字，將用來演示前面提到的那些值的實際效果：
	<span class="s1">第一個值，top</span>
	<span class="s2">第二個值，bottom</span>
	<span class="s3">第三個值，text-top</span>
	<span class="s4">第四個值，text-bottom</span>
	<span class="s5">第五個值，middle</span>
	<span class="s6">第六個值，super</span>
	<span class="s7">第七個值，sub</span>
	<span class="s8">第八個值，percentage</span>
</div>

.s1{vertical-align: top;}
.s2{vertical-align: bottom;}
.s3{vertical-align: text-top;}
.s4{vertical-align: text-bottom;}
.s5{vertical-align: middle;}
.s6{vertical-align: super;}
.s7{vertical-align: sub;}
.s8{vertical-align: 50%;}

圖片例項1
圖片例項2
圖片例項3

管理line-height

改變一個行內元素的line-height可能導致文字行相互重疊。
解決方法：
1.對font-size有改變的元素結合使用em單位。
2.增加段落的line-height。

縮放行高

將line-height設定為一個原始數字值。這個數字值就是縮放因子。

增加框屬性

行內元素的邊框邊界由font-size而不是line-height控制。
外邊距不會應用到行內非替換元素的頂端和底端，它們不影響行框的高度。
如果邊距有背景，由於上下邊距不計入高度的原因，可能會對文字造成遮蓋。

行內替換元素

一般行內替換元素有固定的高度和寬度。
替換元素可以增加行框高度，但不影響line-height的值。然而，行內替換元素還是有一個line-height值。因為行內元素需要這個值，從而在垂直對齊時能正確地定位元素。

增加框屬性

為行內替換元素增加內邊距、邊框和外邊距會增大其行內框。
負外邊距會使替換元素的行內框小於正常大小。

替換元素和基線

預設地，行內替換元素位於基線上。

改變元素顯示

display：

none（無，不顯示）
inline（初始值，行內元素）
block（塊級元素）
inline-block（行內塊元素，塊級元素和行內元素的混合。作為一個行內框與其他元素和內容相關。效果類似img）
list-item（列表項元素）
run-in（塊/行內元素混合，可以使某些塊級元素成為下一個元素的行內部分。）
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
inherit

改變的只是顯示角色，而不是其本質。
下面是無效標記：

<a href="www.baidu.com" style="diaplay: block;">
<p style="display: inline;">this is wrog!</p>
</a>

run-in例項：

<h1 style="display: run-in;">這是一個標題</h1>
<p>這是正文部分，很多文字那種ABC地方打掃房間薩芬
立刻解放司法解釋法律手段回覆發羅拉費
</p>

示例圖片10
沒有達到預計效果：預計效果是標題和正文同行。
注意：只有當run-in框後面是一個塊級框時run-in才起作用。

計算值

如果元素是浮動元素或定位元素，display的計算值可以改變。

內邊距、邊框和外邊距

克服表格佈局的不足，使用邊框佈局。

基本元素框

所有文件元素都生成一個矩形框，稱為元素框（element box），它描述了一個元素在文件佈局中所佔的空間大小。

寬度和高度

盒子模型，width和height（應用於塊級元素和替換元素）
值：<length>、<percentage>（height沒有）、auto、inherit

外邊距與內邊距

元素框在元素之間只提供了很少的空間，通過增加內、外邊距來增大元素之間的距離。

外邊距

margin：

<length>
<percentage>
auto
inherit

margin可以接受任何長度度量，可以是畫素、英寸、毫米或em。

長度值和外邊距

四個值的順序（逆時針）：

margin：top right bottom left

百分數和外邊距

百分數是相對於父元素的width計算的。

值複製

如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。

單邊外邊距屬性

margin-left
margin-right
margin-top
margin-bottom

負外邊距和合並外邊距

負外邊距會導致元素框超出父元素，或者與其他元素重疊。

外邊距和行內元素

外邊距可以應用到行內元素，不過效果稍有不同。
對非替換元素應用外邊距，對行高沒有任何影響，在外邊距透明時，上下外邊距沒有視覺效果、左右外邊距會與前後內容有間距或重疊。
為替換元素應用外邊距會影響行高。

邊框

元素的邊框就是圍繞元素內容和內邊距的一條或多條線。
每個邊框有3個方面：寬度或粗細、其樣式或外觀、顏色。
預設：medium（2px）、none、元素本身的前景色。

邊框和背景

CSS規範清楚地指出元素的背景會延伸到邊框邊界之外。

有樣式的邊框

border-style：

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

邊框的顏色要基於元素的color值。

多種樣式

按照top-right-bottom-left的順序。

border-style： solid dashed dotted double；

單邊樣式

border-top-style
border-right-style
border-bottom-style
border-left-style

邊框寬度

border-width：

thin
medium
thick
<length>
inherit

單邊屬性：

border-top-width
border-right-width
border-bottom-width
border-left-width

根本沒有邊框

當border-style設定為none時，border-width會變為0。

邊框顏色

border-color：

<color>
transparent（透明邊框，有寬度但是不可見。）
inherit

簡寫邊框屬性

border-top
border-right
border-bottom
border-left

全域性邊框

border：

[<border-width> || <border-style> || <border-color>] | inherit

邊框和行內元素

規則很大程度上與外邊距和行內元素的相應規則相同。

內邊距

padding：

<length>
<percentage>
inherit

元素背景會延伸到邊框的外邊界，到達邊框之前必須先經過內邊距。
內邊距不合並。

百分數值和內邊距

百分數值要相對於其父元素的width計算。

單邊內邊距

padding-top
padding-right
padding-bottom
padding-left

內邊距和行內元素

對於有背景色和內邊距的行內非替換元素，背景可以向元素上面和下面延伸。

內邊距和替換元素

可以對替換元素應用內邊距，內邊距會圍繞其內容。