量單位

CSS支持許多度量，包括絕對單位（如英寸、厘米、點等），以及相對單位（如百分比和em）。在樣式規(guī)則中指定元素大小時需要各種度量值，例如border=“1px solid red”。

下面列出所有的CSS度量單位和例子：

顏色值

CSS使用顏色值來指定顏色。通常，它們用來為元素的前景（即文本）或元素的背景設置顏色，以及邊框的顏色和其他裝飾效果。

可以用各種格式指定顏色值。下表列出了所有可能的格式：

十六進制碼

十六進制碼是用6位十六進制的數(shù)來表示顏色的值。前兩個數(shù)字（RR）表示紅色值，后兩個數(shù)字是綠色值（GG），最后兩個數(shù)字是藍色值（BB）。每個十六進制代碼以符號#開頭。

短十六進制碼

這是十六進制碼的簡稱。重復每個數(shù)字后得到一個相等的六位數(shù)顏色值。例如：#6A7變?yōu)?66AA77。短十六進制碼都以符號#開頭。

RGB值

此格式的顏色值使用rgb()屬性指定的，該屬性接受三個值，分別表示紅色、綠色和藍色，每個值都是介于0和255之間的整數(shù)或百分比。

TML 顏色

HTML 顏色由紅色、綠色、藍色混合而成。

顏色值

HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。

這個表格給出了由三種顏色混合而成的具體效果：

1600萬種不同顏色

三種顏色 紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

在下面的顏色表中你會看到不同的結果，從0到255的紅色，同時設置綠色和藍色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。

灰暗色調(diào)

以下展示了灰色到黑色的漸變

Web安全色?

數(shù)年以前，當大多數(shù)計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數(shù)百萬種顏色，不過做選擇還是你自己。

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調(diào)色板時，所有的計算機能夠正確地顯示所有的顏色。

站開發(fā)入門指南：多種色值寫法。

接下來給大家介紹幾個常用的設置顏色色值的方式。顏色色值的設置在樣式設置中是非常常用的，包括背景顏色、漸變顏色、邊框顏色、字體顏色等等，很多的地方都可能需要用到顏色色值的設置。

·之前已經(jīng)講過一種最基礎的方式，就是這種關鍵字的方式，也就是用英文單詞這樣的方式。之前講過有很多顏色的名字都是可以用的，像之前一直用的設置顏色的方法也都是這種色值的方式，這種關鍵字的方式。

·另外一種是非常常用的，是十六進制。十六進制概念如果不理解其實也沒有關系，可以簡單的把它理解為有十六個數(shù)，0123456789，然后是aobcdef，從0到f是從小到大的邏輯。

它的寫法大概是這樣的樣子，16進制的顏色的寫法大概是這樣的樣子。這個樣子的特點就是一開頭這里是有個井號，然后是兩兩一組的，第一組就是表示紅色，第二組是表示綠色，第三組是表示藍色。

·ff就表示顏色，比如這里是紅色，它是最濃的，顏色強度是最大的。三種顏色就相當于也是三原色去拼，拼起來就混合成一種最終的顏色效果。

·00就表示顏色沒有綠色的色值，這里如果也是ff就表示藍色也是最濃的。所以可以嘗試的去把它設置一下，會發(fā)現(xiàn)它就變成了這樣的顏色。

·像這種寫法其實如果兩兩的字符是一樣，其實可以簡寫成這樣的一種寫法。這兩者其實相當于是一樣的了。

有幾種非常常用的顏色的色值，其實一看就應該知道的，給大家羅列一下。比如這種3個f，也就是這種6個f，其實是一樣的，這個明顯就是一個白色了，3個0就是沒有，這個跟6個0是一樣的，就是純黑。

像這種直接寫6個的，就是紅色，正紅色，ff放中間其實就是綠色，這樣就是一個藍色，這個應該都很好理解，就是三原色的概念。如果不了解三原色的概念，可以自己去查資料了解一下，可以給它去設置一下，看一下是不是藍色，大家可以看到就是一個藍色，這是16進制的最基本的用法。

