**CSS中使用的每個(gè)屬性都有一個(gè)值類(lèi)型，定義該屬性允許的值集。**查看MDN上的任何屬性頁(yè)將幫助您理解與值類(lèi)型相關(guān)聯(lián)的值，這些值類(lèi)型對(duì)任何特定屬性都有效。本節(jié)課我們將學(xué)習(xí)一些最常用的值類(lèi)型，以及它們最常用的值和單位。
1、什么是CSS值?
在CSS規(guī)范和MDN上的屬性頁(yè)中，您將能夠發(fā)現(xiàn)值類(lèi)型，因?yàn)樗鼈儗⒈患饫ㄌ?hào)包圍，例如<color>或<length>。當(dāng)您看到值類(lèi)型<color>對(duì)特定屬性有效時(shí)，這意味著您可以使用任何有效的顏色作為該屬性的值，如<color>參考頁(yè)面中列出的那樣。
注意:您還將看到CSS值類(lèi)型(value types)被稱為數(shù)據(jù)類(lèi)型(data types)。這些術(shù)語(yǔ)基本上是可以互換的——當(dāng)你在CSS中看到被稱為數(shù)據(jù)類(lèi)型的東西時(shí)，它實(shí)際上只是值類(lèi)型的一種奇特的說(shuō)法。術(shù)語(yǔ)“值(value)”指的是您選擇使用的值類(lèi)型所支持的任何特定表達(dá)式。
注意:是的，CSS值類(lèi)型傾向于使用尖括號(hào)來(lái)表示，以區(qū)分它們與CSS屬性(例如，
color屬性與<color>數(shù)據(jù)類(lèi)型)。您可能也會(huì)對(duì)CSS數(shù)據(jù)類(lèi)型和HTML元素感到困惑，因?yàn)樗鼈兌际褂眉饫ㄌ?hào)，但這是不可能的——它們?cè)诜浅２煌纳舷挛闹惺褂谩?/p>
在下面的例子中，我們使用關(guān)鍵字設(shè)置標(biāo)題的顏色，使用rgb()函數(shù)設(shè)置背景顏色:
h1 {
color: black;
background-color: rgb(197, 93, 161);
}
CSS中的值類(lèi)型是一種定義允許值集合的方法。這意味著如果你看到<color>是有效的，你不需要考慮可以使用哪種不同類(lèi)型的顏色值——關(guān)鍵字、十六進(jìn)制值、rgb()函數(shù)等等。您可以使用任何可用的<color>值，前提是您的瀏覽器支持這些值。每個(gè)值的MDN頁(yè)面將為您提供有關(guān)瀏覽器支持的信息。例如，如果您查看<color>頁(yè)面，您將看到瀏覽器兼容性部分列出了不同類(lèi)型的顏色值以及對(duì)它們的支持。
讓我們看一下您可能經(jīng)常遇到的一些類(lèi)型的值和單位，并提供示例，以便您可以嘗試不同的可能值。
2、數(shù)字、長(zhǎng)度和百分比
CSS中可能會(huì)用到各種數(shù)值類(lèi)型。以下都被歸類(lèi)為數(shù)字:
| Data type | Description |
|---|---|
<integer> |
<integer>是整數(shù)，如1024或-55。 |
<number> |
<number>表示一個(gè)十進(jìn)制數(shù)——它可以有也可以沒(méi)有帶小數(shù)成分的小數(shù)點(diǎn)。例如:0.255、128或-1.2。 |
<dimension> |
<dimension>是一個(gè)帶有單位的<number>。例如，45deg，5s，或10px。<dimension>是一個(gè)包含<length>、<angle>、<time>和<resolution>類(lèi)型的總稱類(lèi)別。 |
<percentage> |
<percentage>表示其他值的一小部分。例如，50%。百分比值總是相對(duì)于另一個(gè)數(shù)量。例如，元素的長(zhǎng)度是相對(duì)于它的父元素的長(zhǎng)度的。 |
長(zhǎng)度
您最常遇到的數(shù)字類(lèi)型是<length>。例如，10px(像素)或30em。CSS中有兩種類(lèi)型的長(zhǎng)度——相對(duì)長(zhǎng)度和絕對(duì)長(zhǎng)度。了解它們之間的區(qū)別是很重要的，這樣才能理解事情會(huì)變得有多大。
絕對(duì)長(zhǎng)度單位
以下都是絕對(duì)(absolute )長(zhǎng)度單位-它們與其他任何東西都無(wú)關(guān)，并且通常被認(rèn)為總是相同的大小。
| Unit | Name | Equivalent to |
|---|---|---|
cm |
Centimeters | 1cm = 37.8px = 25.2/64in |
mm |
Millimeters | 1mm = 1/10th of 1cm |
Q |
Quarter-millimeters四分之一毫米 | 1Q = 1/40th of 1cm |
in |
Inches | 1in = 2.54cm = 96px |
pc |
Picas | 1pc = 1/6th of 1in |
pt |
Points | 1pt = 1/72nd of 1in |
px |
Pixels | 1px = 1/96th of 1in |
大多數(shù)這些單元在用于打印而不是屏幕輸出時(shí)更有用。例如，我們通常不會(huì)在屏幕上使用厘米(cm)。您通常使用的唯一值是px(像素)。
相對(duì)(Relative)長(zhǎng)度單位
相對(duì)長(zhǎng)度單位是相對(duì)于其他東西的，可能是父元素字體的大小，或者視口的大小。使用相對(duì)單位的好處是，通過(guò)一些仔細(xì)的規(guī)劃，您可以使文本或其他元素的大小相對(duì)于頁(yè)面上的其他所有內(nèi)容進(jìn)行縮放。下表列出了一些對(duì)web開(kāi)發(fā)最有用的單元。
| Unit | Relative to |
|---|---|
em |
父元素的字體大小，在排版屬性(如font-size)的情況下，以及元素本身的字體大小，在其他屬性(如width)的情況下。 |
ex |
元素字體的x高度。 |
ch |
元素字體的字形“0”的預(yù)先度量(寬度)。 |
rem |
Font size of the root element. |
lh |
元素的行高(Line height)。 |
rlh |
根元素的行高。當(dāng)用于根元素的font-size或line-height屬性時(shí)，它引用屬性的初始值。 |
vw |
視口(viewport)寬度的1%。 |
vh |
視口高度的1%。 |
vmin |
視口較小尺寸的1%。 |
vmax |
視口大尺寸的1%。 |
vb |
在根元素的塊軸方向上初始包含塊大小的1%。 |
vi |
根元素的行內(nèi)軸方向上初始包含塊大小的1%。 |
svw, svh
|
分別是小視口寬度和高度的1%。 |
lvw, lvh
|
分別為大視口寬度和高度的1%。 |
dvw, dvh
|
分別是動(dòng)態(tài)視口寬度和高度的1%。 |
ems and rems
em和rem是你在調(diào)整從盒子到文本的大小時(shí)最可能遇到的兩個(gè)相對(duì)長(zhǎng)度。理解它們是如何工作的，以及它們之間的區(qū)別是值得的，特別是當(dāng)您開(kāi)始處理更復(fù)雜的主題(如樣式文本或CSS布局)時(shí)。下面的示例提供了一個(gè)演示。
下面所示的HTML是一組嵌套列表——我們總共有兩個(gè)列表，兩個(gè)示例都有相同的HTML。唯一的區(qū)別是前者有一個(gè)類(lèi)em，后者有一個(gè)類(lèi)rem。
首先，我們將<html>元素的字體大小設(shè)置為16px。
概括一下，em單位在排版的情況下意味著“父元素的字體大小”。<ul>中帶有ems類(lèi)的<li>元素的大小取自它們的父元素。因此，每個(gè)連續(xù)的嵌套層會(huì)逐漸變大，因?yàn)槊總€(gè)嵌套層的字體大小都設(shè)置為1.3em - 1.3倍于其父層的字體大小。
簡(jiǎn)而言之，rem單位表示“根元素的字體大小”(rem代表“root em”)。<ul>中帶有rems類(lèi)的<li>元素的大小取自根元素(<html>)。這意味著每個(gè)連續(xù)的嵌套層不會(huì)繼續(xù)變大。
但是，如果您在CSS中更改<html>元素的字體大小，您將看到其他所有內(nèi)容都相對(duì)于它發(fā)生了變化——包括rem和em大小的文本。
百分比
在很多情況下，百分比與長(zhǎng)度的處理方式相同。百分比的問(wèn)題是，它們總是相對(duì)于其他值設(shè)置的。例如，如果將元素的font-size設(shè)置為百分比，則它將是該元素父元素font-size的百分比。如果對(duì)width 值使用百分比，則它將是父元素width的百分比。
在下面的示例中，兩個(gè)百分比大小的盒子和兩個(gè)像素大小的盒子具有相同的類(lèi)名。這兩組分別是40%和200px寬。
不同之處在于第二組兩個(gè)盒子位于400像素寬的包裝器內(nèi)。第二個(gè)200px寬的盒子和第一個(gè)一樣寬，但是第二個(gè)40%的盒子現(xiàn)在是400px的40%——比第一個(gè)窄很多!
請(qǐng)注意，雖然許多值類(lèi)型接受長(zhǎng)度或百分比，但有些值類(lèi)型只接受長(zhǎng)度。您可以看到在MDN屬性引用頁(yè)面上接受哪些值。如果允許的值包含<length-percentage>，則可以使用長(zhǎng)度或百分比。如果允許的值只包括<length>，則不可能使用百分比。
數(shù)字
有些值類(lèi)型接受數(shù)字，而不添加任何單位。一個(gè)接受無(wú)單位數(shù)字的屬性的例子是透明度opacity屬性，它控制元素的不透明度(它的透明度)。該屬性接受一個(gè)介于0(完全透明)和1(完全不透明)之間的數(shù)字。
注意:當(dāng)你在CSS中使用數(shù)字作為值時(shí)，它不應(yīng)該被引號(hào)包圍。
3、顏色
在CSS中有許多指定顏色的方法，其中一些是最近才實(shí)現(xiàn)的。相同的顏色值可以在CSS中的任何地方使用，無(wú)論您是指定文本顏色、背景顏色還是其他任何顏色。
現(xiàn)代計(jì)算機(jī)中可用的標(biāo)準(zhǔn)顏色系統(tǒng)支持24位顏色，它允許通過(guò)不同的紅、綠、藍(lán)通道的組合顯示大約1670萬(wàn)種不同的顏色，每個(gè)通道有256個(gè)不同的值(256 x 256 x 256 = 16,777,216)。讓我們看一下在CSS中指定顏色的一些方法。
注意:在本教程中，我們將查看具有良好瀏覽器支持的指定顏色的常用方法;還有其他方法，但它們沒(méi)有那么好的支持，也不太常見(jiàn)。
顏色關(guān)鍵字
在這里的學(xué)習(xí)部分或MDN的其他地方，你會(huì)經(jīng)?？吹绞褂妙伾P(guān)鍵字的例子，因?yàn)樗鼈兪且环N簡(jiǎn)單易懂的指定顏色的方式。有很多這樣的關(guān)鍵字，其中一些有相當(dāng)有趣的名字!您可以在頁(yè)面上看到<color>值類(lèi)型的完整列表。
十六進(jìn)制RGB值
您可能遇到的下一種顏色值類(lèi)型是十六進(jìn)制代碼。每個(gè)十六進(jìn)制值由一個(gè)散列/磅符號(hào)(#)后跟六個(gè)十六進(jìn)制數(shù)組成，每個(gè)十六進(jìn)制數(shù)可以取0到f(表示15)之間16個(gè)值中的一個(gè)-因此0123456789abcdef。每一對(duì)值代表一個(gè)通道——紅、綠和藍(lán)——并允許我們?yōu)槊總€(gè)通道指定256個(gè)可用值中的任何一個(gè)(16 x 16 = 256)。
這些值有點(diǎn)復(fù)雜，不太容易理解，但它們比關(guān)鍵字更通用——你可以使用十六進(jìn)制值來(lái)表示你想在配色方案中使用的任何顏色。
RGB和RGBA值
我們要討論的第三種方案是RGB。RGB值是一個(gè)函數(shù)——rgb()——它有三個(gè)參數(shù)，分別表示顏色的紅、綠、藍(lán)通道值，與十六進(jìn)制值的方式大致相同。與RGB的不同之處在于，每個(gè)通道不是由兩個(gè)十六進(jìn)制數(shù)字表示的，而是由0到255之間的十進(jìn)制數(shù)表示的——這更容易理解。
您可以將第四個(gè)參數(shù)傳遞給rgb()，它表示顏色的alpha通道，控制不透明度。如果您將此值設(shè)置為0，它將使顏色完全透明，而1將使其完全不透明。兩者之間的值提供了不同程度的透明度。
注意:在顏色上設(shè)置alpha通道與使用我們之前看到的opacity屬性有一個(gè)關(guān)鍵的區(qū)別。當(dāng)你使用
opacity時(shí)，你使元素和它里面的所有東西都不透明，而使用帶有alpha參數(shù)顏色的RGB只會(huì)使你指定的顏色不透明。
在下面的例子中，我們已經(jīng)添加了一個(gè)背景圖像到我們的彩色框的包含塊。然后我們將這些框設(shè)置為不同的不透明度值——注意當(dāng)alpha通道值更小時(shí)，背景顯示得更多。
HSL and HSLA values
另一種指定顏色的方法是HSL顏色模型。hsl()函數(shù)接受色調(diào)、飽和度和亮度值，而不是紅、綠和藍(lán)值，這些值用于區(qū)分1670萬(wàn)種顏色，但方式不同:
-
色調(diào)(
Hue):顏色的底色。這個(gè)值在0到360之間，表示色輪周?chē)慕嵌取?/p> -
**飽和度(Saturation)??*顏色的飽和度有多高?這個(gè)值從
0 - 100%，其中0是沒(méi)有顏色(它將顯示為灰色陰影)，100%是全彩色飽和度 -
亮度(Lightness):顏色有多淺或多亮?這需要一個(gè)
0 - 100%的值，其中0是沒(méi)有光(它將顯示完全黑色)，100%是全光(它將顯示完全白色)。
就像rgb()一樣，你可以向hsl()傳遞一個(gè)alpha參數(shù)來(lái)指定不透明度。
注意:在舊版本的CSS中，
hsl()語(yǔ)法不支持alpha參數(shù)—您需要使用名為hsla()的不同函數(shù)?，F(xiàn)在，您可以向hsl()傳遞alpha參數(shù)，但為了與舊網(wǎng)站向后兼容，仍然支持hsla()語(yǔ)法，并且具有與hsl()完全相同的行為。
您可以在項(xiàng)目中使用這些顏色值中的任何一個(gè)。對(duì)于大多數(shù)項(xiàng)目，您可能會(huì)決定一個(gè)調(diào)色板，然后在整個(gè)項(xiàng)目中使用這些顏色-以及您選擇的指定顏色的方法。你可以混合和匹配顏色模型，但是為了一致性，如果你的整個(gè)項(xiàng)目使用相同的顏色模型通常是最好的!
4、圖像
<image>值類(lèi)型在圖像為有效值的地方使用。這可以是通過(guò)url()函數(shù)指向的實(shí)際圖像文件，也可以是漸變(linear-gradient())。
在下面的示例中，我們演示了使用圖像和漸變作為CSS background-image屬性的值。
注意:
<image>還有其他一些可能的值，但是這些值較新，目前瀏覽器支持較差。如果您想了解它們，請(qǐng)查看MDN上的<image>數(shù)據(jù)類(lèi)型頁(yè)面。
5、位置
<position>值類(lèi)型表示一組2D坐標(biāo)，用于定位諸如背景圖像之類(lèi)的項(xiàng)(通過(guò)background-position)。它可以使用諸如top、left、bottom、right和center等關(guān)鍵字來(lái)將項(xiàng)與2D框的特定邊界對(duì)齊，以及長(zhǎng)度(表示與框的頂部和左側(cè)邊緣的偏移量)。
典型的位置值由兩個(gè)值組成——第一個(gè)值水平設(shè)置位置，第二個(gè)值垂直設(shè)置位置。如果您只指定一個(gè)軸的值，則另一個(gè)軸將默認(rèn)為居中(center)。
6、字符串和標(biāo)識(shí)符
在上面的示例中，我們已經(jīng)看到了將關(guān)鍵字用作值的地方(例如<color>關(guān)鍵字，如red、black、rebeccapurple和goldenrod)。這些關(guān)鍵字更準(zhǔn)確地描述為標(biāo)識(shí)符(identifiers)，是CSS能夠理解的特殊值。因此，它們沒(méi)有用引號(hào)-它們不被視為字符串。
CSS中有些地方需要使用字符串。例如，在指定生成的內(nèi)容時(shí)。在本例中，該值被加引號(hào)以表明它是一個(gè)字符串。在下面的示例中，我們使用未加引號(hào)的顏色關(guān)鍵字以及加引號(hào)的生成內(nèi)容字符串。
7、函數(shù)
我們要看的最后一種類(lèi)型的值是一組被稱為函數(shù)的值。在編程中，函數(shù)是一段可重用的代碼，它可以多次運(yùn)行，以最少的工作量完成開(kāi)發(fā)人員和計(jì)算機(jī)的重復(fù)任務(wù)。函數(shù)通常與JavaScript、Python或c++等語(yǔ)言相關(guān)，但它們也以屬性值的形式存在于CSS中。我們已經(jīng)在顏色部分看到了函數(shù)的作用——rgb()、hsl()等。用于從文件返回圖像的值url()也是一個(gè)函數(shù)。
calc() CSS函數(shù)的行為更像是在傳統(tǒng)編程語(yǔ)言中找到的值。這個(gè)函數(shù)使您能夠在CSS中進(jìn)行簡(jiǎn)單的計(jì)算。如果您想在為項(xiàng)目編寫(xiě)CSS時(shí)計(jì)算出無(wú)法定義的值，并且需要瀏覽器在運(yùn)行時(shí)為您計(jì)算，那么它特別有用。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-704521.html
例如，下面我們使用calc()使框的寬度為20% + 100px。20%是從父容器.wrapper的寬度計(jì)算出來(lái)的，因此，如果寬度發(fā)生變化，則會(huì)發(fā)生變化。我們不能事先做這個(gè)計(jì)算，因?yàn)槲覀儾恢栏冈氐?0%是多少，所以我們使用calc()告訴瀏覽器為我們做這個(gè)計(jì)算。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-704521.html
.wrapper {
width: 400px;
}
.box {
width: calc(20% + 100px);
}
到了這里，關(guān)于CSS構(gòu)建基礎(chǔ)（一）CSS值和單位的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
