摘要：每對十六進制數代表一個通道紅色綠色或者藍色允許我們指定個可用值。例如，這個代碼給出以下結果這些值比較復雜，不太容易理解，但是它們比關鍵字更靈活您可以使用十六進制值來表示您想要在顏色方案中使用的任何顏色。

在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎么遇到過。我們不會在這篇文檔中面面俱到地描述他們，而只是這些對于掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值：

• 數值: 長度值，用于指定例如元素寬度、邊框（border）寬度或字體大小；以及無單位整數。用于指定例如相對線寬或運行動畫的次數。
• 百分比: 可以用于指定尺寸或長度——例如取決于父容器的長度或高度，或默認的字體大小。
• 顏色: 用于指定背景顏色，字體顏色等。
• 坐標位置: 例如，以屏幕的左上角為坐標原點定位元素的位置。
• 函數: 例如，用于指定背景圖片或背景圖片漸變。

數值

你會在很多地方看到CSS單位中使用到數值。這一部分將會討論數值的最常用類別。

長度和尺寸

在CSS布局、排版等等的所有時候，你都會使用到長度/尺寸單位（)。我們不妨先看一個簡單的例子——先上HTML：

 
This is a paragraph.
This is a paragraph.
This is a paragraph.

然后是CSS：

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

結果如下：

在這個例子中我們做了以下事情：

• 分別將每個段落的 margin，padding 和 border-width 設置為5 pixels, 10 pixels 和 2 pixels。一個多帶帶的margin/padding值表示所有的4個面都被設置成同樣的值。邊框也被設置成了 border 的縮寫值。
• 為三個不同的段落設置越來越大的寬度（width ）像素值，也就是意味著越往下盒子越大。
• 為三個不同的段落設置越來越大字號（ font-size）像素值，也就是意味著越往下文本越大。font-size代表字體/字形的高度。

像素 (px) 是一種絕對單位（absolute units）， 因為無論其他相關的設置怎么變化，像素指定的值是不會變化的。其他的絕對單位如下：

• mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
• pt, pc: 點（Points (1/72 of an inch)）， 十二點活字（ picas (12 points.)）

除了px之外，你很可能都不怎么使用其他的單位。

也有相對單位，他們是相對于當前元素的字號（ font-size ）或者視口viewport 尺寸。

• em:1em與當前元素的字體大小相同（更具體地說，一個大寫字母M的寬度）。CSS樣式被應用之前，瀏覽器給網頁設置的默認基礎字體大小是16像素，這意味著對一個元素來說1em的計算值默認為16像素。但是要小心—em單位是會繼承父元素的字體大小，所以如果在父元素上設置了不同的字體大小，em的像素值就會變得復雜。現在不要過于擔心這個問題，我們將在后面的文章和模塊中更詳細地介紹繼承和字體大小設置。em是Web開發中最常用的相對單位。
• ex, ch: 分別是小寫x的高度和數字0的寬度。這些并不像em那樣被普遍使用或很好地被支持。
• rem: REM（root em）和em以同樣的方式工作，但它總是等于默認基礎字體大小的尺寸；繼承的字體大小將不起作用，所以這聽起來像一個比em更好的選擇，雖然在舊版本的IE上不被支持。
• vw, vh: 分別是視口寬度的1/100和視口高度的1/100，其次，它不像rem那樣被廣泛支持。

使用相對單位是非常有用的-你可以調整你的HTML元素大小相對于你的字體或視口大小，這意味著布局將保持看起來正確，假設舉個例子是一個視障用戶的話，整個網站上的文本大小是原來的兩倍。

無單位的值

你有時候會在CSS遇到無單位的數值，這不總是一個錯誤，事實上它是在某些情況下，完全可以。例如，如果你想讓一個元素完全去除外邊框和內邊框，你可以只使用無單位的0 — 0就是0，不管前面設置的單位是什么！

margin: 0;

無單位的行高

另一個例子是 line-height 設置元素中每行文本的高度。你可以使用單位設置特定的行的高度，但使用一個無量綱的值往往更容易，它就像一個簡單的乘法因子。

注：line-height
CSS屬性中設置用于行所需要的空間，例如文本。
對于塊級元素，它指定元素中線框的最小高度。
在未替換的內聯元素中，它指定用于計算線框高度的高度。
對于替代行內元素，如 button 或其他 input 元素，line-height 沒有影響。
對于部分替代元素，line-height 依然可以影響元素的樣式布局。

動畫的數值

CSS動畫能夠讓頁面上的HTML元素動起來。我們來看一個例子，當我們把鼠標浮動到一個段落上的時候，它能夠旋轉起來。這個例子的HTML代碼很簡單：

