**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è)诜浅2煌纳舷挛闹惺褂谩?/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)!