css的所有通用資料類型

來源:互聯網
上載者:User
本文我們你就來講講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%;}

以上就是css的通用資料類型,希望對大家有協助。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.