CSS通用資料型別

fondtiger發表於2021-09-09
CSS資料型別

本文轉載自：
譯者：
連結：
原文：

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

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

相反的，通用資料型別並不和任何特定的屬性相關聯。例如，資料型別存在10px這樣的值，這個值能夠用於margin、font-size以及其他一系列屬性。

本文，我將整體講述一下所有的通用資料型別。

圖片描述

通用資料型別

文字資料型別

關鍵字

關鍵字資料型別是指CSS中預定義的關鍵字。這一型別不僅包括某些特定屬性所特有的值，如display屬性的block值，也包括CSS中常用的initial，inherit和unset（詳細內容參考 ）。

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

這些關鍵字都是大小寫不敏感的，使用時不能新增引號。這樣以來就能夠避免和字串資料型別混淆。

自定義關鍵字

自定義關鍵字資料型別（也寫作）指樣式表作者自己定義的關鍵字。定義有著一定的限制條件，如不能是CSS常用字中的一個。

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

@keyframes hulkify {  from { 
    color: pink; 
    transform: scale(1);
  }  to { 
    color: green; 
    transform: scale(2);
  }

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

引用字串

字串資料型別是指任何引用的字串。這個字串由引號包圍，是由統一編碼字元組成的任意序列。

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

資源定位符

資源定位符用來引用資原始檔或者片段。這一資料型別通常使用url()函式來表達，但是在有些情況下也可以用形式來展現，如@import規則中。

該資料型別有三種URL（統一資源定位符）。

  • 絕對URL包括協議和域名。這類URL指定的資源不需要和樣式表所屬的域名相同。

  • 相對URL指向的檔案以樣式表檔案位置為基準位置。

  • 區域性URL（片段URL）用來指向主檔案自己內部的元素。透過元素的id引用，而不是檔案路徑。

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

基本數值型別

整數

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

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

實數

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

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

比率

比率資料型別表明兩個數值之前的關係，這兩個數值均為正的整數值。儘管數學中比率有著多種書寫方式，但是在CSS經常被寫作 / 。

比率型別的典型用法是用來在媒體查詢中指明目標裝置的解析度。

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

百分比

百分比資料型別由一個實數值後加一個%符號組成。它表示的是其他值的一部分。因此，針對不同的值型別，有不同的百分比資料型別

  • 長度百分比是長度值的一部分。

  • 數值百分比是數值的一部分。

  • 角度百分比)

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

    角度

    角度資料型別表示圓的一個角度。存在四種單位來定義角度度量。

    • deg單位表示角的度數。一個完整的圓為360度。

    • grad表示角的Gradians度。一個完整的圓為400grad。

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

    時長

    時長資料型別是時間單位。有兩種單位能夠用來定義時間。

    • s表示一秒鐘。

    • ms表示一毫秒。1秒等於1000毫秒。

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

    頻率

    頻率型別表示聲音的頻率。存在兩個單位用來定義頻率。

    • kHz表示千赫茲。

    • Hz表示赫茲。1000Hz等於1kHz.

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

    解析度

    解析度資料型別表示使用者當前裝置的解析度。解析度是單一畫素點（物理）的大小，透過1CSS英寸、釐米或者畫素需要多少畫素點能填滿來定義。這一計算方式依賴於我們所用的CSS單位，有四種方式可以指定解析度。

    • dpi表示每CSS英寸中物理畫素點的個數。

    • dpcm表示每CSS釐米中物理畫素點的個數。

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

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

    其他資料型別

    顏色

    顏色資料型別用來定義顏色值。這一資料型別有兩種格式。

    • 關鍵字形式：可以使預定義顏色中的一種（如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);
}

    圖片

    圖片資料型別表示一個2D影像。它可以是以下三種形式中的一種。

    • URL引用：透過資料型別來指定。

    • 文件中的元素：透過element()函式來指定。（提示：這一函式的支援度較為有限。）

    • 漸變函式:使用資料型別來定義。

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

    位置

    位置資料型別指出了一個元素在容器區域或元素中的位置。它可以使下列三種型別中的一種：

    • 關鍵字: top， right， bottom， left以及center。

    • 長度值。

    • 百分比，長度百分比。

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

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



    作者：極樂君
    連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/2508/viewspace-2812918/，如需轉載，請註明出處，否則將追究法律責任。

相關文章