CSS学习摘要-数值和单位及颜色
在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萬種顏色：
現在我們用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網絡開發者網站
轉載于:https://www.cnblogs.com/tielemao/p/9118429.html
總結
以上是生活随笔為你收集整理的CSS学习摘要-数值和单位及颜色的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： k-Nearest Neighbors
- 下一篇： CSS中list-style详解