使用多個(gè)class屬性值，可以將樣式盡可能的分層，并保持代碼的整潔，和維持低權(quán)重。想要完全理解層疊和權(quán)重需要很長(zhǎng)時(shí)間，但我們會(huì)在每節(jié)課的學(xué)習(xí)中越來(lái)越好。

我們已經(jīng)使用過(guò)一些常見(jiàn)的CSS屬性值，例如關(guān)鍵字顏色值：red和green。你可能對(duì)它們沒(méi)有過(guò)多的想法?，F(xiàn)在我們花點(diǎn)時(shí)間復(fù)習(xí)一下之前用過(guò)的屬性值，以及探索一些我們將會(huì)使用到的更常見(jiàn)的屬性值。

這里將具體介紹一下與顏色和長(zhǎng)度測(cè)量相關(guān)的屬性值。

CSS中的所有顏色都在sRGB(standard Red Green Blue)顏色空間中定義。這個(gè)空間的顏色都由紅，綠，藍(lán)顏色通道混合組成，這反映了電視機(jī)和顯示屏產(chǎn)生所有不同顏色的方式。
通過(guò)混合不同程度的紅，綠，藍(lán)，可以產(chǎn)生百萬(wàn)種顏色，我們幾乎可以找到所有我們想要的顏色。

目前在CSS中，主要有四種方式表現(xiàn)sRGB顏色：關(guān)鍵字，十六進(jìn)制符，RGB和HSL值。

關(guān)鍵字顏色值是映射到給定的顏色值的名稱(例如：red，green，blue)。這些關(guān)鍵字名稱和對(duì)應(yīng)的色值都由CSS規(guī)范確定。只有最常用的色值和少量特定的色值有關(guān)鍵字名稱。

完整的關(guān)鍵字顏色值列表可以參考CSS規(guī)范

以下例子中，我們將class屬性值為task的元素的背景色設(shè)置為maroon,將class屬性值為count的元素的背景色設(shè)置為yellow。

.task {
  background: maroon;
}
.count {
  background: yellow;
}

關(guān)鍵字顏色值都是很簡(jiǎn)單的，但他們的選擇非常有限，所以不是最常用的設(shè)置顏色值的方式。

十六進(jìn)制顏色值有由#加上三個(gè)或六個(gè)字母數(shù)字組成。數(shù)字使用的是0到9十個(gè)數(shù)字，字母使用的是a到f六個(gè)字母，大小寫(xiě)都可以。這些值映射到紅，綠，藍(lán)顏色通道。

在六個(gè)字符聲明的色值中，前兩個(gè)字符為一對(duì)代表紅色通道，中間兩個(gè)字符為一對(duì)代表綠色通道，最后兩個(gè)字符為一對(duì)代表藍(lán)色通道。在三個(gè)字符聲明的色值中，第一個(gè)字符代表紅色通道，第二個(gè)字符代表綠色通道，最后一個(gè)字符代表藍(lán)色通道。

如果在六個(gè)數(shù)字符色值中，前兩個(gè)字符相同，中間兩個(gè)字符相同，最后兩字符相同，就可以將它縮寫(xiě)成三個(gè)字符的色值，只要將兩個(gè)重復(fù)的字符保留一個(gè)就可以了。例如橙色的十六位字符色值#ff6600可以寫(xiě)成#f60。

成對(duì)的字符是通過(guò)0到255格式化為十六進(jìn)制字符取得的。計(jì)算起來(lái)有點(diǎn)棘手——最好去看它的書(shū)——但是這有助于我們理解色值 0等同于黑色，255等同于白色。

千萬(wàn)個(gè)十六進(jìn)制顏色

十六進(jìn)制顏色將近有1，670萬(wàn)個(gè)，怎么得出的呢：

在十六進(jìn)制顏色中，每個(gè)字符都有十六種選擇，從0到9,從a到f。每對(duì)字符都由256種顏色選項(xiàng)(16乘以16，或者16的平方)

由于有三組256種顏色組，所以算出有超過(guò)1,670萬(wàn)種顏色(256乘以256乘以256，或者256的立方)。

我們可以使用十六進(jìn)制色值寫(xiě)出之前示例中的關(guān)鍵字顏色maroon和yellow，如下所示：

.task {
  background: #800000;
}
.count {
  background: #ff0;
}

