在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎麼遇到過。我們不會在這篇文檔中面面俱到地描述他們，而只是這些對於掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值： * 數值: 長度值，用於指定例如元素寬度、邊框（border）寬度或字體大小；以及無單位整數。用於指定例如相對線... ...
在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎麼遇到過。我們不會在這篇文檔中面面俱到地描述他們，而只是這些對於掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值：
- 數值: 長度值，用於指定例如元素寬度、邊框（border）寬度或字體大小；以及無單位整數。用於指定例如相對線寬或運行動畫的次數。
- 百分比: 可以用於指定尺寸或長度——例如取決於父容器的長度或高度，或預設的字體大小。
- 顏色: 用於指定背景顏色，字體顏色等。
- 坐標位置: 例如，以屏幕的左上角為坐標原點定位元素的位置。
- 函數: 例如，用於指定背景圖片或背景圖片漸變。
數值
你會在很多地方看到CSS單位中使用到數值。這一部分將會討論數值的最常用類別。
長度和尺寸
在CSS佈局、排版等等的所有時候，你都會使用到長度/尺寸單位（<length>)。我們不妨先看一個簡單的例子——先上HTML：
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>然後是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代碼很簡單：
<p>Hello</p>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標記的兩個相似的盒子：
<div>
<div class="boxes">Fixed width layout with pixels</div>
<div class="boxes">Liquid layout with percentages</div>
</div>現在一些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的父元素是<body>元素，預設情況下是視口寬度的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.)
例如，這個代碼：
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>/* 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顏色：
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>/* 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萬種顏色：
- 色調：顏色的底色調。這個值在0到360之間，表示色輪周圍的角度。
- 飽和度：飽和度是多少？這需要一個從0-100%的值，其中0是沒有顏色（它將顯示為灰色），100%是全彩色飽和度。
- 明度：顏色有多亮或明亮？這需要一個從0-100%的值，其中0是無光（它會出現全黑的），100%是充滿光的（它會出現全白）
現在我們用HSL顏色重寫上面的例子:
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>/* 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:
<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>現在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屬性指定了一個元素後面的背景的被覆蓋程度。
為了看出他們的區別，我們來研究下麵這個例子：
<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>現在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網路開發者網站
