CSS設(shè)計指南（工作原理）

《CSS設(shè)計指南（第3版）》的筆記整理。

【HTML基礎(chǔ)】
非文本內(nèi)容是通過自閉合標(biāo)簽顯示的躯畴。閉合標(biāo)簽與自閉合標(biāo)簽的區(qū)別在于初嘹，閉合標(biāo)
簽包含的是會顯示的實際內(nèi)容仅讽，而自閉合標(biāo)簽只是給瀏覽器提供一個對要顯示內(nèi)容
的引用。瀏覽器會在HTML 頁面加載的時候点额，額外向服務(wù)器發(fā)送請求青团，以取得自閉
合標(biāo)簽引用的內(nèi)容。
按照HTML5語法編寫的最簡單的HTML頁面的模板可以寫成這樣：

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>An HTML Template</title>
    </head>
    <body>
      <!-- 這里是網(wǎng)頁內(nèi)容 -->
    </body>
</html>

塊級元素盒子會擴(kuò)展到與父元素同寬
在我們這個頁面中咖楣，所有塊級元素的父元素都是body督笆，而它的寬度默認(rèn)與瀏覽器窗
口一樣寬（當(dāng)然有少量邊距）。因此诱贿，所有塊級元素就與瀏覽器窗口一樣寬了娃肿。說到
這，相信你就能理解為什么塊級元素始終會占一行了珠十。對了料扰，就是因為它們始終會
保持與瀏覽器窗口同寬。這樣一來焙蹭，一個塊級元素旁邊也就沒有空間容納另一個塊
級元素了晒杈。

行內(nèi)元素盒子會“收縮包裹”其內(nèi)容，并且會盡可能包緊

HTML實體
HTML 實體常用于生成那些鍵盤上沒有的印刷字符孔厉，比如TM拯钻、? 帖努、?，等等粪般。HTML 實體以一個和號（&）開頭拼余，一個分號（;）結(jié)尾，二者之間是表示實體的字符串亩歹。在前面的例子中匙监，兩個實體的名字分別是“l(fā)eft-double-quote”（左雙引號“）和“right-double-quote”（右雙引號”）的簡寫。
Peachpit 另一位作者Elizabeth Castro（她的書非常贊小作，在此強(qiáng)烈向大家推薦）在自己的一個網(wǎng)頁中列出了常用的HTML 實體：亭姥。http://www.elizabethcastro.com/html/extras/entities.html
要注意的是，由于和號表示實體開頭顾稀，所以在要顯示和號的時候不能直接寫和號致份，而要在HTML
標(biāo)簽包含的文本中使用& 實體，這樣才能顯示出&來础拨。比如氮块，寫成Johnson & Johnson，
才會顯示成：Johnson & Johnson诡宗。

【剖析CSS規(guī)則】
規(guī)則實際上就是一條完整的CSS 指令滔蝉。規(guī)則聲明了要修改的元素和要應(yīng)用給該元素
的樣式。
下面就是一條CSS 規(guī)則塔沃，它可以把段落的文本設(shè)置為紅色蝠引。

p {color:red;}

為文檔添加樣式的三種方法
有三種方法可以把CSS 添加到網(wǎng)頁中，分別是寫在元素標(biāo)簽里（也叫行內(nèi)樣式）蛀柴、寫在<style>標(biāo)簽里（也叫嵌入樣式）和寫在單獨的CSS 樣式表中（也叫鏈接樣式）螃概。
1、行內(nèi)樣式
行內(nèi)樣式的作用范圍非常有限鸽疾。行內(nèi)樣式只能影響它所在的標(biāo)簽吊洼，而且總會覆蓋嵌入樣式和鏈接樣式。
2制肮、嵌入樣式
嵌入樣式的應(yīng)用范圍僅限于當(dāng)前頁面冒窍。頁面樣式會覆蓋外部樣式表中的樣式，但會被行內(nèi)樣式覆蓋豺鼻。
3综液、鏈接樣式
鏈接樣式的作用范圍可以是整個網(wǎng)站。只要使用<link>標(biāo)簽把樣式表鏈接到每個頁面儒飒，相應(yīng)的頁面就可以使用其中的樣式谬莹。隨后，只要修改了樣式表中的樣式，改動就會在所有被選中的元素上體現(xiàn)出來附帽，無論這個元素在哪個頁面里埠戳。這樣，既可以做到全站頁面外觀統(tǒng)一士葫，又便于整站樣式更新乞而。

