本文轉(zhuǎn)載自：眾成翻譯
譯者：verymuch
鏈接：http://www.zcfy.cc/article/2526
原文：https://bitsofco.de/generic-css-data-types/

CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識(shí)別一個(gè)值是否有效股淡，則需要確認(rèn)該值是否符合該類值支持的格式的其中一種今瀑。這些屬性值所支持的格式叫做數(shù)據(jù)類型曲管，在規(guī)范中用<this>的形式標(biāo)識(shí)崔挖。

CSS中存在兩種數(shù)據(jù)類型——特定數(shù)據(jù)類型和通用數(shù)據(jù)類型术幔。特定數(shù)據(jù)類型只與一個(gè)單獨(dú)的屬性或某一類屬性有關(guān)聯(lián)恢氯。例如靖苇，<transform-function>這一數(shù)據(jù)類型僅僅只能用作transform屬性的值。

相反的模捂，通用數(shù)據(jù)類型并不和任何特定的屬性相關(guān)聯(lián)捶朵。例如，<length>數(shù)據(jù)類型存在10px這樣的值狂男，這個(gè)值能夠用于margin综看、font-size以及其他一系列屬性。

本文岖食，我將整體講述一下所有的通用數(shù)據(jù)類型红碑。

通用數(shù)據(jù)類型

文本數(shù)據(jù)類型

關(guān)鍵字

關(guān)鍵字?jǐn)?shù)據(jù)類型<ident>是指CSS中預(yù)定義的關(guān)鍵字。這一類型不僅包括某些特定屬性所特有的值泡垃，如display屬性的block值析珊，也包括CSS中常用的initial，inherit和unset（詳細(xì)內(nèi)容參考 Initial, Inherit, Unset, and Revert）蔑穴。

.foo {
  border-color: red;
  position: inherit;
}

這些關(guān)鍵字都是大小寫不敏感的忠寻，使用時(shí)不能添加引號(hào)。這樣以來就能夠避免和字符串?dāng)?shù)據(jù)類型<string>混淆存和。

自定義關(guān)鍵字

自定義關(guān)鍵字?jǐn)?shù)據(jù)類型<custom-ident>（也寫作<user-ident>）指樣式表作者自己定義的關(guān)鍵字奕剃。定義<custom-ident>有著一定的限制條件衷旅，如不能是CSS常用字中的一個(gè)。

自定義關(guān)鍵字的最常見的例子就是animation-name屬性的值纵朋。這個(gè)屬性能夠接受一個(gè)自定義的動(dòng)畫作為它的值柿顶，這個(gè)自定義的動(dòng)畫名有樣式表的作者定義。

@keyframes hulkify {

  from { 
    color: pink; 
    transform: scale(1);
  }

  to { 
    color: green; 
    transform: scale(2);
  }

}
.bruce-banner { animation-name: hulkify; }

引用字符串

字符串?dāng)?shù)據(jù)類型<string>是指任何引用的字符串操软。這個(gè)字符串由引號(hào)包圍嘁锯，是由統(tǒng)一編碼字符組成的任意序列。

.foo::after {
  content: "Hello, world!";
}
.foo::before {
  content: "We can add 'quotes' within quotes \A And move to a separate line";
}

資源定位符

資源定位符<url>用來引用資源文件或者片段聂薪。這一數(shù)據(jù)類型通常使用url()函數(shù)來表達(dá)猪钮，但是在有些情況下也可以用<string>形式來展現(xiàn)，如@import規(guī)則中胆建。

該數(shù)據(jù)類型有三種URL（統(tǒng)一資源定位符）。

• 絕對(duì)URL包括協(xié)議和域名肘交。這類URL指定的資源不需要和樣式表所屬的域名相同笆载。
• 相對(duì)URL指向的文件以樣式表文件位置為基準(zhǔn)位置。
• 局部URL（片段URL）用來指向主文件自己內(nèi)部的元素涯呻。通過元素的id引用凉驻，而不是文件路徑。

 /* Absolute URL */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400");

 /* Realtive URL */
.foo { background-image: url("../img/bg.png"); }
@import "components/buttons.css";

 /* Fragment URL */
.bar { filter: url("#blurFilter"); }

基本數(shù)值類型

整數(shù)

