[譯]HTML&CSS Lesson3: 瞭解CSS

CSS是一門複雜的語言，擁有至關的大能力。

它咱們容許爲頁面添加布局和設計，容許多個元素甚至多個頁面共享樣式。在咱們有能力解鎖全部功能以前，咱們必須先充分理解它的基礎點。

首先，咱們要明確的瞭解樣式是怎麼被渲染的。

具體的來講，就是咱們要知道不一樣類型的選擇器是怎麼樣工做的，這些選擇器的順序是如何影響樣式的呈現方式的。咱們也要知道一些經常使用的不斷出如今CSS中的屬性值，尤爲是影響顏色和長度的屬性值。

如今咱們來看看CSS引擎蓋下究竟發生了什麼。

層疊

咱們首先經過觀察所謂的層疊來分析樣式的呈現，再來學習一些層疊的例子。在CSS中，全部樣式表中的樣式都是從上到下層疊的，而且能夠添加新的樣式或複寫原有的樣式。

例如，咱們首先在樣式表中將全部段落<p>的背景background設置爲橘色orange，字體大小設置爲24px。接下來咱們再添加一個樣式將段落<p>的背景background設置爲綠色green， 以下所示：

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

因爲設置background爲green的選擇器在設置background爲orange的選擇器之下，因此它的優先級更高，全部的段落<p>最終都會顯示綠色背景。 但字體大小仍然保持24px，由於第二個段落選擇器中並無定義的字體大小。

屬性層疊

選擇器內部的屬性也能夠層疊。仍是以段落舉例，咱們將全部的段落元素<p>的background設置爲orange。而後直接在這個屬性的下面再設置一個background爲green，以下所示：

p {
  background: orange;
  background: green;
}

因爲背景色值green聲明在orange以後，因此它會覆蓋掉orange，最終全部段落元素<p>的背景色都爲綠色。

全部樣式的層疊都是從上到下的。但有些時候層疊並不生效：當咱們使用多種不一樣類型的選擇器設置樣式時，層疊關係將會被打破。這就是下面咱們要講的內容。

計算特徵

每種選擇器都有一個權重值，一個選擇器的權重與層疊關係一塊兒決定了呈現什麼樣式。

在第一課，「構建第一張頁面」中，咱們提到了不一樣種類的選擇器：類型選擇器，Class選擇器，ID選擇器。每種類型的選擇器都有一個權重值。

類型選擇器的權重是最低的。它的值爲0-0-1，class選擇器的權重居中，值爲0-1-0。最後一個是ID選擇器，它的權重最高，值爲1-0-0。如咱們所看到的，權重值由三列數字構成，第一列計數ID選擇器，第二列計數Class選擇器，第三列計數類型選擇器。

再次強調一下，ID選擇器的權重高於Class選擇器，Class選擇器權重高於類型選擇器。

---

權重值
權重值是故意帶連字符-的，由於他們的值並非十進制數。Class選擇器權重值不是數字10，而ID選擇器權重不是數字100。這些數字應該分開來一個個讀0-1-0和1-0-0。咱們會在組合選擇器中來了解爲何權重值要加連字符。

---

當樣式衝突時，選擇器的權重值越高，優先級越高。例如，當一個段落元素<p>同時使用了類型選擇器和ID選擇器，那麼ID選擇器擁有更高的優先級，而無論ID選擇器的層疊關係。

HTML

<p id="food">...</p>

CSS

#food {
  background: green;
}
p {
  background: orange;
}

段落元素<p>中有一個值爲food的id屬性。 在CSS中，這個段落元素同時被兩種類型的選擇器選中： 類型選擇器和ID選擇器。 雖然類型選擇器寫在ID選擇器以後，但ID選擇器優於類型選擇器，由於它的權重值更高，因此段落最終顯示綠色背景。

不一樣類型選擇器的權重值要緊緊記住。有時樣式沒有按照預期呈現，是由於選擇器權重打破了層疊規則，因此纔沒有正確的顯示。

理解層疊和權重如何工做是難度很大的事情，咱們還會繼續介紹這個話題。如今，咱們先來看看如何組合選擇器使其更精準，更具意義。

組合選擇器

到目前爲止，咱們學習了若是單獨使用各種選擇器，但如今咱們要知道如何一塊兒使用這些選擇器。經過組合選擇器，咱們能夠選中更具體的元素或元素組。

例如，咱們要選中class屬性爲hotdog元素中的全部段落元素<p>，並將它們的背景色設置爲棕色brown。但class屬性值爲mustard的段落元素<p>的背景色要設置爲黃色yellow。 代碼以下：

HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

當選擇器組合出現時，是從右到左讀取的。位於最右邊的，在大括號以前的選擇器被成爲主選擇器。主選擇器標識了樣式要做用於哪些元素。全部主選擇器左側的選擇器都被認爲是預限定選擇器。

上述例子中第一組選擇器,hotdog p包括了兩個選擇器：一個class選擇器和一個類型選擇器。 兩個選擇器用空格隔開。主選擇器是指向段落元素的類型選擇器。但因爲這個類型選擇器前有一個預限定的class選擇器hotdog,因此這個組合選擇器只會選中 class屬性爲hotdog的元素中的段落元素。

上述例子中的第二組選擇器，.hotdog p.mustard，包括了三個選擇器：兩個class選擇器和一個類型選擇器。與第一組選擇器惟一不一樣的地方就是在段落選擇器後增長了一個class選擇器mustard。 因爲這個新的class選擇器mustard位於這組選擇器的最右側，成爲了主選擇器，因此全部在這個選擇器以前的選擇器都成爲了預限定選擇器。

---

選擇器間的空格

上述例子的選擇器組合.hotdog p.mustard中, class選擇器hotdog和段落選擇器間存在空格，可是段落選擇器和class選擇器mustard間沒有空格。這兩種用法在選擇器中存在巨大差別。

段落選擇器和class選擇器mustard之間沒有空格，表示選擇器選中的是帶有class屬性值爲mustard的段落元素<p>。若是移除段落選擇器，那麼class選擇器mustard左右兩邊都有空格。它會選中全部class屬性值爲mustard的元素，而不只限於段落元素<p>。

---

組合選擇器是從右到左讀取的，它指向class屬性爲hotdog的元素內的class屬性爲mustard的段落元素<p>。

不一樣類型的選擇器進行組合能夠指向頁面中的任何元素。隨着咱們寫的元素組合越多，咱們會對它越發熟悉。不過在此以前，咱們先要了解怎麼經過組合選擇器改變選擇器的權重。

組合選擇器的權重

當組合選擇器，單個選擇器的權重也會被組合。組合選擇器中的權重值會分別對不一樣類型的選擇器進行計數。

咱們以前的例子中的第一組選擇器.hotdog p，有一個class選擇器和一個類型選擇器。咱們知道class選擇器的權重值爲0-1-0，類型選擇器的權重值爲0-0-1，因此經過權重值相加，組合後的權重值爲0-1-1。

第二組選擇器.hotdog p.mustard，有兩個class選擇器和一個類型選擇器，計算出的權重值爲0-2-1。第一列的0表示沒有ID選擇器，第二列的2表示有兩個class選擇器，最後一列的1表示有一個類型選擇器。

對比兩組選擇器，第二組選擇器有兩個class選擇器，擁有更高的權重值。因此它具備更高的優先級，與層疊關係一致。以下代碼所示，即便咱們將兩組選擇器的書寫順序顛倒，將權重更高的選擇器組合寫在上面，由於權重值的關係，頁面呈現的效果也不會發生任何改變。

.hotdog p.mustard {
  background: yellow;
}
.hotdog p {
  background: brown;
}

總的來講，咱們要時刻關注樣式的權重。權重值越高， 層疊關係越容易被打破。

使用多個class屬性值對樣式分類

將選擇器權重值維持較低狀態的一種方法是讓樣式儘可能模塊化，讓多個元素共享相同的樣式。而樣式模塊化的一種方法是使用多個class屬性值對樣式進行分層。

HTML元素的class屬性能夠擁有多個值，每一個值之間用空格隔開。 這樣，咱們就能夠將某些共同的樣式應用在整組元素上，而後將特殊的樣式應用在的特定元素上。

咱們能夠將重複利用的樣式放在一個class中，將其餘樣式放在另外的class中。

以按鈕爲例，咱們但願全部的按鈕字體大小都爲16px。可是按鈕的背景色須要根據使用場景變化而變化。咱們能夠建立多個class屬性值，而後根據須要將它們分別應用在對應元素上。

HTML

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

CSS

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

例子中，有兩個擁有多個class屬性值的<a>元素。第一個class屬性值都爲btn，將元素字體大小設置爲16px。第一個<a>元素還有一個class屬性值btn-danger將背景色設置爲紅色red。第二個<a>元素也有另一個class屬性值btn-success將背景色設置爲綠色green。這樣咱們的樣式就保持了整潔和模塊化。