Hello

CSS有點復雜：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

這里你可以看到一些我們之前沒有明確提到的有趣單位，但是我們感興趣的是這一行 animation-iteration-count: 5; ——此行控制著動畫啟動（這里是指光標浮動至段落上）時后會執行多少次，而且這是一個簡短無單位純數字（計算機中稱之為整型）。

以下是代碼的實際效果：

百分比

還可以使用百分比值指定可以通過特定數值指定的大部分內容。這使我們可以創建，例如，其寬度總是會移動到其父容器寬度的一定百分比的框中。這可以與那些將其寬度設置為某個單位值（如px或ems）的框進行比較，它們的長度總是保持相同的長度，即使它們的父容器的寬度發生變化。

讓我們舉個例子來說明這個問題。

首先，用HTML標記的兩個相似的盒子：

  
Fixed width layout with pixels
  
Liquid layout with percentages

現在一些CSS來裝飾這些盒子：

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

這給了我們以下結果：

在這里，我們給兩個divs一些 [margin] [height] [font-size] [border] 和 [color] 。

然后我們給第一個div和第二個div不同的 [background-color]，所以我們可以很容易地區分開他們。 我們還將第一個div的 [width]設置為650px，將第二個div的寬度設置為75％。 這樣做的效果是，第一個div始終具有相同的寬度，即使視口大小被調整（當視口變得比屏幕更窄時，它將從屏幕上消失），而第二個div的寬度隨著視口（viewport ）的變化而變化，使其始終保持其父元素的75％。 在這個例子中，div的父元素是元素，默認情況下是視口寬度的100％。

注意: 您可以通過調整本文中的瀏覽器窗口來看到這種效果；
margin屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負數。

font-size CSS 屬性中指定字體的大小。因為該屬性的值會被用于計算em和ex長度單位，定義該值可能改變其他元素的大小。

border屬性是一個用于設置各種多帶帶的邊界屬性的簡寫屬性。border可以用于設置一個或多個以下屬性的值： border-width, border-style, border-color。

background-color 會設置元素的背景色, 屬性的值為顏色值或關鍵字transparent二者選其一。

width 屬性指定了元素內容區的寬度. 內容區在元素padding，border和margin里面。

我們也可以設置font-size的百分比為200%。它將和你預計的工作方式有一點不同，但這是講得通的，它的新大小是相對于父容器的字體大小的，就像em一樣。在這種情況下，父容器的字體大小為16px——頁面的默認值，所以計算的值為16px的200%，或32px。這和em的風格確實很類似—200%基本上和2em一樣。

這兩種不同的框布局類型通常稱為動態（流體）布局（如瀏覽器視口大小的變化），固定寬度布局（不管怎樣都保持不變）：

• 可以使用動態布局來確保標準文檔始終適合于屏幕，并且可以在不同的移動設備屏幕大小上表現良好。
• 一個固定寬度的布局可以用來保持在線地圖的大小相同；瀏覽器視口可以在地圖上滾動，只在一個時間內查看一定數量的地圖。您可以立即看到的量取決于您的視口有多大。

顏色

CSS中指定顏色的方法有很多，其中一些是最近實現的。CSS中到處都可以使用相同的顏色值，無論是指定文本顏色、背景顏色，還是其他任何顏色。

現代計算機中可用的標準顏色系統是24位，通過不同的紅、綠、藍通道，每個通道有256種不同的值，從而顯示出大約1670萬種不同的顏色。 (256 x 256 x 256 = 16,777,216.)

讓我們運行不同的可用類型的顏色值。

關鍵詞（色彩關鍵字）

最簡單、最古老的顏色類型，CSS顏色關鍵詞。這些都是特定的字符串代表特定的顏色值。例如red代表紅色。

這很容易理解，盡管它只能讓我們指定明顯的顏色基元。有大約165個不同的關鍵字可用于現代Web瀏覽器-見 full color keyword list.

你可能會在工作中經常使用諸如紅色、黑色和白色這樣的純顏色，但除此之外，你還想使用另一種顏色系統。

十六進制值

下一個常用的顏色系統是十六進制顏色或十六進制代碼。每個顏色包括一個哈希/磅符號（#）和其后面緊跟的六個十六進制數，其中每個十六進制數可以是0和F之間的一個值（一共16個），0123456789abcdef。每對十六進制數代表一個通道（紅色、綠色或者藍色）允許我們指定256個可用值。 (16 x 16 = 256.)

例如，這個代碼：

This paragraph has a red background
This paragraph has a blue background
This paragraph has a kind of pinky lilac background

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

