[譯]HTML&CSS Lesson3: 瞭解CSS

龍貓貓發表於2019-02-16
HTMLCSS

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規範

clipboard.png

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

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

關鍵字顏色值都是很簡單的，但他們的選擇非常有限，所以不是最常用的設定顏色值的方式。

十六進位制顏色

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

在六個字元宣告的色值中，前兩個字元為一對代表紅色通道，中間兩個字元為一對代表綠色通道，最後兩個字元為一對代表藍色通道。在三個字元宣告的色值中，第一個字元代表紅色通道，第二個字元代表綠色通道，最後一個字元代表藍色通道。

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

clipboard.png

成對的字元是通過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，也提供了拾取獲取十六進位制色值的功能。

clipboard.png

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…

相關文章