除了以上三種為頁面添加樣式的方法送悔，還有一種在樣式表中鏈接其他樣式表的方法慢显，那就應(yīng)用@import 指令（是一種at 規(guī)則）：

@import url(css/styles2.css)

要注意的是，@import 指令必須出現(xiàn)在樣式表中其他樣式之前欠啤，否則@import 引用的樣式表不會被加載荚藻。

【CSS規(guī)則命名慣例】
所有用于選擇特定元素的選擇符又分三種：

上下文選擇符〗喽危基于祖先或同胞元素選擇一個元素应狱。
ID 和類選擇符§羲浚基于id 和class 屬性的值（你自己設(shè)定）選擇元素疾呻。
屬性選擇符⌒窗耄基于屬性的有無和特征選擇元素岸蜗。

特殊的上下文選擇符
1、子選擇符>
標(biāo)簽1>標(biāo)簽2
標(biāo)簽2 必須是標(biāo)簽1 的子元素叠蝇，或者反過來說璃岳，標(biāo)簽1 必須是標(biāo)簽2 的父元素。與常
規(guī)的上下文選擇符不同悔捶，這個選擇符中的標(biāo)簽1 不能是標(biāo)簽2 的父元素之外的其他
祖先元素铃慷。

2、緊鄰?fù)x擇符+
標(biāo)簽1 + 標(biāo)簽2
標(biāo)簽2 必須緊跟在其同胞標(biāo)簽1 的后面蜕该。

3犁柜、一般同胞選擇符~
標(biāo)簽1 ~ 標(biāo)簽2
標(biāo)簽2 必須跟（不一定緊跟）在其同胞標(biāo)簽1 后面。

4堂淡、通用選擇符*
通用選擇符*（常被稱為星號選擇符）是一個通配符赁温，它匹配任何元素，因此下面這
條規(guī)則

p * {color:red;}

這樣只會把p包含的所有元素的文本變成紅色淤齐。
這個選擇符有一個非常有意思的用法股囊，即用它構(gòu)成非子選擇符，比如：

section * a {font-size:1.3em;}

任何是section 孫子元素更啄，而非子元素的a 標(biāo)簽都會被選中稚疹。至于a的父元素是什么，沒有關(guān)系。就是說内狗，選中的不是section的子元素a標(biāo)簽怪嫌，而是孫子元素a標(biāo)簽。

類屬性
1柳沙、標(biāo)簽帶類選擇符
如果你只想瞄準(zhǔn)帶有這個類的段落岩灭，可以把標(biāo)簽名和類選擇符寫在一塊，比如：第三條CSS 規(guī)則只選擇帶specialtext 類的段落赂鲤。

p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}
p.specialtext {color:red;}

2噪径、多類選擇符
可以給元素添加多個類，比如：

<p class="specialtext featured">Here the span tag <span>may or may not</span>
be styled.</p>

要選擇同時存在這兩個類名的元素数初，可以這樣寫：

.specialtext.featured {font-size:120%;}

注意找爱，CSS 選擇符的兩個類名之間沒有空格，因為我們只想選擇同時具有這兩個類
名的那個元素泡孩。如果你加了空格车摄，那就變成了“祖先/后代”關(guān)系的上下文選擇符了。

用于頁內(nèi)導(dǎo)航的ID
ID 也可以用在頁內(nèi)導(dǎo)航鏈接中仑鸥。下面就是一個鏈接吮播，其目標(biāo)是同一頁的另一個位置。

<a href="#bio">Biography</a>

看到href 屬性值開頭的#了嗎眼俊？它表示這個鏈接的目標(biāo)在當(dāng)前頁面中意狠，因而不會觸發(fā)瀏覽器加載頁面（如果沒有#，瀏覽器就會嘗試加載bio 目錄下的默認(rèn)頁面了）泵琳。
使用與CSS 選擇符里相同的 #ID 名語法摄职，可以把鏈接導(dǎo)航到同一頁面中的目標(biāo)ID。在這個頁面的下方获列，應(yīng)該有對應(yīng)的目標(biāo)元素谷市。

<h3 id="bio">Biography</h3>
<p>I was born when I was very young…</p>

同樣要注意，作為目標(biāo)的ID 值前面是沒有#的击孩，就是一個普通的ID 值迫悠。
用戶單擊前面的鏈接時，頁面會向下滾動到ID 值為bio 的h3 元素的位置巩梢。如果鏈接的href屬性里只有一個#创泄，那么點擊該鏈接會返回頁面頂部。