給出以下結果：

這些值比較復雜，不太容易理解，但是它們比關鍵字更靈活——您可以使用十六進制值來表示您想要在顏色方案中使用的任何顏色。

RGB

我們要討論的第三個方案是RGB。一個RGB值是一個函數rgb() -這是給定的三個參數表示的紅色，綠色和藍色通道的顏色值，在大致相同的方式作為十六進制值。與RGB的區別在于，每個通道不是由兩個十六進制數字表示的，而是由0到255之間的十進制數表示的。

讓我們重寫上面那個例子來使用RGB顏色：

This paragraph has a red background
This paragraph has a blue background
This paragraph has a kind of pinky lilac background

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

這給出了和上面例子同樣的結果。

RGB值的支持度與十六進制不相上下，在你的工作中你可能不會遇到任何不支持它們的瀏覽器。

RGB值可以說比十六進制值更直觀，更容易理解。

注意: 為什么是255而不是256？計算機系統傾向于從0計算，而不是從1計算。所以允許256個可能的值，RGB顏色在0-255范圍值，不是1-256。

HSL

支持度比RGB稍微差一點的是HSL（不支持舊版本IE），這是開發者非常感興趣而實施的——不只是紅、綠和藍色的值，該hsl()函數接受的色相、飽和度以及明度值，以與上述三種不同的方式用來區分167萬種顏色：

1. 色調：顏色的底色調。這個值在0到360之間，表示色輪周圍的角度。
2. 飽和度：飽和度是多少？這需要一個從0-100%的值，其中0是沒有顏色（它將顯示為灰色），100%是全彩色飽和度。
3. 明度：顏色有多亮或明亮？這需要一個從0-100%的值，其中0是無光（它會出現全黑的），100%是充滿光的（它會出現全白）

現在我們用HSL顏色重寫上面的例子:

This paragraph has a red background
This paragraph has a blue background
This paragraph has a kind of pinky lilac background

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

HSL顏色模型對于常使用這樣的模型的設計師來說非常直觀。例如,找到一組色調以單配色方式使用是非常有用的。

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA 和 HSLA

RGB和HSL都有相應的模式——RGBA和HSLA——不僅允許您設置想要顯示的顏色,還有此顏色的透明度（ transparency ）。它們與與之相應的函數采用同樣的參數,再加上第四個范圍在0-1的值——設置透明度,或者說alpha通道。0是完全透明的,1是完全不透明的。

讓我們展示另一個簡單的例子,第一個HTML:

This paragraph has a transparent red background
This paragraph has a transparent blue background

現在CSS——我們正在第一段向下定位,顯示段落重疊的效果(以后你會了解更多關于定位的知識):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

結果如下：

透明的顏色更豐富的視覺效果非常有用——混合的背景,半透明的UI元素等等。

不透明度（Opacity）

還有另一種方法來指定透明度，通過CSS——opacity 屬性。
與設置某個特定顏色的透明度相比，這會設置所有選定元素以及它們的孩子節點的不透明度。

opacity屬性指定了一個元素的透明度。換言之，opacity屬性指定了一個元素后面的背景的被覆蓋程度。

為了看出他們的區別，我們來研究下面這個例子：

This paragraph is using RGBA for transparency
This paragraph is using opacity for transparency

現在CSS是：

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

結果如下：

注意區別——第一個盒子使用RGBA顏色，只有一個半透明的背景,而一切在第二個盒子里的都是透明的,包括文本。您要仔細思考使用兩者的時機——例如,當您想創建一個圖片覆蓋的標題，圖片能透過標題顯示，且標題的文本顯示不受影響，此時應該使用RGBA修改標題背景色的透明度；另一方面,當您想要創建一個動畫效果,整個UI元素從完全隱藏到可見，此時應該使用不透明度（Opacity）。

transparent 關鍵字

transparent 關鍵字表示一個完全透明的顏色，即該顏色看上去將是背景色。從技術上說，它是帶有阿爾法通道為最小值的黑色，是 rgba(0,0,0,0) 的簡寫。

currentColor 關鍵字

currentColor 關鍵字代表原始的 color 屬性的計算值。它允許讓繼承自屬性或子元素的屬性顏色屬性以默認值不再繼承。

它也能用于那些繼承了元素的 color 屬性計算值的屬性，相當于在這些元素上使用 inherit關鍵字，如果這些元素有該關鍵字的話。

附圖：大部分的色彩關鍵字和rgb表示

（譯者注：顏色譯名僅供參考。）

end
2018-5-31

全文摘錄自MDN網絡開發者網站