使用多個class屬性值，能夠將樣式儘量的分層，並保持代碼的整潔，和維持低權重。想要徹底理解層疊和權重須要很長時間，但咱們會在每節課的學習中愈來愈好。

常見的CSS屬性值

咱們已經使用過一些常見的CSS屬性值，例如關鍵字顏色值：red和green。你可能對它們沒有過多的想法。如今咱們花點時間複習一下以前用過的屬性值，以及探索一些咱們將會使用到的更常見的屬性值。

這裏將具體介紹一下與顏色和長度測量相關的屬性值。

顏色

CSS中的全部顏色都在sRGB(standard Red Green Blue)顏色空間中定義。這個空間的顏色都由紅，綠，藍顏色通道混合組成，這反映了電視機和顯示屏產生全部不一樣顏色的方式。
經過混合不一樣程度的紅，綠，藍，能夠產生百萬種顏色，咱們幾乎能夠找到全部咱們想要的顏色。

目前在CSS中，主要有四種方式表現sRGB顏色：關鍵字，十六進制符，RGB和HSL值。

關鍵字顏色值

關鍵字顏色值是映射到給定的顏色值的名稱(例如：red，green，blue)。這些關鍵字名稱和對應的色值都由CSS規範肯定。只有最經常使用的色值和少許特定的色值有關鍵字名稱。

完整的關鍵字顏色值列表能夠參考CSS規範

如下例子中，咱們將class屬性值爲task的元素的背景色設置爲maroon,將class屬性值爲count的元素的背景色設置爲yellow。

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

關鍵字顏色值都是很簡單的，但他們的選擇很是有限，因此不是最經常使用的設置顏色值的方式。

十六進制顏色

十六進制顏色值有由#加上三個或六個字母數字組成。數字使用的是0到9十個數字，字母使用的是a到f六個字母，大小寫均可以。這些值映射到紅，綠，藍顏色通道。

在六個字符聲明的色值中，前兩個字符爲一對錶明紅色通道，中間兩個字符爲一對錶明綠色通道，最後兩個字符爲一對錶明藍色通道。在三個字符聲明的色值中，第一個字符表明紅色通道，第二個字符表明綠色通道，最後一個字符表明藍色通道。

若是在六個數字符色值中，前兩個字符相同，中間兩個字符相同，最後兩字符相同，就能夠將它縮寫成三個字符的色值，只要將兩個重複的字符保留一個就能夠了。例如橙色的十六位字符色值#ff6600能夠寫成#f60。

成對的字符是經過0到255格式化爲十六進制字符取得的。計算起來有點棘手——最好去看它的書——可是這有助於咱們理解色值 0等同於黑色，255等同於白色。

---

千萬個十六進制顏色

十六進制顏色將近有1，670萬個，怎麼得出的呢：

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

因爲有三組256種顏色組，因此算出有超過1,670萬種顏色(256乘以256乘以256，或者256的立方)。

---

咱們可使用十六進制色值寫出以前示例中的關鍵字顏色maroon和yellow，以下所示：

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

十六進制色值的出現已經有一段時間了，由於有大量的顏色值供選擇，因此變得至關受歡迎。可是若是你對色值不熟悉的話，它就不那麼好用了。幸運的是，Adobe開發了一個免費的色輪工具Adobe Kuler，能夠幫助咱們找到想要的顏色並給出相應的十六進制色值。

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

RGB & RGBa顏色值

RGB顏色值用rgb()函數聲明，rgb()函數，表示紅綠藍。每一個值都是0到255的的整數，值之間用逗號隔開。0表示黑色，255表示白色。

如咱們所想，rgb()函數的第一個值表明紅色通道，第二個值表明綠色通道，第三個值表明藍色通道。

若是咱們使用rgb()函數代替關鍵字顏色值orange，能夠表示爲rgb(255, 102, 0)

一樣，咱們也能夠用rgb()函數代替關鍵字顏色值或十六進制顏色值來表示maroon和yellow

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

RGB顏色也能夠有透明度，使用rgba()函數聲明。rgba()函數接受第四個參數，值必須介於0到1之間的，能夠是小數。0表示徹底透明不可視，1表示徹底不透明。0到1之間的小數表明不一樣程度的透明度。

若是咱們要爲橙色orange設置50%的透明度，咱們能夠用rgba()函數表達：rgba(255, 102, 0, .5)。

咱們也能夠改變背景色maroon和yellow的透明度。如下代碼將maroon的不透明度設置爲25%，將yellow的不透明度設置爲100%。

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

RGB顏色值愈來愈受歡迎，尤爲是能夠帶透明度的RGBa。