整數(shù)類型<integer>即數(shù)學(xué)中定義的整數(shù)复罐。它是一個(gè)完整的數(shù)字涝登，沒有小數(shù)部分。整數(shù)包括正整數(shù)和負(fù)整數(shù)效诅。整數(shù)的符號(hào)由第一個(gè)數(shù)字前+或者-指定胀滚，如果什么都不指定則默認(rèn)為+。

.foo { z-index: 10; }
.foo { z-index: +10; }
.bar { z-index: -10; }

實(shí)數(shù)

實(shí)數(shù)類型<number>即一個(gè)“真實(shí)的數(shù)字”乱投。它可以是整數(shù)<integer>咽笼，0或者一個(gè)十進(jìn)制小數(shù)。和整數(shù)類型相似戚炫，實(shí)數(shù)也存在正負(fù)值剑刑，同樣由第一個(gè)數(shù)字前的符號(hào)指出。

.foo { line-height: 3; }
.bar { line-height: -2.5; }
.foo { line-height: +5.5; }

比率

比率數(shù)據(jù)類型<ratio>表明兩個(gè)數(shù)值之前的關(guān)系双肤，這兩個(gè)數(shù)值均為正的整數(shù)值<integer>施掏。盡管數(shù)學(xué)中比率有著多種書寫方式，但是在CSS經(jīng)常被寫作<integer> / <integer>茅糜。

比率類型的典型用法是用來在媒體查詢中指明目標(biāo)設(shè)備的分辨率七芭。

@media screen and (device-aspect-ratio: 16/9) { /* Wide screen displays, iPhone 5 */ }
@media screen and (device-aspect-ratio: 4/3) { … }

百分比

百分比數(shù)據(jù)類型<percentage>由一個(gè)實(shí)數(shù)值<number>后加一個(gè)%符號(hào)組成。它表示的是其他值的一部分限匣。因此抖苦，針對(duì)不同的值類型毁菱，有不同的百分比數(shù)據(jù)類型

• 長度百分比<length-percentage>是長度值<length>的一部分。
• 數(shù)值百分比<number-percentage>是數(shù)值<number>的一部分锌历。
• 角度百分比<angle-percentage>是角度值<angle>的一部分贮庞。
• 時(shí)間百分比<time-percentage>是長度值<time>的一部分。
• 頻率百分比<frequency-percentage>是長度值<frequency>的一部分究西。

.foo { 
    width: 50%; /* <length-percentage> */
    line-height: 200% /* <number-percentage> */
    voice-pitch: 25% /* <frequency-percentage> */
}

尺寸數(shù)據(jù)類型

尺寸是數(shù)值數(shù)據(jù)類型中的一種窗慎，是一種度量單位。它前半部分由數(shù)值組成卤材，后面跟一個(gè)單位符號(hào)遮斥。當(dāng)數(shù)值部分為0時(shí)，單位可以省略扇丛。

距離

距離數(shù)據(jù)類型<length>表示距離的單位术吗，有兩種長度單位。

• 絕對(duì)單位帆精，如px较屿，cm以及pt。這些單位的距離值都是固定的卓练，與物理測(cè)量相關(guān)隘蝎。一旦聲明，它們的大小不會(huì)因?yàn)槿萜髟氐淖煮w大小變化而發(fā)生改變襟企。
• 相對(duì)單位嘱么，如em，rem以及視口單位顽悼。這些單位并沒有一個(gè)客觀的度量標(biāo)準(zhǔn)曼振。相反的，這類單位的實(shí)際值由它們的父元素決定蔚龙。這就意味著它們的大小會(huì)因?yàn)樗蕾囋氐拇笮「淖兌淖儭?/li>

(詳情可查看 CSS Font Sizing)

.foo { 
    font-size: 16px; /* absolute */
    width: 50vw; /* relative */
}

角度

角度數(shù)據(jù)類型表示圓的一個(gè)角度拴测。存在四種單位來定義角度度量。

• deg單位表示角的度數(shù)府蛇。一個(gè)完整的圓為360度集索。
• grad表示角的Gradians度。一個(gè)完整的圓為400grad汇跨。
• rad表示角的弧度务荆。一個(gè)完整的圓為2π（約為57.29rad）。
• turn表示圓周長穷遂。一個(gè)完整的圓為1turn.