十六進(jìn)制色值的出現(xiàn)已經(jīng)有一段時(shí)間了，因?yàn)橛写罅康念伾倒┻x擇，所以變得相當(dāng)受歡迎。但是如果你對(duì)色值不熟悉的話，它就不那么好用了。幸運(yùn)的是，Adobe開(kāi)發(fā)了一個(gè)免費(fèi)的色輪工具Adobe Kuler，可以幫助我們找到想要的顏色并給出相應(yīng)的十六進(jìn)制色值。

另外，圖片編輯工具，例如 Adobe Photoshop，也提供了拾取獲取十六進(jìn)制色值的功能。

RGB顏色值用rgb()函數(shù)聲明，rgb()函數(shù)，表示紅綠藍(lán)。每個(gè)值都是0到255的的整數(shù)，值之間用逗號(hào)隔開(kāi)。0表示黑色，255表示白色。

如我們所想，rgb()函數(shù)的第一個(gè)值代表紅色通道，第二個(gè)值代表綠色通道，第三個(gè)值代表藍(lán)色通道。

如果我們使用rgb()函數(shù)代替關(guān)鍵字顏色值orange，可以表示為rgb(255, 102, 0)

同樣，我們也可以用rgb()函數(shù)代替關(guān)鍵字顏色值或十六進(jìn)制顏色值來(lái)表示maroon和yellow

.task {
  background: rgb(128, 0, 0);
}
.count {
  background: rgb(255, 255, 0);
}

RGB顏色也可以有透明度，使用rgba()函數(shù)聲明。rgba()函數(shù)接受第四個(gè)參數(shù)，值必須介于0到1之間的，可以是小數(shù)。0表示完全透明不可視，1表示完全不透明。0到1之間的小數(shù)代表不同程度的透明度。

如果我們要為橙色orange設(shè)置50%的透明度，我們可以用rgba()函數(shù)表達(dá)：rgba(255, 102, 0, .5)。

我們也可以改變背景色maroon和yellow的透明度。以下代碼將maroon的不透明度設(shè)置為25%，將yellow的不透明度設(shè)置為100%。

.task {
  background: rgba(128, 0, 0, .25);
}
.count {
  background: rgba(255, 255, 0, 1);
}

RGB顏色值越來(lái)越受歡迎，尤其是可以帶透明度的RGBa。

HSL顏色值用hsl()函數(shù)聲明，表示色調(diào)，飽和度和亮度。與rbg()函數(shù)一樣，值用逗號(hào)隔開(kāi)。

第一個(gè)值為無(wú)單位的0到360的數(shù)字。0到360代表色輪。 這個(gè)值表示色輪上的色度。

第二個(gè)和第三個(gè)值，分別表示飽和度和亮度，值用百分比0到100%表示。飽和度表示色彩飽和的程度，0為灰度，100%表示完全飽和。亮度表示色彩明暗的程度，0為黑色，100%為白色。

回到之前的橙色orange的例子，可以將值轉(zhuǎn)化為HSL顏色值：hsl(24, 100%, 50%)。

背景色maroon和yellow也可以用HSL顏色值聲明如下。

.task {
  background: hsl(0, 100%, 25%);
}
.count {
  background: hsl(60, 100%, 50%);
}

HSL顏色值也和RGBa一樣可以設(shè)置透明度，用hsla()函數(shù)。透明度通道的行為模式與rgba()函數(shù)的一致：第四個(gè)值取值范圍在0到1之間，可以是小數(shù)，在函數(shù)中標(biāo)識(shí)透明度。

例如我們可以使用HSLa函數(shù)為橙色orange設(shè)置50%透明度，值為：hsla(24, 100%, 50%, .5)。

同理，可以使用HSLa顏色值將maroon的不透明度設(shè)置為25%，將yellow的不透明度設(shè)置為100% 。

.task {
  background: hsla(0, 100%, 25%, .25);
}
.count {
  background: hsla(60, 100%, 50%, 1);
}

HSL顏色值是最新的CSS色值表示方式。由于它出現(xiàn)時(shí)間短，瀏覽器支持欠缺，所以還沒(méi)有被廣泛使用。

到目前為止，十六進(jìn)制顏色值由于被廣泛支持，是目前最受歡迎的色值表示方式。若色值帶有透明度時(shí)，RGBa色值會(huì)被優(yōu)先選擇。雖然這些偏好未來(lái)可能會(huì)改變，但是我們現(xiàn)在都將使用十六進(jìn)制顏色值和RGBa顏色值。