HSL&HSLa顏色值

HSL顏色值用hsl()函數聲明，表示色調，飽和度和亮度。與rbg()函數同樣，值用逗號隔開。

第一個值爲無單位的0到360的數字。0到360表明色輪。 這個值表示色輪上的色度。

第二個和第三個值，分別表示飽和度和亮度，值用百分比0到100%表示。飽和度表示色彩飽和的程度，0爲灰度，100%表示徹底飽和。亮度表示色彩明暗的程度，0爲黑色，100%爲白色。

回到以前的橙色orange的例子，能夠將值轉化爲HSL顏色值：hsl(24, 100%, 50%)。

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

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

HSL顏色值也和RGBa同樣能夠設置透明度，用hsla()函數。透明度通道的行爲模式與rgba()函數的一致：第四個值取值範圍在0到1之間，能夠是小數，在函數中標識透明度。

例如咱們可使用HSLa函數爲橙色orange設置50%透明度，值爲：hsla(24, 100%, 50%, .5)。

同理，可使用HSLa顏色值將maroon的不透明度設置爲25%，將yellow的不透明度設置爲100% 。

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

HSL顏色值是最新的CSS色值表示方式。因爲它出現時間短，瀏覽器支持欠缺，因此尚未被普遍使用。

到目前爲止，十六進制顏色值因爲被普遍支持，是目前最受歡迎的色值表示方式。若色值帶有透明度時，RGBa色值會被優先選擇。雖然這些偏好將來可能會改變，可是咱們如今都將使用十六進制顏色值和RGBa顏色值。

長度單位

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

如今咱們來看看更廣泛更直接的長度值表達方式。複雜的超越了咱們的需求。

絕對長度單位

絕對長度單位是最簡單的長度單位，由於它是固定的物理測量值，例如英寸，釐米和毫米。目前最受歡迎的絕對長度單位被稱爲像素，用px表示。

像素
一像素等於 1/96英寸。也就是說一英寸裏面含有96像素。但實際上，一像素在高密度和低密度的設備上顯示會略有不一樣。

像素單位已經存在好久了，它經常使用於不一樣的CSS屬性中。如下例子是爲段落元素<p>設置字體大小的爲14像素

p {
  font-size: 14px;
}

隨着顯示屏的更新和屏幕尺寸的多樣化，像素做爲絕對單位使用起來不夠靈活，已經損失了一些人氣。可是像素很是好控制，很適合初學者，因此在咱們學習HTML和CSS的過程當中都會依賴於它。

相對長度單位

除了絕對長度單位，還有相對長度單位。相對長度單位會較複雜一些， 由於它是不固定的，它依賴於另外一個測量長度。

百分比

百分比%是目前最受歡迎的相對單位之一。百分比依賴於另外一個對象的長度。例如，將某元素的寬度width設置爲50%， 咱們就須要知道它的父元素的寬度。該元素嵌入在其中，其寬度就是父元素寬度的50%。

.col {
  width: 50%;
}

上述例子中，咱們將class屬性值爲col的元素的寬度設置爲50%。這50%就是相對於其父元素來計算的。

百分比在設置元素的長寬和頁面佈局中很是有用，咱們將在這些方面常用它。

Em
用em表示的em單位也是目前很受歡迎的相對長度單位。它基於另外一個元素的字體大小進行計算。

一單位的em與元素的字體大小一致。例如，咱們將一個元素的字體大小設置爲14像素，寬度設置爲5em，那麼它的寬度就是70像素（14像素乘以5）。

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

若是一個元素的字體大小沒有被聲明，那麼em單位就會依賴於最近的一個聲明瞭字體大小的元素的字體大小。

em單位常常用於修飾文本，若是字體大小，文字間距，還有外邊距和內邊距等。

這裏還有不少長度單位沒有提到，只列出了最普遍使用的三種——像素，百分比，em。

總結

這節課的內容到此爲止。主要集中於CSS基礎，介紹了他是如何工做的，和一些經常使用的值。

這節課的內容總結以下：

• 什麼是層疊
• 什麼是權重，怎麼計算權重
• 怎麼使用組合選擇器選中須要的元素和元素組
• 怎麼在單元素中使用多個class屬性值使其樣式更具模塊化
• 不一樣的CSS色值表示方式：關鍵字，十六進制，RGB和HSL
• 不一樣的長度單位：像素，百分比，em

基礎部分已經介紹完了，但咱們還須要學習不少其餘內容。在接下來的課程中，咱們依舊會繼續學習CSS，讓咱們的網站真正成型。

文章來源

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