<a href="#">Back to Top</a>

換句話說括蝠，要寫一個“返回頂部”鏈接鞠抑，根本不需要ID 為#的目標(biāo)元素。
另外忌警，如果你暫時不知道某個href 應(yīng)該放什么URL搁拙，也可以用#作為占位符，但不能把該屬性留空。因為href 屬性值為空的鏈接的行為跟正常鏈接不一樣箕速。這樣酪碘，團(tuán)隊中的其他人將來可以用中間層（比如PHP）變量替換#，以便動態(tài)接收來自數(shù)據(jù)庫的URL盐茎。

屬性選擇符
1兴垦、屬性名選擇符
標(biāo)簽名[屬性名]
選擇任何帶有屬性名的標(biāo)簽名。
比如字柠，下面的CSS

img[title] {border:2px solid blue;}

會導(dǎo)致像下面這個帶有title 屬性的HTML img 元素顯示2 像素寬的藍(lán)色邊框探越，至于
title 屬性有什么值，無關(guān)緊要募谎，只要有這個屬性在就行啦扶关。
什么情況下會用到這個屬性選擇符呢阴汇？比如数冬，可以在用戶鼠標(biāo)移動到這些圖片上時，
此時瀏覽器會顯示一個（利用title 屬性中的文本生成的）提示條搀庶。一般來說拐纱，人
們經(jīng)常給alt 和title 屬性設(shè)定相同的值。alt 屬性中的文本會在圖片因故未能加載
時顯示哥倔，或者由屏幕閱讀器朗讀出來秸架。而title 屬性會在用戶鼠標(biāo)移動到圖片上時，
顯示一個包含相應(yīng)文本的提示咆蒿。

2东抹、屬性值選擇符
標(biāo)簽名[屬性名="屬性值"]

在HTML5 中，屬性值的引號可加可不加沃测，在此為了清楚起見缭黔，我們加了。

選擇任何帶有值為屬性值的屬性名的標(biāo)簽名蒂破。

偽類
偽類這個叫法源自它們與類相似馏谨，但實際上并沒有類會附加到標(biāo)記中的標(biāo)簽上。偽
類分兩種附迷。

UI（User Interface惧互，用戶界面）偽類會在HTML 元素處于某個狀態(tài)時（比如鼠標(biāo)
指針位于鏈接上），為該元素應(yīng)用CSS 樣式喇伯。
結(jié)構(gòu)化偽類會在標(biāo)記中存在某種結(jié)構(gòu)上的關(guān)系時（如某個元素是一組元素中的第
一個或最后一個）喊儡，為相應(yīng)元素應(yīng)用CSS 樣式。

[UI偽類]
1稻据、鏈接偽類
針對鏈接的偽類一共有4 個艾猜，因為鏈接始終會處于如下4 種狀態(tài)之一。

Link。此時箩朴，鏈接就在那兒等著用戶點擊岗喉。
Visited。用戶此前點擊過這個鏈接炸庞。
Hover钱床。鼠標(biāo)指針正懸停在鏈接上。
Active埠居。鏈接正在被點擊（鼠標(biāo)在元素上按下查牌，還沒有釋放）。

以下就是這些狀態(tài)對應(yīng)的4 個偽類選擇符（使用了a 選擇符和一些示例聲明）：

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

由于這4 個偽類的特指度（本章后面再討論特指度）相同滥壕，如果不按照這里列出
的順序使用它們纸颜，瀏覽器可能不會顯示預(yù)期結(jié)果。為了好記绎橘，我建議大家可以這
么想：“LoVe? HA!”大寫字母就是每個偽類的頭一個字母胁孙。
一個冒號（:）表示偽類，兩個冒號（::）表示CSS3 新增的偽元素称鳞。盡管瀏覽器目
前都支持對CSS 1 和CSS 2 的偽元素使用一個冒號涮较，但希望你能習(xí)慣于用雙冒號代
替單冒號，因為這些單冒號的偽元素最終可能都會被淘汰掉

2冈止、:focus偽類
e:focus

在這個以及后續(xù)的例子中狂票，e 表示任何元素，如p熙暴、h1闺属、section，等等周霉。

表單中的文本字段在用戶單擊它時會獲得焦點掂器，然后用戶才能在其中輸入字符。下
面的規(guī)則