但是它其實還可以加兩位，加兩位之后，最后的兩位就是表示的是不透明度的概念。不透明度的概念其實這里也可以稱作是alpha，阿爾法其實就是可以表示是不透明度的概念。像這00就是最小，就是0的不透明度，就是最小的不透明度，就是完全透明。

也可以試一下，比如用這里給它加一個00，這就沒有了，ff其實不加不透明度的設定，其實它的不透明度就是1，就是完全的看得見，沒有任何的透明的狀態(tài)。

像這個顏色，這個16進制的色值，其實是不用去記的，因為很多設計軟件里面都非常方便的去給到顏色的16進制的色值。比如可以看到這樣的figma設計軟件，選擇填充顏色，會看到這里有很多的顏色的選項可以選，其中最好復制的就是HEX，HEX就是表示16進制，16進制顏色一復制，放到CSS代碼里面，就直接就可以用了。它就可以生效了，所以是不用去記，不用去算某個色值是多少。

·然后像其他的后面要介紹這種rgb、hsl這幾種，就是這里也能夠讓我們?nèi)ズ芎玫娜ブ谰唧w的顏色的色值的設置。但是復制起來我覺得最方便的還是HEX，也就是16進制的，所以這個東西一般來說就是直接復制過來用。

·然后來看下RG.B，RG.B就很好理解了，RGB就是red、green還有就是blue，就是也是三原色，就這樣一個設置，注意它的寫法是這樣的，RGB然后一個原跨號，然后里面是三個顏色的色值，然后中間用這種逗號來分隔一下，然后這個都是每一個顏色的色值都是0到255，0到255，0是最小，25是最大。

·如果說像這個，車里就是紅色強度已經(jīng)是最強了，是這樣的一個意思，它這個數(shù)值越小，顏色強度就越弱。比如說可以把這個顏色給它復制過來看一下，它就是這樣的一個顏色，比如說可以調(diào)一下，比如說125就變成這樣的一個顏色了。

·那它也有一個RGBA，其實就是后面再加一位這種0到1的值，比如說0.2，0.2就是它的一個不透明度了，不透明度，比如說給它這里去設置一個0.2，那它就有這個不透明度透明的效果了。

·這個是RGB和RG.BA，這個也很好理解，注意它每一位都是0到255這樣的一個設置方式，每一位的這個數(shù)值。

·如果是這個純白純黑，其實這里255、255、255，在255、255、255，三個255其實就是一個純白，跟這個ff是一樣的，然后純黑是這樣，零零零三個0。

·那這個其他的紅色、這個就更好理解。紅色就是255，其他都是0。綠色就是第二個255，其他都是0。藍色255，其他都是0。

·來看一下另外一個叫HSL和H.S.LA。這個a大家一看就知道什么意思了，a還是阿爾法的意思，也就是它的不透明的值。

·HSL是什么意思？a是一種顏色模式。它其實英文的全稱應該是Hue Saturation，還有l(wèi)ightnes.s，也就是色相、飽和度、亮度三個這樣的方面來設置顏色的值。它的寫法大概是這個樣子，給大家看一下，這個我也很少用，是這樣的寫法。

·它這里其實就是HSL，三個部分分別對應H.SL。H其實是色輪的概念，它就是有個360度，所以H的范圍是0到360。另外的兩個S就是0到100%，L也是一樣的0%到10.0%。如果是HSLA，它其實也是0到1，比如0.2，是這樣一個模式。

所以它這個寫法其實跟RGB的基本的格式是一樣的，都是它的顏色模式的名字，圓括號，里面再是每一個對應的設置內(nèi)容的值。這是這三種顏色的色值的設置模式。

·自己最常用的就是16進制的，還有比較常用的，還有就是RGB和RGBA。