CSS的值與單位
CSS的值與單位
CSS中使用的每個屬性都允許擁有一個或一組值，檢視MDN上的任何屬性頁將幫助您理解對任何特定屬性有效的值。在本節課中，我們將學習一些最常用的值和單位。
什麼是CSS的值?
在CSS規範和MDN的屬性頁上，您將能夠發現值的存在，因為它們將被尖括號包圍，如<color>或<length>。當您看到值<color>對特定屬性有效時，這意味著您可以使用任何有效的顏色作為該屬性的值，如<color>參考頁面所列。
注意：您還將看到被稱為資料型別的CSS值。這些術語基本上是可以互換的——當你在CSS中看到一些被稱為資料型別的東西時，它實際上只是一種表示值的奇特方式。
注意： 是的，CSS值傾向於使用尖括號表示，以區別於CSS屬性(例如color屬性和<color>資料型別)。您可能還會混淆CSS資料型別和HTML元素，因為它們都使用尖括號，但這不太可能——它們在完全不一樣的上下文中使用。
在下面的例子中，我們使用關鍵字設定標題的顏色，使用rgb()函式設定背景：
h1 { color: black; background-color: rgb(197,93,161); }
CSS中的值是一種定義允許子值集合的方法。這意味著如果您看到<color>是有效的，那麼您就不需要考慮可以使用哪些不同型別的顏色值—關鍵字、十六進位制值、rgb()
<color>值，則可以使用它們任意一個。MDN上針對每個值的頁面將提供有關瀏覽器支援的資訊。例如，如果您檢視<color>的頁面，您將看到瀏覽器相容性部分列出了不同型別的顏色值以及對它們的支援。
讓我們來看看您可能經常遇到的一些值和單位型別，並提供一些示例，以便您嘗試使用各種值的可能性。
數字，長度和百分比
您可能會發現自己在CSS中使用了各種數值資料型別。 以下全部歸類為數值：
| 數值型別 | 描述 |
|---|---|
<integer> |
<integer>是一個整數，比如1024或-55。 |
<number> |
<number>表示一個小數——它可能有小數點後面的部分，也可能沒有，例如0.255、128或-1.2。 |
<dimension> |
<dimension>是一個<number>，它有一個附加的單位，例如45deg、5s或10px。<dimension>是一個傘形類別，包括<length>、<angle>、<time>和<resolution>型別。 |
<percentage> |
<percentage>表示一些其他值的一部分，例如50%。百分比值總是相對於另一個量，例如，一個元素的長度相對於其父元素的長度。 |
長度
最常見的數字型別是<length>，例如10px(畫素)或30em。CSS中有兩種型別的長度——相對長度和絕對長度。重要的是要知道它們之間的區別，以便理解他們控制的元素將變得有多大。
絕對長度單位
以下都是絕對長度單位——它們與其他任何東西都沒有關係，通常被認為總是相同的大小。
| 單位 | 名稱 | 等價換算 |
|---|---|---|
cm |
釐米 | 1cm = 96px/2.54 |
mm |
毫米 | 1mm = 1/10th of 1cm |
Q |
四分之一毫米 | 1Q = 1/40th of 1cm |
in |
英寸 | 1in = 2.54cm = 96px |
pc |
十二點活字 | 1pc = 1/16th of 1in |
pt |
點 | 1pt = 1/72th of 1in |
px |
畫素 | 1px = 1/96th of 1in |
這些值中的大多數在用於列印時比用於螢幕輸出時更有用。例如，我們通常不會在螢幕上使用cm。惟一一個您經常使用的值，估計就是px(畫素)。
相對長度單位
相對長度單位相對於其他一些東西，比如父元素的字型大小，或者檢視埠的大小。使用相對單位的好處是，經過一些仔細的規劃，您可以使文字或其他元素的大小與頁面上的其他內容相對應。下表列出了web開發中一些最有用的單位。
| 單位 | 相對於 |
|---|---|
em |
在 font-size 中使用是相對於父元素的字型大小，在其他屬性中使用是相對於自身的字型大小，如 width |
ex |
字元“x”的高度 |
ch |
數字“0”的寬度 |
rem |
根元素的字型大小 |
lh |
元素的line-height |
vw |
視窗寬度的1% |
vh |
視窗高度的1% |
vmin |
視窗較小尺寸的1% |
vmax |
檢視大尺寸的1% |
探索一個例子
在下面的示例中，您可以看到一些相對長度單位和絕對長度單位的行為。第一個框以畫素為單位設定width。作為一個絕對單位，這個寬度將保持不變，無論其他如何變化。
第二個框的寬度設定為vw(視口寬度)單位。這個值相對於視口寬度，所以10vw是視口寬度的10%。如果您更改瀏覽器視窗的寬度，那麼框的大小應該會更改，但是這個示例使用<iframe>嵌入到頁面中，所以這將不起作用。要檢視實際情況，您必須在開啟示例的瀏覽器選項卡後嘗試該示例試一試。
第三個盒子使用em單位。這些是相對於字型大小的。我在包含<div>的元素上設定了一個1em的字型大小，它有一個.wrapper類。將這個值更改為1.5em，您將看到所有元素的字型大小都增加了，但是隻有最後一項會變寬，因為寬度與字型大小有關。
按照上面的說明操作之後，嘗試以其他方式處理這些值，看看您將收穫什麼。
.wrapper { font-size: 1em; } .px { width: 210px; } .vw { width: 20vw; } .em { width: 10em; }
<div class="wrapper"> <div class="box px">I am 200px wide</div> <div class="box vw">I am 10vw wide</div> <div class="box em">I am 10em wide</div> </div>
ems and rems
em和rem是您在從框到文字調整大小時最常遇到的兩個相對長度。瞭解這些方法是如何工作的以及它們之間的區別是很有意義的，尤其是當您開始學習更復雜的主題時，比如樣式化文字或CSS佈局。下面的示例提供了一個演示。
HTML是一組巢狀的列表—我們總共有三個列表，並且兩個示例都有相同的HTML。唯一的區別是第一個類具有ems，第二個類具有rems。
首先，我們將16px設定為<html>元素的字型大小。
概括地說，在排版屬性中 em 單位的意思是“父元素的字型大小”。帶有ems類的<ul>內的<li>元素從它們的父元素中獲取大小。因此，每一個連續的巢狀級別都會逐漸變大，因為每個巢狀的字型大小都被設定為1.3em—是其父巢狀字型大小的1.3倍。
概括地說，rem單位的意思是“根元素的字型大小”。(“根em”的rem標準。)<ul>內的<li>元素和一個rems類從根元素(<html>)中獲取它們的大小。這意味著每一個連續的巢狀層都不會不斷變大。
但是，如果您在CSS中更改<html>字型大小，您將看到所有其他相關內容都發生了更改，包括rem和em大小的文字。
html { font-size: 16px; } .ems li { font-size: 1.3em; } .rems li { font-size: 1.3rem; }
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
百分比
在許多情況下，百分比與長度的處理方法是一樣的。百分比的問題在於，它們總是相對於其他值設定的。例如，如果將元素的字型大小設定為百分比，那麼它將是元素父元素字型大小的百分比。如果使用百分比作為寬度值，那麼它將是父值寬度的百分比。
在下面的示例中，兩個百分比大小的框和兩個畫素大小的框具有相同的類名。這兩款相機分別為200px和40%寬。
不同之處在於，第二組兩個框位於一個400畫素寬的包裝器中。第二個200px寬的盒子和第一個一樣寬，但是第二個40%的盒子現在是400px的40%——比第一個窄多了!
嘗試更改包裝器的寬度或百分比值，看看這是如何工作的。
.wrapper { width: 400px; border: 5px solid rebeccapurple; } .px { width: 300px; } .percent { width: 50%; }
<div class="box px">I am 200px wide</div> <div class="box percent">I am 40% wide</div> <div class="wrapper"> <div class="box px">I am 200px wide</div> <div class="box percent">I am 40% wide</div> </div>
下一個示例以百分比設定字型大小。每個<li>都有80%的字型大小，因此巢狀列表項在從父級繼承其大小時將逐漸變小。
li { font-size: 80%; }
<ul>
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
注意，雖然許多值接受長度或百分比，但也有一些值只接受長度。您可以在MDN屬性引用頁面上看到它能接受哪些值。如果允許的值包括<length-percent>，則可以使用長度或百分比。如果允許的值只包含<length>，則不可能使用百分比。
數字
有些值接受數字，不新增任何單位。接受無單位數字的屬性的一個例子是不透明度屬性（opacity），它控制元素的不透明度(它的透明程度)。此屬性接受0(完全透明)和1(完全不透明)之間的數字。
在下面的示例中，嘗試將不透明度值更改為0到1之間的各種小數值，並檢視框及其內容是如何變得透明或者不透明的。
.box { opacity: 0.7; }
<div class="wrapper"> <div class="box">I am a box with opacity</div> </div>
注意: 當您在CSS中使用數字作為值時，它不應該用引號括起來。
顏色
在CSS中指定顏色的方法有很多，其中一些是最近才實現的。在CSS中，相同的顏色值可以在任何地方使用，無論您指定的是文字顏色、背景顏色還是其他顏色。
現代計算機的標準顏色系統是24位的，它允許通過不同的紅、綠、藍通道的組合顯示大約1670萬種不同的顏色，每個通道有256個不同的值(256 x 256 x 256 = 16,777,216)。讓我們來看看在CSS中指定顏色的一些方法。
注意：在本教程中，我們將研究具有良好瀏覽器支援的常用指定顏色的方法；雖然還有其他的，但是他們沒有很好的支援，也不太常見。
顏色關鍵詞
在這學習示例或MDN上的其他示例中，您經常會看到使用的顏色關鍵字，因為它們是一種指定顏色的簡單易懂的方式。有一些關鍵詞，其中一些有相當有趣的名字！您可以在頁面上看到<color>值的完整列表。
在下面的示例中嘗試使用不同的顏色值，以瞭解它們是如何工作的。
十六進位制RGB值
您可能遇到的下一種顏色值型別是十六進位制程式碼。每個十六進位制值由一個雜湊/磅符號(#)和六個十六進位制數字組成，每個十六進位制數字都可以取0到f(代表15)之間的16個值中的一個——所以是0123456789abcdef。每對值表示一個通道—紅色、綠色和藍色—並允許我們為每個通道指定256個可用值中的任意一個(16 x 16 = 256)。
這些值有點複雜，不太容易理解，但是它們比關鍵字更通用——您可以使用十六進位制值來表示您想在配色方案中使用的任何顏色。
.one { background-color: #02798b; } .two { background-color: #c55da1; } .three { background-color: #128a7d; }
<div class="wrapper"> <div class="box one">#02798b</div> <div class="box two">#c55da1</div> <div class="box three">128a7d</div> </div>
同樣，大膽嘗試更改值，看看顏色如何變化吧！
RGB 和 RGBA的值
我們將在這裡討論的第三種方案是RGB。RGB值是一個函式—RGB()—它有三個引數，表示顏色的紅色、綠色和藍色通道值，與十六進位制值的方法非常相似。RGB的不同之處在於，每個通道不是由兩個十六進位制數字表示的，而是由一個介於0到255之間的十進位制數字表示的——這有點容易理解。
讓我們重寫上一個例子，使用RGB顏色：
.one { background-color: rgb(2, 121, 139); } .two { background-color: rgb(197, 93, 161); } .three { background-color: rgb(18, 138, 125); }
<div class="wrapper"> <div class="box one">rgb(2, 121, 139)</div> <div class="box two">rgb(197, 93, 161)</div> <div class="box three">rgb(18, 138, 125)</div> </div>
您還可以使用RGBA顏色——它們的工作方式與RGB顏色完全相同，因此您可以使用任何RGB值，但是有第四個值表示顏色的alpha通道，它控制不透明度。如果將這個值設定為0，它將使顏色完全透明，而設定為1將使顏色完全不透明。介於兩者之間的值提供了不同級別的透明度。
注意: 在顏色上設定alpha通道與使用我們前面看到的opacity屬性有一個關鍵區別。當你使用不透明度時，你讓元素和它裡面的所有東西都不透明，而使用RGBA顏色只讓你指定的顏色不透明。
在下面的例子中，我添加了一個背景圖片到我們的彩色方塊的包含塊中。然後我設定了不同的不透明度值——注意當alpha通道值較小時， 背景如何顯示的。
.one { background-color: rgba(2, 121, 139, .3); } .two { background-color: rgba(197, 93, 161, .7); } .three { background-color: rgba(18, 138, 125, .9); }
<div class="wrapper"> <div class="box one">rgba(2, 121, 139, .3)</div> <div class="box two">rgba(197, 93, 161, .7)</div> <div class="box three">rgba(18, 138, 125, .9)</div> </div>
在本例中，嘗試更改alpha通道值，看看它如何影響顏色輸出。
注意：在某種程度上，現代瀏覽器得到了更新，從而讓rgba()和rgb()（以及hsl()和hsla();見下文）成為彼此的純別名並開始表現完全相同，因此rgba() 和rgb()接受帶有和不帶有alpha通道值的顏色。 嘗試將上面示例的rgba()函式更改為rgb()，看看顏色是否仍然有效！ 使用哪種樣式由您決定，但是將非透明和透明的顏色定義分開使用不同的功能可以（非常）更好地支援瀏覽器，並且可以直觀地指示程式碼中定義透明顏色的位置。
HSL 和 HSLA 的值
與RGB相比，HSL顏色模型的支援稍差一些(在舊版本的IE中不支援)，它是在設計師們感興趣之後實現的。hsl()函式接受色調、飽和度和亮度值作為引數，而不是紅色、綠色和藍色值，這些值的不同方式組合，可以區分1670萬種顏色：
- 色調： 顏色的底色。這個值在0和360之間，表示色輪周圍的角度。
- 飽和度： 顏色有多飽和？ 它的值為0 - 100%，其中0為無顏色(它將顯示為灰色陰影)，100%為全色飽和度
- 亮度：顏色有多亮？ 它從0 - 100%中獲取一個值，其中0表示沒有光(它將完全顯示為黑色)，100%表示完全亮(它將完全顯示為白色)
我們可以更新RGB的例子來使用HSL顏色，就像這樣:
.one { background-color: hsl(188, 97%, 28%); } .two { background-color: hsl(321, 47%, 57%); } .three { background-color: hsl(174, 77%, 31%); }
<div class="wrapper"> <div class="box one">hsl(188, 97%, 28%)</div> <div class="box two">hsl(321, 47%, 57%)</div> <div class="box three">hsl(174, 77%, 31%)</div> </div>
就像RGB有RGBA一樣，HSL也有HSLA等效物，它使您能夠指定alpha通道值。我已經在下面通過將RGBA示例更改為使用HSLA顏色來演示了這一點。
.one { background-color: hsla(188, 97%, 28%, .3); } .two { background-color: hsla(321, 47%, 57%, .7); } .three { background-color: hsla(174, 77%, 31%, .9); }
<div class="wrapper"> <div class="box one">hsla(188, 97%, 28%, .3)</div> <div class="box two">hsla(321, 47%, 57%, .7)</div> <div class="box three">hsla(174, 77%, 31%, .9)</div> </div>
您可以在專案中使用這些顏色值中的任何一個。對於大多數專案，您可能會選擇一個調色盤，然後在整個專案中使用這些顏色——以及您所選擇的定義這些顏色的方法。你可以混合使用不同的顏色模型，但是為了一致性，通常最好是你的整個專案使用相同的一個!
圖片
<image>資料型別用於影象為有效值的任何地方。它可以是一個通過url()函式指向的實際影象檔案，也可以是一個漸變。
在下面的例子中，我們演示了一個影象和一個漸變作為CSSbackground-image屬性的值。
.image { background-image: url(star.png); } .gradient { background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%); }
<div class="box image"></div> <div class="box gradient"></div>
注意：<image>還有一些其他可能的值，但是這些都是較新的，並且目前對瀏覽器的支援很差。如果您想了解<image>資料型別，請檢視MDN頁面。
位置
<position>資料型別表示一組2D座標，用於定位一個元素，如背景影象(通過background-position)。它可以使用關鍵字(如top,left,bottom,right, 以及center)將元素與2D框的特定邊界對齊，以及表示框的頂部和左側邊緣偏移量的長度。
一個典型的位置值由兩個值組成——第一個值水平地設定位置，第二個值垂直地設定位置。如果只指定一個軸的值，另一個軸將預設為center。
在下面的示例中，我們使用關鍵字將背景影象從容器的頂部到右側放置了40px。
.box { height: 300px; width: 400px; background-image: url(star.png); background-repeat: no-repeat; background-position: right 40px; }
嘗試使用這些值，看看如何把這些影象移來移去。
字串和識別符號
在上面的示例中，我們看到關鍵字被用作值的地方(例如<color>關鍵字，如red,black,rebeccapurple, andgoldenrod)。這些關鍵字被更準確地描述為識別符號，一個CSS可以理解的特殊值。因此它們沒有使用引號括起來——它們不被當作字串。
在某些地方可以使用CSS中的字串，例如在指定生成的內容時。在本例中，引用該值以證明它是一個字串。在下面的示例中，我們使用非引號括起來的顏色關鍵字和引號括起來的內容字串。
.box { width:400px; padding: 1em; border-radius: .5em; border: 5px solid rebeccapurple; background-color: lightblue; } .box::after { content: "This is a string. I know because it is quoted in the CSS." }
<div class="box"></div>
函式
我們將檢視的最後一種型別的值是一組稱為函式的值。在程式設計中，函式是一段可重用的程式碼，可以多次執行，以完成重複的任務，對開發人員和計算機都是如此。函式通常與JavaScript、Python或c++等語言相關聯，但它們也以屬性值的形式存在於CSS中。我們已經在顏色部分看到了函式的作用——rgb()、hsl()等。用於從檔案返回影象的值——url()——也是一個函式。
行為更類似於傳統程式語言的值是calc()函式。這個函式使您能夠在CSS中進行簡單的計算。如果您希望計算出在為專案編寫CSS時無法定義的值，並且需要瀏覽器在執行時為您計算出這些值，那麼它特別有用。
例如，下面我們使用calc()使框寬為20% + 100px。20%是根據父容器.wrapper的寬度來計算的，因此如果寬度改變，它也會改變。我們不能事先做這個計算，因為我們不知道父類的20%是多少，所以我們使用calc()來告訴瀏覽器為我們做這個計算。
.wrapper { width: 400px; } .box { width: calc(20% + 100px); }
<div class="wrapper"> <div class="box">My width is calculated.</div> </div>
總結
本文簡要介紹了您可能會遇到的最常見的值和單位型別。你可以看看所有不同型別的CSS的值和單位參考頁面；當你學習這些課程時，你將會遇到很多這樣的情況。
需要記住的關鍵一點是，每個屬性都有一個已定義的允許值列表，每個值都有一個定義來解釋子值是什麼。然後您可以在MDN上檢視詳細資訊。
例如，理解<image>還允許您建立一個顏色漸變有意義的，但也許這個章節並不會提供太多明顯的相關知識！