特殊性
一個(gè)元素可能被多個(gè)選擇器定義，那么最終生效的樣式是哪一種呢蛇捌？
特殊性的值表述為4個(gè)部分顾画，如0.0.0.0：
- 對(duì)于選擇器中給定各個(gè)ID屬性值：加0.1.0.0
- 對(duì)于選擇器中給定的各個(gè)類屬性值衙伶、屬性選擇器或偽類：加0.0.1.0
- 對(duì)于選擇器中給定的各個(gè)元素和偽元素：加0.0.0.1
- 內(nèi)聯(lián)樣式的特殊性：加1.0.0.0
- 結(jié)合符（無特殊性）和通配選擇器（0特殊性）沒有特殊性貢獻(xiàn)
- 非CSS表現(xiàn)的樣式（如HTML的<font>標(biāo)簽）的特殊性為0
如：
h1 {color: red} -> 0.0.0.1
p em {color: purple}-> 0.0.0.2
.grape {color: purple} -> 0.0.1.0
p.bright em.dark {color: purple} -> 0.0.2.2
特殊性高的樣式栋猖，優(yōu)先采用蕴潦。
思考：
- 給出以下樣式的特殊性
html > body table tr[id="display-name"] td ul > li {color: maroon}
- 0.0.0.13與0.0.1.0，誰的特殊性更高俘闯？
- 屬性為active的元素最終是什么顏色潭苞？
#acitve {color: red}
*[id="active"] {color:green}
重要性
如果一個(gè)屬性特別重要，不希望被其他屬性所覆蓋真朗，則我們可以將其聲明為重要屬性此疹。方法為在樣式聲明后面加上!important。
如：
.alert {color: red !important;}
.info-box {color: #ccc !important; border: 1px solid blue !important;}
!important不會(huì)貢獻(xiàn)任務(wù)特殊性遮婶，它與特殊性可以理解為不同維度的東西蝗碎。任何樣式表中，聲明了重要性的屬性會(huì)被自動(dòng)歸為一組（“重要”組）旗扑，未聲明重要性的樣式被歸為另一組（“非重要”組）蹦骑。重要組中的樣式，其優(yōu)先級(jí)始終高于非重要組臀防。對(duì)于同組中的樣式眠菇，如果產(chǎn)生了沖突，則在同一組內(nèi)進(jìn)行特殊性排名袱衷，特殊性高者獲勝捎废。
繼承
在父無素上定義的屬性，會(huì)延著文檔結(jié)構(gòu)樹向其子孫元素傳遞祟昭，這稱為樣式的繼承缕坎。
為了防止布局混亂以及過多的工作，大多數(shù)框模型屬性（如外邊距篡悟、內(nèi)邊距、背景和邊框等）都不繼承匾寝。
繼承的值不具有任何特殊性搬葬。沒有特殊性與特殊性為0有本質(zhì)的區(qū)別，舉個(gè)例子：
* {color: red}的特殊性為0.0.0.0艳悔，我們假設(shè)有這樣一個(gè)樣式h1 {color: gray}急凰，那么下面這個(gè)例子中的em元素應(yīng)該是什么顏色的呢？
<h1>這是為了展示<em>0特殊性</em>與<em>無特殊性</em>樣式的區(qū)別而使用的例子</h1>
答案：紅色猜年。
這個(gè)例子說明通配符對(duì)于樣式的繼承有“短路”的效果抡锈，所以要謹(jǐn)慎使用通配符來指定樣式。這也充分說明了為何你在指定了父級(jí)元素的字體顏色的情況下乔外，超鏈接仍然會(huì)呈現(xiàn)為藍(lán)色床三。那是因?yàn)闉g覽器的默認(rèn)樣式表中可能指定了<a>的樣式，即便其特殊性為0.0.0.1杨幼，它也完勝了繼承所帶來的效果撇簿。所以請(qǐng)牢記聂渊，繼承的值不具有任何特殊性。
層疊
如果特殊性相等的兩個(gè)規(guī)則同時(shí)應(yīng)用到了同一個(gè)元素四瘫，這種情況怎么辦呢汉嗽？“層疊”詞就體現(xiàn)出來了。元素的樣式可以理解為一層一層疊加的效果找蜜，最終由繼承和特殊性來決定哪種樣式在“最上層”饼暑。CSS2.1中，層疊的規(guī)則為：
- 有
!important標(biāo)志的樣式洗做，其權(quán)重高于無!important標(biāo)志的樣式撵孤。 - 從來源來講，正常情況下竭望，創(chuàng)作人員的樣式高于讀者樣式邪码、讀者樣式高于瀏覽器默認(rèn)樣式。但是有
!important樣式的讀者樣式高于所有其的樣式咬清，包括含有!important標(biāo)記的創(chuàng)作人員樣式闭专。 - 按特殊性的值對(duì)應(yīng)用到指定元素的所有的樣式聲明進(jìn)行排序。
- 出現(xiàn)越晚的樣式聲明旧烧，其權(quán)重越大影钉。
字體
字體系列
Serif字體
字體成比例，而且有上下短線掘剪。如果字體中的所有字符根據(jù)其不同的大小有不同的寬度平委，則稱該字體是成比例的。比如我們?cè)贠ffice中常用的Times New Roman字體就是Serif字體的一種夺谁。
Sans-serif字體
字體成比例廉赔，而且沒有下短線。
Arial字體就屬于Sans-serif字體匾鸥。
Monospace字體
字體不成比例蜡塌，它們通常用于模擬打字機(jī)打出的文本。
我們編程時(shí)常使用的Courier New字體和Consolas字體就屬于Monospace字體勿负。
指定字體通常使用font-family屬性指定一個(gè)通用字體系列馏艾。比如font-family: Arial, Sans-serif, 'Times New Roman', Serif。這樣奴愉，瀏覽器會(huì)根據(jù)指定的順序去匹配最貼合的字體進(jìn)行顯示琅摩。
如果font-family中的字體名稱與某些關(guān)鍵字匹配，則需要用引號(hào)將字體名稱包含起來锭硼。作為一種最佳實(shí)踐房资，推薦將字體都使用引號(hào)包含起來。
字體粗細(xì)
樣式：font-weight
關(guān)于字體的粗細(xì)账忘，CCS中只定義了9個(gè)等級(jí)志膀，即從100至900的整百數(shù)熙宇。當(dāng)然，也可以使用normal溉浙、bold等關(guān)鍵字來指定烫止。但是歸根結(jié)底，關(guān)鍵字也會(huì)被映射至某一個(gè)數(shù)值所代表的字體粗細(xì)上戳稽。
由于不是每一種字體都定義了這9個(gè)級(jí)別的粗細(xì)馆蠕，所以很有可能你在指定了不同的粗細(xì)級(jí)別后，發(fā)現(xiàn)字體的粗細(xì)并無區(qū)別惊奇。CSS規(guī)定互躬，粗細(xì)數(shù)值大的字體，至少在渲染的時(shí)候不會(huì)細(xì)于粗細(xì)值比它小的字體颂郎。
如果想讓元素字體的粗細(xì)呈現(xiàn)一個(gè)階梯增長(zhǎng)的樣式吼渡，可以使用bolder對(duì)字體粗細(xì)進(jìn)行設(shè)計(jì)。這樣乓序，被指定樣式的元素的字體粗細(xì)會(huì)比其從父級(jí)元素繼承的字體粗一個(gè)等級(jí)（至少在值上會(huì)比父級(jí)元素大一些）寺酪；同理，可以使用lighter來使當(dāng)前元素的字體比父元素字體更細(xì)替劈。
雖然可以使用相對(duì)粗細(xì)來指定字體的粗細(xì)程度寄雀，但是CSS規(guī)定，使用相對(duì)粗細(xì)的字體最初不超過900陨献，最細(xì)不低于100盒犹。
字體大小
樣式：font-size
絕對(duì)大小
font-size共有7個(gè)絕對(duì)大小值，分別為xx-small眨业、x-small急膀、small、medium坛猪、large脖阵、x-large、xx-large墅茉。
CSS1中規(guī)定，一個(gè)絕對(duì)大小與下一個(gè)絕對(duì)大小之間的差距應(yīng)當(dāng)是向上1.5或向下0.66呜呐。CSS2中規(guī)定這個(gè)差距介于1.0~2.0之間就斤，由用戶代理決定。
相對(duì)大小
除了使用絕對(duì)大小來指定字體大小外蘑辑，也可以使用相對(duì)大醒蠡（smaller、larger）來指定元素相對(duì)于其父元素字體來大小洋魂。
與字體粗細(xì)不同绷旗，相對(duì)大小的計(jì)算值最終可以小于xx-small喜鼓，也可以大于xx-large。
百分?jǐn)?shù)大小
與相對(duì)大小相似衔肢，百分?jǐn)?shù)值總是根據(jù)從父元素繼承的大小來計(jì)算庄岖。
盡管在CSS中的font-size是可以繼承的，但是其繼承的是計(jì)算值而不是百分?jǐn)?shù)角骤。
使用長(zhǎng)度
使用長(zhǎng)度單位來指定字體大小時(shí)隅忿，可以使用的單位有pt、pc邦尊、in背桐、cm、mm和px等蝉揍。
在PC上链峭，我們使用較多的為px，即像素又沾。其他單位經(jīng)常用于打印或其他媒體弊仪。
font屬性
font屬性允許使用多個(gè)值對(duì)字體進(jìn)行設(shè)置，同時(shí)設(shè)計(jì)字體大小捍掺、粗細(xì)撼短、變形等屬性。font的前三個(gè)值（font-style挺勿、font-variant和font-weight）的順序可以隨意曲横，甚至可以省略。瀏覽器會(huì)根據(jù)用戶使用的值自動(dòng)判斷該值是屬于哪一個(gè)屬性不瓶。但是對(duì)于最后的兩個(gè)值禾嫉，即font-size和font-family，要求他們必須以font-size在前蚊丐，font-family在后的順序出現(xiàn)熙参，同時(shí)這兩個(gè)值是font屬性的必填值。如果順序不正確麦备，或者某個(gè)值缺失孽椰，則整個(gè)font規(guī)則都是無效的，會(huì)被瀏覽器忽略凛篙。
在font屬性中指定font-size時(shí)黍匾，還可以以font-size/line-height的形式順帶指定行高。如14px/1.5呛梆，則會(huì)指定字體大小為14像素锐涯，同時(shí)行高為14px * 1.5 = 21px。
同時(shí)填物，我們還可以將font屬性指定為系統(tǒng)字體纹腌，如caption霎终、icon、menu升薯、message-box莱褒、small-caption、status-bar等字體覆劈，這樣就會(huì)將字體設(shè)置為與操作系統(tǒng)中的對(duì)應(yīng)控件相同的字體保礼。這在開發(fā)基于瀏覽器的桌面應(yīng)用時(shí)非常有用。
文本屬性
縮進(jìn)文本
樣式：text-indent
一般的责语，我們可以為所有的塊級(jí)元素應(yīng)用text-indent炮障，但是這個(gè)屬性無法應(yīng)用于行內(nèi)元素；圖像之類的替換元素上也無法應(yīng)用text-indent屬性坤候。
注：如果想要對(duì)行內(nèi)元素進(jìn)行“縮進(jìn)”胁赢，我們可以換而使用左內(nèi)邊距和左外邊距來達(dá)到類似的效果。
text-indent可以使用所有長(zhǎng)度單位（包括百分?jǐn)?shù)）白筹。但是請(qǐng)注意智末，當(dāng)使用百分?jǐn)?shù)時(shí)，百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素的父元素的寬度徒河。而且系馆，text-indent只會(huì)用于元素的第一行。即便是元素中包含了換行符顽照，另起的一行也不會(huì)再有縮進(jìn)效果由蘑。
水平對(duì)齊
樣式：text-align
text-align會(huì)影響元素中文本行的相對(duì)對(duì)齊方式。需要注意的是代兵，text-align只能用于塊級(jí)元素尼酿，而無法應(yīng)用于行內(nèi)元素。
text-align不會(huì)影響元素本身的位置植影，只會(huì)影響元素內(nèi)部?jī)?nèi)容的位置裳擎。如使用text-align: center會(huì)使元素內(nèi)部的內(nèi)容居中，但是不會(huì)影響元素自身的位置思币。
垂直對(duì)齊
行高
line-height屬性是指文本行基線之間的距離鹿响，line-height和字體大小的差值就是我們所說的行間距雨膨。在應(yīng)用于塊級(jí)元素的時(shí)候诊霹，line-height定義了元素中文本基本之間的最小距離，line-height不會(huì)影響替換元素的布局策吠，但是確實(shí)可以應(yīng)用于替換元素各墨。
文本行中的每個(gè)元素都會(huì)生成一個(gè)內(nèi)容區(qū)，這由字段的大小決定启涯。這個(gè)內(nèi)容區(qū)會(huì)生成一個(gè)行內(nèi)框贬堵，如果不存在其他因素恃轩，行內(nèi)框就完全等于元素的內(nèi)容區(qū)。由line-height產(chǎn)生的行間距就是增加或減少各行內(nèi)框高度的因素之一黎做。
要確定一個(gè)給定元素的行間距叉跛，只需要將line-height的計(jì)算值減去font-size的計(jì)算值。這個(gè)值可以是負(fù)的蒸殿。我們將行間距除以2筷厘，再均分至一行的頂部和底部，其結(jié)果就是元素的行內(nèi)框宏所。
一旦確定了每個(gè)元素的行內(nèi)框酥艳，在行框的構(gòu)造過程中就會(huì)考慮這些行內(nèi)框。行框的高度恰好足以包含最高的行內(nèi)框的頂端和最低的行內(nèi)框的底端爬骤。
當(dāng)發(fā)生line-height的繼承時(shí)充石，要從父元素計(jì)算其計(jì)算值，而不是從子元素計(jì)算其值霞玄。如：
body {font-size: 10px}
div {line-height: 1em}
p {font-size: 18px}
其HTML結(jié)構(gòu)為 body > div > p骤铃，則p的行高應(yīng)該為10px，而非18px坷剧。想要克服這樣的現(xiàn)象惰爬，在指定div的行高時(shí)，需要指定一個(gè)縮放因子：
div {line-height: 1}
這樣的話惫企，p的行高便為18px撕瞧。原因是當(dāng)為line-height指定一個(gè)數(shù)值時(shí)，縮放因子將是繼承值而不是計(jì)算值雅任。
垂直對(duì)齊文本
樣式：vertical-align
在CSS中风范，vertical-align屬性只應(yīng)用于行內(nèi)元素和替換元素，如圖像和表單輸入元素沪么。
vertical-align屬性不能繼承硼婿。
基線對(duì)齊
baseline要求一個(gè)元素的基線與其父元素的基線對(duì)齊。如果一個(gè)元素沒有基線（如圖像和表單）禽车，那么該元素的底端與其父元素的基線對(duì)齊寇漫。
上標(biāo)和下標(biāo)
super和sub只會(huì)使元素變?yōu)樯蠘?biāo)和下標(biāo)，即其基線相對(duì)于父元素的基線有所提升或下沉殉摔，但是字體本身的大小不會(huì)發(fā)生變化（注意與<sup>元素以及<sub>元素的區(qū)別）州胳。
底端對(duì)齊
bottom將元素行內(nèi)框的底端與行框的底端對(duì)齊。
text-bottom是將元素行內(nèi)框底端與行內(nèi)文本的底端對(duì)齊逸月。
頂端對(duì)齊
top將元素行內(nèi)框的頂端與行框的頂端對(duì)齊栓撞。
text-top是將元素行內(nèi)框頂端與行內(nèi)文本的頂端對(duì)齊。
居中對(duì)齊
middle往往應(yīng)用于圖像，它會(huì)所行內(nèi)元素框中的中點(diǎn)與父元素基線上方0.5ex處的一點(diǎn)對(duì)齊(ex為字體中“x"的高度)瓤湘。由于1ex通常都會(huì)被處理為0.5em瓢颅，所以middle會(huì)將元素的垂直中點(diǎn)與父元素基線上方0.25em處對(duì)齊。
百分?jǐn)?shù)
如果將vertical-align設(shè)置為一個(gè)百分?jǐn)?shù)弛说，則會(huì)把元素的基本（或替換元素的底邊）相對(duì)于父元素的基線升高或降低相對(duì)于該元素的line-height計(jì)算出的量挽懦。
長(zhǎng)度對(duì)齊
當(dāng)為vertical-align指定一個(gè)長(zhǎng)度時(shí)，表示將元素升高或降低指定的距離木人。需要注意的是信柿，垂直對(duì)齊文本能改變?cè)氐拇怪蔽恢茫菂s不會(huì)使元素成為另一行的一部分醒第，所有的垂直對(duì)齊元素都會(huì)影響行高渔嚷。（行框應(yīng)該足以包含最高的行內(nèi)框的頂端和最低的行內(nèi)框的底端，而垂直對(duì)齊方式影響的即是行內(nèi)框的高度）
文本轉(zhuǎn)換
樣式：text-transform
uppercase會(huì)將元素文本全都轉(zhuǎn)換為大寫字母淘讥；lowercase會(huì)將元素文本全都轉(zhuǎn)換為小寫字母圃伶；capitalize會(huì)將每一個(gè)單詞的首字母都大寫；none則是取消所有的轉(zhuǎn)換樣式蒲列。
文本裝飾
樣式：text-decoration
關(guān)于文本裝飾窒朋，大家使用得很多，這里就不詳細(xì)介紹蝗岖。但是需要注意的是侥猩，text-decoration不能繼承。沒有繼承性意味著文本上畫的任何裝飾線（上劃線或貫穿線）與父元素的顏色相同抵赢，即使后代元素本身有其他顏色也是如此欺劳。
<p style="font-size:14px;text-decoration:underline;">
“text-decoration”不能繼承。沒有繼承性意味著文本上畫的任何裝飾線
<span style="color:silver">（上劃線或貫穿線）</span>與父元素的顏色相同铅鲤，
即使后代元素本身有其他顏色也是如此划提。
</p>
<p style="font-size:14px;text-decoration:underline;">
“text-decoration”不能繼承。沒有繼承性意味著文本上畫的任何裝飾線
<span style="color:silver;text-decoration:underline;">（上劃線或貫穿線）</span>
與父元素的顏色相同邢享，即使后代元素本身有其他顏色也是如此鹏往。
</p>