這些單位都存在正負(fù)值之分函匕，表明順時(shí)針或者逆時(shí)針。下面的例子中蚪黑，指出了如何用各種單位表示順時(shí)針90度盅惜。

.foo { 
    /* Going clockwise */
    transform: rotate(90deg);
    transform: rotate(100grad);
    transform: rotate(0.25turn);
    transform: rotate(1.57rad);

    /* Going anti-clockwise */
    transform: rotate(-270deg);
    transform: rotate(-300grad);
    transform: rotate(-1.25turn);
    transform: rotate(-55.72rad);
}

時(shí)長

時(shí)長數(shù)據(jù)類型<time>是時(shí)間單位中剩。有兩種單位能夠用來定義時(shí)間。

• s表示一秒鐘抒寂。
• ms表示一毫秒结啼。1秒等于1000毫秒。

.foo { transition-duration: 1s; } 
.bar { transition-duration: 1000ms; }

頻率

頻率類型<frequency>表示聲音的頻率屈芜。存在兩個(gè)單位用來定義頻率郊愧。

• kHz表示千赫茲。
• Hz表示赫茲井佑。1000Hz等于1kHz.

.foo { voice-pitch: 250Hz; } 
.bar { voice-pitch: 1kHz; }

分辨率

分辨率數(shù)據(jù)類型<resolution>表示用戶當(dāng)前設(shè)備的分辨率属铁。分辨率是單一像素點(diǎn)（物理）的大小，通過1CSS英寸躬翁、厘米或者像素需要多少像素點(diǎn)能填滿來定義焦蘑。這一計(jì)算方式依賴于我們所用的CSS單位，有四種方式可以指定分辨率盒发。

• dpi表示每CSS英寸中物理像素點(diǎn)的個(gè)數(shù)喇肋。
• dpcm表示每CSS厘米中物理像素點(diǎn)的個(gè)數(shù)。
• dppx表示每CSS像素中物理像素點(diǎn)的個(gè)數(shù)迹辐。

@media (min-resolution: 100ddpx) { .. }
@media (min-resolution: 100dpcm) { .. }
@media (min-resolution: 300dpi) { /* Retina display */ }

其他數(shù)據(jù)類型

顏色

顏色數(shù)據(jù)類型<color>用來定義顏色值。這一數(shù)據(jù)類型有兩種格式甚侣。

• 關(guān)鍵字形式：可以使預(yù)定義顏色中的一種（如cornflowerblue）明吩，transparent以及currentColor等關(guān)鍵之。
• 數(shù)值形式：可以使用顏色表示法中的一種殷费，#rgb印荔，rgb()，rgba()详羡，hsl()仍律，hsla()。

下例是我們?nèi)绾斡貌煌男问綄?shí)現(xiàn)黑色顏色值实柠。

.foo {
   color: black;
   color: #000;
   color: rgb(0,0,0);
   color: rgba(0,0,0,1);
   color: hsl(0,0%,0%);
   color: hsla(0,0%,0%, 1);
}

圖片

圖片數(shù)據(jù)類型<image>表示一個(gè)2D圖像水泉。它可以是以下三種形式中的一種。

• URL引用：通過<url>數(shù)據(jù)類型來指定窒盐。
• 文檔中的元素：通過element()函數(shù)來指定草则。（提示：這一函數(shù)的支持度較為有限。）
• 漸變函數(shù):使用<gradient>數(shù)據(jù)類型來定義蟹漓。

.foo { background-image: url('path/to/bg.png'); }
.bar { background-image: element('#background'); }
.baz { background-image: linear-gradient(white, gray); }

位置

位置數(shù)據(jù)類型<position>指出了一個(gè)元素在容器區(qū)域或元素中的位置炕横。它可以使下列三種類型中的一種：

• 關(guān)鍵字: top， right葡粒， bottom份殿， left以及center膜钓。
• 長度值。
• 百分比卿嘲，長度百分比颂斜。

下例給出了如何讓一個(gè)大小為100x100px背景圖定位在容器元素（300x300px）的左下角。

.foo { 
  background-position: right bottom;
  background-position: 200px 200px;
  background-position: 100% 100%;
}