input:focus {border:1px solid blue;}

會在光標(biāo)位于input 字段中時诗眨，為該字段添加一個藍(lán)色邊框唉匾。這樣可以讓用戶明確
地知道輸入的字符會出現(xiàn)在哪里。

3匠楚、 :target 偽類
e:target
如果用戶點擊一個指向頁面中其他元素的鏈接巍膘，則那個元素就是目標(biāo)（target），可以用:target 偽類選中它芋簿。
對于下面這個鏈接

<a href="#more_info">More Information</a>

位于頁面其他地方峡懈、ID 為more_info 的那個元素就是目標(biāo)。該元素可能是這樣的：

<h2 id="more_info">This is the information you are looking for.</h2>

那么与斤，如下CSS 規(guī)則

#more_info:target {background:#eee;}

會在用戶單擊鏈接轉(zhuǎn)向ID 為more_info 的元素時肪康，為該元素添加淺灰色背景荚恶。

[結(jié)構(gòu)化偽類]
1、:first-child 和:last-child
e:first-child
e:last-child
:first-child 代表一組同胞元素中的第一個元素磷支，而:last-child 則代表最后一個谒撼。

2、:nth-child
e:nth-child(n)

e 表示元素名雾狈，n 表示一個數(shù)值（也可以使用odd 或even）

偽元素
顧名思義廓潜，偽元素就是你的文檔中若有實無的元素。
1善榛、::first-letter 偽元素
e::first-letter
比如辩蛋，以下CSS 規(guī)則：段落首字符放大的效果。

p::first-letter {font-size:300%;}

如果不用偽元素創(chuàng)建這個首字符放大效果移盆，必須手工給該字母加上<span>標(biāo)簽悼院，
然后再為該標(biāo)簽應(yīng)用樣式。而偽元素實際上是替我們添加了無形的標(biāo)簽咒循。

2据途、::first-line 偽元素
e::first-line
可以選中文本段落（一般情況下是段落）的第一行

3、::before 和::after 偽元素
e::before
e::after
可用于在特定元素前面或后面添加特殊內(nèi)容剑鞍。

<p class="age">25</p>

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//Age: 25 years.

注意昨凡，每個content 屬性值中都包含了空格爽醋，以便輸出結(jié)果中有適當(dāng)?shù)目站唷?br> 搜索引擎不會取得偽元素的信息（因為它在標(biāo)記中并不存在）蚁署。因此腹侣，不要通過偽
元素添加你想讓搜索引擎索引的重要內(nèi)容恶迈。

繼承
CSS 中有很多屬性是可以繼承的，其中相當(dāng)一部分都跟文本有關(guān)自点，比如顏色遂赠、字體久妆、字號。然而跷睦，也有很多CSS 屬性不能繼承筷弦，因為繼承這些屬性沒有意義。這些不能繼承的屬性主要涉及元素盒子的定位和顯示方式抑诸，比如邊框烂琴、外邊距、內(nèi)邊距蜕乡。
由于字體和文本樣式是可以繼承的奸绷，所以在使用相對字體單位（如百分比和em）時
要格外小心。如果某個標(biāo)簽的字體大小被設(shè)置為80%层玲，而它的一個后代的字體大小
也被設(shè)置為80%号醉，那么該后代中文本最終的字體大小將是64%（80%的80%）反症。這有時候可能并不是你想要的結(jié)果。

層疊
層疊畔派，就是層疊樣式表中的層疊铅碍，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標(biāo)簽特定屬性值的多個來源线椰，確定最終使用哪個值该酗。
層疊是CSS 的核心機(jī)制，理解了它才能以最經(jīng)濟(jì)的方式寫出最容易改動的CSS士嚎，讓
文檔外觀在達(dá)到設(shè)計要求的同時呜魄，也給用戶留下一些空間，讓他們能根據(jù)需要更改
文檔的顯示效果（比如整體調(diào)整字號）莱衩。

1爵嗅、樣式來源
以下就是瀏覽器層疊各個來源樣式的順序：

瀏覽器默認(rèn)樣式表
用戶樣式表
作者鏈接樣式表（按照它們鏈接到頁面的先后順序）
作者嵌入樣式
作者行內(nèi)樣式

