資訊專欄INFORMATION COLUMN
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。
CSS是一門復雜的語言，擁有相當的大能力。
它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。
首先，我們要明確的了解樣式是怎么被渲染的。
具體的來說，就是我們要知道不同類型的選擇器是怎么樣工作的，這些選擇器的順序是如何影響樣式的呈現方式的。我們也要知道一些常用的不斷出現在CSS中的屬性值，尤其是影響顏色和長度的屬性值。
現在我們來看看CSS引擎蓋下究竟發生了什么。
層疊我們首先通過觀察所謂的層疊來分析樣式的呈現，再來學習一些層疊的例子。在CSS中，所有樣式表中的樣式都是從上到下層疊的，并且可以添加新的樣式或復寫原有的樣式。
例如，我們首先在樣式表中將所有段落
的背景background設置為橘色orange，字體大小設置為24px。接下來我們再添加一個樣式將段落
的背景background設置為綠色green， 如下所示：
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
由于設置background為green的選擇器在設置background為orange的選擇器之下，所以它的優先級更高，所有的段落
最終都會顯示綠色背景。 但字體大小仍然保持24px，因為第二個段落選擇器中并沒有定義的字體大小。
屬性層疊選擇器內部的屬性也可以層疊。還是以段落舉例，我們將所有的段落元素
的background設置為orange。然后直接在這個屬性的下面再設置一個background為green，如下所示：
p {
background: orange;
background: green;
}
由于背景色值green聲明在orange之后，所以它會覆蓋掉orange，最終所有段落元素
的背景色都為綠色。
所有樣式的層疊都是從上到下的。但有些時候層疊并不生效：當我們使用多種不同類型的選擇器設置樣式時，層疊關系將會被打破。這就是下面我們要講的內容。
計算特征每種選擇器都有一個權重值，一個選擇器的權重與層疊關系一起決定了呈現什么樣式。
在第一課，“構建第一張頁面”中，我們提到了不同種類的選擇器：類型選擇器，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。我們會在組合選擇器中來了解為什么權重值要加連字符。
當樣式沖突時，選擇器的權重值越高，優先級越高。例如，當一個段落元素
同時使用了類型選擇器和ID選擇器，那么ID選擇器擁有更高的優先級，而不管ID選擇器的層疊關系。
HTML
...
CSS
#food {
background: green;
}
p {
background: orange;
}
段落元素
中有一個值為food的id屬性。 在CSS中，這個段落元素同時被兩種類型的選擇器選中： 類型選擇器和ID選擇器。 雖然類型選擇器寫在ID選擇器之后，但ID選擇器優于類型選擇器，因為它的權重值更高，所以段落最終顯示綠色背景。
不同類型選擇器的權重值要牢牢記住。有時樣式沒有按照預期呈現，是因為選擇器權重打破了層疊規則，所以才沒有正確的顯示。
理解層疊和權重如何工作是難度很大的事情，我們還會繼續介紹這個話題。現在，我們先來看看如何組合選擇器使其更精準，更具意義。
組合選擇器到目前為止，我們學習了如果多帶帶使用各類選擇器，但現在我們要知道如何一起使用這些選擇器。通過組合選擇器，我們可以選中更具體的元素或元素組。
例如，我們要選中class屬性為hotdog元素中的所有段落元素
，并將它們的背景色設置為棕色brown。但class屬性值為mustard的段落元素
的背景色要設置為黃色yellow。 代碼如下：
HTML
...
...
...
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的段落元素
。如果移除段落選擇器，那么class選擇器mustard左右兩邊都有空格。它會選中所有class屬性值為mustard的元素，而不僅限于段落元素
。
組合選擇器是從右到左讀取的，它指向class屬性為hotdog的元素內的class屬性為mustard的段落元素
。
不同類型的選擇器進行組合可以指向頁面中的任何元素。隨著我們寫的元素組合越多，我們會對它愈加熟悉。不過在此之前，我們先要了解怎么通過組合選擇器改變選擇器的權重。
組合選擇器的權重當組合選擇器，單個選擇器的權重也會被組合。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。
我們之前的例子中的第一組選擇器.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
... ...
CSS
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
例子中，有兩個擁有多個class屬性值的元素。第一個class屬性值都為btn，將元素字體大小設置為16px。第一個元素還有一個class屬性值btn-danger將背景色設置為紅色red。第二個元素也有另外一個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屬性中。以下例子是為段落元素
設置字體大小的為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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51076.html
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。 它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
摘要：告訴搜索引擎爬蟲，我們的網站是關于什么內容的服裝好看的衣服我是你爸爸我是你爸爸段落標簽標題標題標題標題標題標題標題標簽獨成一段，加粗字體哈哈我的家在東北lesson1 ?????①我是你爸爸?我是你爸爸 ?②標題?標題?標題?標題?標題?標題?③??哈哈??④50$?⑤我的家在東北?⑥??a??b??c?? ? ? ? lesson2 ???/*鏈接到4中的ul的導航欄應用*/??*{???...
摘要：有幾個不同的因素致使它的流行。在這四個值中，我們最常用的就是將文本設置為斜體和將文本恢復為正常樣式。因此任何低于的值會顯得更細，而高于的值會顯得更粗。目前瀏覽器默認為藍色，我們要把它改成和到元素一致的顏色。 隨著時間的推移，網絡字體排版已經得到了很大的發展。有幾個不同的因素致使它的流行。其中被最廣泛認可的因素是可嵌入我們自己的網絡字體的系統的開發。 過去我們只能在網站中使用少量的字體。...
摘要：有幾個不同的因素致使它的流行。在這四個值中，我們最常用的就是將文本設置為斜體和將文本恢復為正常樣式。因此任何低于的值會顯得更細，而高于的值會顯得更粗。目前瀏覽器默認為藍色，我們要把它改成和到元素一致的顏色。 隨著時間的推移，網絡字體排版已經得到了很大的發展。有幾個不同的因素致使它的流行。其中被最廣泛認可的因素是可嵌入我們自己的網絡字體的系統的開發。 過去我們只能在網站中使用少量的字體。...
摘要：元素是使用小于號和大于號包裹元素名來標示。一個結束標簽表示元素的結束它由小于號元素名組成例如。和嵌套在內，它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據元素類型選擇元素。 可以的話，請想象一下互聯網沒有發明之前的日子。網站還不存在，紙質的書本是我們主要的信息來源，而在書本中查詢我們想要的資料會耗費相當多的精力和時間。 而如今，你打開個瀏覽器用搜索引擎搜索，任...
閱讀 1378·2021-09-24 10:26
閱讀 1689·2019-08-30 14:14
閱讀 2098·2019-08-29 16:54
閱讀 363·2019-08-29 14:09
閱讀 1468·2019-08-29 12:55
閱讀 922·2019-08-28 18:13
閱讀 1573·2019-08-26 13:39
閱讀 2560·2019-08-26 11:43