長(zhǎng)度值和顏色值一樣都有不同類型的值，這些值有不同的用途。長(zhǎng)度值有兩種，分別用不同的單位表示絕對(duì)的值和相對(duì)的值。

現(xiàn)在我們來(lái)看看更普遍更直接的長(zhǎng)度值表達(dá)方式。復(fù)雜的超越了我們的需求。

絕對(duì)長(zhǎng)度單位是最簡(jiǎn)單的長(zhǎng)度單位，因?yàn)樗枪潭ǖ奈锢頊y(cè)量值，例如英寸，厘米和毫米。目前最受歡迎的絕對(duì)長(zhǎng)度單位被稱為像素，用px表示。

像素
一像素等于 1/96英寸。也就是說(shuō)一英寸里面含有96像素。但實(shí)際上，一像素在高密度和低密度的設(shè)備上顯示會(huì)略有不同。

像素單位已經(jīng)存在很久了，它常用于不同的CSS屬性中。以下例子是為段落元素

設(shè)置字體大小的為14像素

p {
  font-size: 14px;
}

隨著顯示屏的更新和屏幕尺寸的多樣化，像素作為絕對(duì)單位使用起來(lái)不夠靈活，已經(jīng)損失了一些人氣。但是像素非常好控制，很適合初學(xué)者，所以在我們學(xué)習(xí)HTML和CSS的過(guò)程中都會(huì)依賴于它。

除了絕對(duì)長(zhǎng)度單位，還有相對(duì)長(zhǎng)度單位。相對(duì)長(zhǎng)度單位會(huì)較復(fù)雜一些， 因?yàn)樗遣还潭ǖ?，它依賴于另一個(gè)測(cè)量長(zhǎng)度。

百分比

百分比%是目前最受歡迎的相對(duì)單位之一。百分比依賴于另一個(gè)對(duì)象的長(zhǎng)度。例如，將某元素的寬度width設(shè)置為50%， 我們就需要知道它的父元素的寬度。該元素嵌入在其中，其寬度就是父元素寬度的50%。

.col {
  width: 50%;
}

上述例子中，我們將class屬性值為col的元素的寬度設(shè)置為50%。這50%就是相對(duì)于其父元素來(lái)計(jì)算的。

百分比在設(shè)置元素的長(zhǎng)寬和頁(yè)面布局中非常有用，我們將在這些方面經(jīng)常使用它。

Em
用em表示的em單位也是目前很受歡迎的相對(duì)長(zhǎng)度單位。它基于另一個(gè)元素的字體大小進(jìn)行計(jì)算。

一單位的em與元素的字體大小一致。例如，我們將一個(gè)元素的字體大小設(shè)置為14像素，寬度設(shè)置為5em，那么它的寬度就是70像素（14像素乘以5）。

.banner {
  font-size: 14px;
  width: 5em;
}

如果一個(gè)元素的字體大小沒(méi)有被聲明，那么em單位就會(huì)依賴于最近的一個(gè)聲明了字體大小的元素的字體大小。

em單位經(jīng)常用于修飾文本，如果字體大小，文字間距，還有外邊距和內(nèi)邊距等。

這里還有很多長(zhǎng)度單位沒(méi)有提到，只列出了最廣泛使用的三種——像素，百分比，em。

這節(jié)課的內(nèi)容到此為止。主要集中于CSS基礎(chǔ)，介紹了他是如何工作的，和一些常用的值。

這節(jié)課的內(nèi)容總結(jié)如下：

什么是層疊

什么是權(quán)重，怎么計(jì)算權(quán)重

怎么使用組合選擇器選中需要的元素和元素組

怎么在單元素中使用多個(gè)class屬性值使其樣式更具模塊化

不同的CSS色值表示方式：關(guān)鍵字，十六進(jìn)制，RGB和HSL

不同的長(zhǎng)度單位：像素，百分比，em

基礎(chǔ)部分已經(jīng)介紹完了，但我們還需要學(xué)習(xí)很多其他內(nèi)容。在接下來(lái)的課程中，我們依舊會(huì)繼續(xù)學(xué)習(xí)CSS，讓我們的網(wǎng)站真正成型。

http://learn.shayhowe.com/htm...