瀏覽器會按照上述順序依次檢查每個來源的樣式，并在有定義的情況下笨蚁，更新對每
個標(biāo)簽屬性值的設(shè)定睹晒。整個檢查更新過程結(jié)束后，再將每個標(biāo)簽以最終設(shè)定的樣式
顯示出來括细。

2伪很、層疊規(guī)則
層疊規(guī)則一：找到應(yīng)用給每個元素和屬性的所有聲明。瀏覽器在加載每個頁面時奋单，
都會據(jù)此查到每一條CSS 規(guī)則锉试，標(biāo)識出所有受到影響的HTML 元素。
層疊規(guī)則二：按照順序和權(quán)重排序览濒。瀏覽器依次檢查5 個來源呆盖，并設(shè)定匹配的屬性。
如果匹配的屬性在下一個來源也有定義贷笛，則更新該屬性的值应又，如此循環(huán)，直到檢查
完頁面中所有標(biāo)簽受影響屬性的全部5 個來源為止乏苦。最終某個屬性被設(shè)定成什么值株扛，
就用什么值來顯示。
層疊規(guī)則三：按特指度排序汇荐。特指度（specificity）其實表示一條規(guī)則有多明確洞就。如果沒有特指度的考量，那為了讓恰當(dāng)?shù)臉邮狡鹱饔寐＜荩峙挛覀兙兔獠涣艘l繁變換樣式表中規(guī)則的順序了奖磁。

p {font-size:12px;}
p.largetext {font-size:16px;}
<p class="largetext">A bit of text</p>

將顯示16 像素高的文本，因為第二條規(guī)則的選擇符既包含標(biāo)簽名繁疤，也包含類名咖为，所
以意義更明確（特指度更高）秕狰，結(jié)果第二條規(guī)則會覆蓋第一條規(guī)則中的同名屬性。

計算特指度
下面我們具體講一講怎么計算選擇符的特指度躁染。首先鸣哀，有一個簡單的記分規(guī)則，即
對每個選擇符都要按“ICE”公式計算三個值：I - C - E吞彤。

ICE 并非真正的三位數(shù)我衬，只不過大多情況下把結(jié)果看成一個三位數(shù)沒有問題，三位數(shù)最大的勝出饰恕。但是挠羔，千萬得知道0-1-12 與0-2-0 相比，仍然是0-2-0 的特指度更高埋嵌。

三個字母間的短橫線是分隔符破加，并非減號。針對這個公式的計分辦法如下：
(1). 選擇符中有一個ID雹嗦，就在I 的位置上加1范舀；
(2). 選擇符中有一個類，就在C 的位置上加1了罪；
(3). 選擇符中有一個元素（標(biāo)簽）名锭环，就在E 的位置上加1；
(4). 得到一個三位數(shù)泊藕。
好了辅辩，下面通過幾個例子來理解特指度。

P 0-0-1 特指度=1
p.largetext 0-1-1 特指度=11
p#largetext 1-0-1 特指度=101
body p#largetext 1-0-2 特指度=102
body p#largetext ul.mylist 1-1-3 特指度=113
body p#largetext ul.mylist li 1-1-4 特指度=114

在此吱七，每個選擇符都比前一個選擇符的特指度更高汽久。
層疊規(guī)則四：順序決定權(quán)重。如果兩條規(guī)則都影響某元素的同一個屬性踊餐，而且它們
的特指度也相同，則位置最靠下（或后聲明）的規(guī)則勝出臀稚。

查理版簡單層疊要點
在這個查理版里吝岭，只要記住三條規(guī)則就夠了。這三條規(guī)則適合所有情況吧寺。
規(guī)則一：包含ID 的選擇符勝過包含類的選擇符窜管，包含類的選擇符勝過包含標(biāo)簽名的選擇符。
規(guī)則二：如果幾個不同來源都為同一個標(biāo)簽的同一個屬性定義了樣式稚机，行內(nèi)樣式勝過嵌入樣式幕帆，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中赖条，具有相同特指度的樣式失乾，后聲明的勝過先聲明的常熙。規(guī)則一勝過規(guī)則二。換句話說碱茁，如果選擇符更明確（特指度更高）裸卫，無論它在哪里，都會勝出纽竣。
規(guī)則三：設(shè)定的樣式勝過繼承的樣式墓贿，此時不用考慮特指度（即顯式設(shè)定優(yōu)先）。

規(guī)則聲明
CSS 屬性值主要分以下三類：文本值蜓氨，數(shù)字值聋袋，顏色值。

