CSS通用數據類型

PAJSuz 7年前發布 | 12K 次閱讀 CSS 前端技術

CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數據類型，在規范中用 <this> 的形式標識。

CSS中存在兩種數據類型——特定數據類型和通用數據類型。特定數據類型只與一個單獨的屬性或某一類屬性有關聯。例如， <transform-function> 這一數據類型僅僅只能用作 transform 屬性的值。

相反的，通用數據類型并不和任何特定的屬性相關聯。例如， <length> 數據類型存在 10px 這樣的值，這個值能夠用于 margin 、 font-size 以及其他一系列屬性。

本文，我將整體講述一下所有的通用數據類型。

目錄	名稱	類型
文本值	關鍵字	<ident>
	文本值	自定義關鍵字	<custom-ident>
		文本值	引用字符串	<string>
			文本值	資源定位符	<url>
基本數值				整數	<integer>
	基本數值			實數	<number>
		基本數值		比率	<ratio>
			基本數值	百分數	<percentage>
度量				距離	<length>
	度量			角度	<angle>
		度量		時長	<duration>
			度量	頻率	<frequency>
度量				分辨率	<resolution>
	其他			顏色	<color>
		其他		圖片	<image>
			其他	位置	<position>

文本數據類型

關鍵字

關鍵字數據類型 <ident> 是指CSS中預定義的關鍵字。這一類型不僅包括某些特定屬性所特有的值，如 display 屬性的 block 值，也包括CSS中常用的 initial ， inherit 和 unset 。

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

這些關鍵字都是大小寫不敏感的，使用時不能添加引號。這樣以來就能夠避免和字符串數據類型 <string> 混淆。

自定義關鍵字

自定義關鍵字數據類型 <custom-ident> （也寫作 <user-ident> ）指樣式表作者自己定義的關鍵字。定義 <custom-ident> 有著一定的限制條件，如不能是CSS常用字中的一個。

自定義關鍵字的最常見的例子就是 animation-name 屬性的值。這個屬性能夠接受一個自定義的動畫作為它的值，這個自定義的動畫名有樣式表的作者定義。

@keyframes hulkify {?
  from { 
    color: pink; 
    transform: scale(1);
  }?
  to { 
    color: green; 
    transform: scale(2);
  }?
}
.bruce-banner { animation-name: hulkify; }

引用字符串

字符串數據類型 <string> 是指任何引用的字符串。這個字符串由引號包圍，是由統一編碼字符組成的任意序列。

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

資源定位符

資源定位符 <url> 用來引用資源文件或者片段。這一數據類型通常使用 url() 函數來表達，但是在有些情況下也可以用 <string> 形式來展現，如 @import 規則中。

該數據類型有三種URL（統一資源定位符）。

絕對URL包括協議和域名。這類URL指定的資源不需要和樣式表所屬的域名相同。
相對URL指向的文件以樣式表文件位置為基準位置。
局部URL（片段URL）用來指向主文件自己內部的元素。通過元素的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"); }

基本數值類型

整數

整數類型 <integer> 即數學中定義的整數。它是一個完整的數字，沒有小數部分。整數包括正整數和負整數。整數的符號由第一個數字前 + 或者 - 指定，如果什么都不指定則默認為 + 。

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

實數

實數類型 <number> 即一個“真實的數字”。它可以是整數 <integer> ，0或者一個十進制小數。和整數類型相似，實數也存在正負值，同樣由第一個數字前的符號指出。

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

比率

比率數據類型 <ratio> 表明兩個數值之前的關系，這兩個數值均為正的整數值 <integer> 。盡管數學中比率有著多種書寫方式，但是在CSS經常被寫作 <integer> / <integer> 。

比率類型的典型用法是用來在媒體查詢中指明目標設備的分辨率。

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

百分比

百分比數據類型 <percentage> 由一個實數值 <number> 后加一個 % 符號組成。它表示的是其他值的一部分。因此，針對不同的值類型，有不同的百分比數據類型

長度百分比 <length-percentage> 是長度值 <length> 的一部分。
數值百分比 <number-percentage> 是數值 <number> 的一部分。
角度百分比 <angle-percentage> 是角度值 <angle> 的一部分。
時間百分比 <time-percentage> 是長度值 <time> 的一部分。
頻率百分比 <frequency-percentage> 是長度值 <frequency> 的一部分。

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

尺寸數據類型

尺寸是數值數據類型中的一種，是一種度量單位。它前半部分由數值組成，后面跟一個單位符號。當數值部分為 0 時，單位可以省略。

距離

距離數據類型 <length> 表示距離的單位，有兩種長度單位。

絕對單位 ，如 px ， cm 以及 pt 。這些單位的距離值都是固定的，與物理測量相關。一旦聲明，它們的大小不會因為容器元素的字體大小變化而發生改變。
相對單位 ，如 em ， rem 以及視口單位。這些單位并沒有一個客觀的度量標準。相反的，這類單位的實際值由它們的父元素決定。這就意味著它們的大小會因為所依賴元素的大小改變而改變。

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

角度

角度數據類型表示圓的一個角度。存在四種單位來定義角度度量。

deg 單位表示角的度數。一個完整的圓為360度。
grad 表示角的Gradians度。一個完整的圓為400 grad 。
rad 表示角的弧度。一個完整的圓為2π（約為57.29rad）。
turn 表示圓周長。一個完整的圓為1turn.

這些單位都存在正負值之分，表明順時針或者逆時針。下面的例子中，指出了如何用各種單位表示順時針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);
}

時長

時長數據類型 <time> 是時間單位。有兩種單位能夠用來定義時間。

s 表示一秒鐘。
ms 表示一毫秒。1秒等于1000毫秒。

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

頻率

頻率類型 <frequency> 表示聲音的頻率。存在兩個單位用來定義頻率。

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

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

分辨率

分辨率數據類型 <resolution> 表示用戶當前設備的分辨率。分辨率是單一像素點（物理）的大小，通過1CSS英寸、厘米或者像素需要多少像素點能填滿來定義。這一計算方式依賴于我們所用的CSS單位，有四種方式可以指定分辨率。

dpi 表示每CSS英寸中物理像素點的個數。
dpcm 表示每CSS厘米中物理像素點的個數。

dppx 表示每CSS像素中物理像素點的個數。

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

其他數據類型

顏色

顏色數據類型 <color> 用來定義顏色值。這一數據類型有兩種格式。

關鍵字形式 ：可以使預定義顏色中的一種（如 cornflowerblue ）， transparent 以及 currentColor 等關鍵之。
數值形式 ：可以使用顏色表示法中的一種， #rgb ， rgb() ， rgba() ， hsl() ， hsla() 。

下例是我們如何用不同的形式實現黑色顏色值。

.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);
}

圖片

圖片數據類型 <image> 表示一個2D圖像。它可以是以下三種形式中的一種。

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

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

位置

位置數據類型 <position> 指出了一個元素在容器區域或元素中的位置。它可以使下列三種類型中的一種：

關鍵字 : top ， right ， bottom ， left 以及 center 。
長度值 。
百分比 ，長度百分比。

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

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

來自：http://www.zcfy.cc/article/all-the-generic-css-data-types-2526.html

本文由用戶 PAJSuz 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1487229474963.html

CSS 前端技術