1穴吹、文本值
所有CSS 屬性都有文本值舱馅。

2、數(shù)字值
數(shù)字值用于描述元素的各種長度（在CSS 里刀荒，“長度”的含義比較廣代嗤，還包括高度、
寬度缠借、粗細(xì)干毅，等等）。數(shù)字值主要分兩類：絕對值和相對值泼返。
絕對值描述的是一個真實的長度（比如硝逢，6 英寸），而相對值則是相對于其他基準(zhǔn)的描述（比如“是某某的兩倍長”）绅喉。

絕對值	單位	縮寫示例
英寸	in	height:6in
厘米	cm	height:40cm
毫米	mm	height:500mm
點	pt	height:60pt
皮卡	pc	height:90pc
像素	px	height:72px

相對值	單位	縮寫示例
Em	em	height:1.2em
Ex	ex	height:6ex
百分比	%	height:120%

em 和ex 都是字體大小的單位渠鸽，但在CSS 中，它們作為長度單位適用于任何元素柴罐。
先說說em 徽缚，它表示一種字體中字母M的寬度，因此它的具體大小取決于你使用的字
體革屠。而ex 呢凿试，等于給定字體中字母x 的高度（小寫字母x 代表一種字體的字母中間部分的高度，不包括字母上似芝、下突出的部分——如d 和p 上下都出頭兒）那婉。百分比非常適合設(shè)定被包含元素的寬度，此時的百分比就是相對于寬度而言的党瓮。

3详炬、顏色值
（1）RGB 顏色值（R, G , B）
每種顏色都可以用一個0 到255（包含）之間的值指定。格式如下：
rgb(r, g, b)
比如寞奸，rgb(0,255,0)表示純綠色呛谜。

（2）RGB 百分比值（R%, G%, B%）
這是用百分比來表示每種顏色值的一種方法在跳，格式如下：
r%, g%, b%
可以接受的值是0%到100%。雖然以這種方法只能表示區(qū)區(qū)一百萬（100 × 100 ×
100）種顏色呻率，但對我們絕大數(shù)人來說硬毕，也已經(jīng)足夠了。同樣礼仗，使用百分比表示的顏色值吐咳，比使用十六進(jìn)制更容易猜到你想要的顏色。
舉個例子元践，100%, 0%, 0%是純紅色韭脊，0%, 100%, 0%是純綠色，而46%, 76%, 80%接近
前面用十六進(jìn)制值作例子分析的深藍(lán)綠色单旁。

（3）HSL (色相, 飽和度%, 亮度%)
HSL 格式如下：
HSL(0,0%,0%)
HSL 比我們見過的各種RGB 方式更直觀沪羔，因為使用它更容易寫出和看懂顏色。
HSL 顏色中的第一個值表示色相象浑，也就是一個實際的顏色蔫饰，比如紅色和綠色。所有
顏色圍繞色相環(huán)（也叫色輪）一周愉豺，而色相值以圓周上的度數(shù)表示篓吁。
紅色是0 或360，青色是與之相對的180蚪拦。以下是彩虹七色在色輪中大致的色相值杖剪。

紅：0
橙：35
黃：60
綠：125
藍(lán)：230
靛：280
紫：305

至于飽和度和亮度，相對就容易理解多了驰贷。飽和度設(shè)定有多少顏色盛嘿，灰色的飽和度
低，而強(qiáng)烈的色彩飽和度高括袒。亮度設(shè)定顏色的明暗次兆，0%就是黑色，100%就是白色箱熬，而中間的值是實際能看到的色相类垦。
如果把上面七彩虹的色相值都記住，或者就放在手邊城须，那么你會發(fā)現(xiàn)想寫出什么顏
色都不在話下。RGB 和十六進(jìn)制顏色值米苹，都要求你事先在大腦里先混合顏色糕伐，而HSL則只有一個表示顏色的值。從把飽和度和亮度都設(shè)定為50%蘸嘶，就可以輕松調(diào)制出你想要的任何顏色來良瞧。

（4）Alpha 通道
RGB 和HSL 都支持Alpha 通道陪汽，用于設(shè)置顏色的不透明度（換句話說，就
是能夠透過多少背景）褥蚯。相應(yīng)的格式分別叫RGBA 和HSLA挚冤。其中，兩種格式中的A
（alpha）值可以是1（完全不透明）也可以是0（完全透明）赞庶，或者介于1 和0 之間的小數(shù)值训挡。