css的所有通用数据类型

本文我们你就来讲讲css的通用数据类型，CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用 3797071296dfca8446f8fa422779c43c 的形式标识。

CSS中存在两种数据类型——特定数据类型和通用数据类型。特定数据类型只与一个单独的属性或某一类属性有关联。例如， 51a72c16a181454beb1335050c004065 这一数据类型仅仅只能用作 transform 属性的值。

相反的，通用数据类型并不和任何特定的属性相关联。例如， d82af2074b26fcfe177e947839b5d381 数据类型存在 10px 这样的值，这个值能够用于 margin 、 font-size 以及其他一系列属性。

本文，我将整体讲述一下所有的通用数据类型。

目录     名称      类型

文本值    关键字    bd9fb4efa67f1df180acc87eb80519ec    

文本值    自定义关键字    e53daba18c25ef518ad73d82fe4f7af3    

文本值    引用字符串    98c455a79ddfebb79781bff588e7b37e    

文本值    资源定位符    9bb6a7d109b3f2bf35f7e2e9bd87f98a    

基本数值    整数    979e7f42ea08258251c39ffe96b911f2    

基本数值    实数    d80b5def5ed1be6e26d91c2709f14170    

基本数值    比率    5bfe5090b04fb7fd0d6ed7d15c4af1b6    

基本数值    百分数    42c97a047d75abc12b9b351eb8562711    

度量    距离    d82af2074b26fcfe177e947839b5d381    

度量    角度    0c0cb308ee3d2ee3281772bfc9b806c2    

度量    时长    31f48eb6949585d6c147c2cc44c24eba    

度量    频率    1b26ef64c874d94473a4671c85a45a7f    

度量    分辨率    f0875990a7c33e8b6db6b54083cd052f    

其他    颜色    b10fb37415d019cfffa8c4d7366c607f    

其他    图片    dc0870658837139040642baa5555a380    

其他    位置    7f952ef31037694d232de8bb3c23c71d    

文本数据类型

关键字

关键字数据类型 bd9fb4efa67f1df180acc87eb80519ec 是指CSS中预定义的关键字。这一类型不仅包括某些特定属性所特有的值，如 display 属性的 block 值，也包括CSS中常用的 initial ， inherit 和 unset 。

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

这些关键字都是大小写不敏感的，使用时不能添加引号。这样以来就能够避免和字符串数据类型 98c455a79ddfebb79781bff588e7b37e 混淆。

自定义关键字

自定义关键字数据类型 e53daba18c25ef518ad73d82fe4f7af3 （也写作 028aa264268b1d80e0a56150adf879cc ）指样式表作者自己定义的关键字。定义 e53daba18c25ef518ad73d82fe4f7af3 有着一定的限制条件，如不能是CSS常用字中的一个。

自定义关键字的最常见的例子就是 animation-name 属性的值。这个属性能够接受一个自定义的动画作为它的值，这个自定义的动画名有样式表的作者定义。

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

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

引用字符串

字符串数据类型 98c455a79ddfebb79781bff588e7b37e 是指任何引用的字符串。这个字符串由引号包围，是由统一编码字符组成的任意序列。

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

资源定位符

资源定位符 9bb6a7d109b3f2bf35f7e2e9bd87f98a 用来引用资源文件或者片段。这一数据类型通常使用 url() 函数来表达，但是在有些情况下也可以用 98c455a79ddfebb79781bff588e7b37e 形式来展现，如 @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"); }

基本数值类型

整数

整数类型 979e7f42ea08258251c39ffe96b911f2 即数学中定义的整数。它是一个完整的数字，没有小数部分。整数包括正整数和负整数。整数的符号由第一个数字前 + 或者 - 指定，如果什么都不指定则默认为 + 。

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

实数

实数类型 d80b5def5ed1be6e26d91c2709f14170 即一个“真实的数字”。它可以是整数 979e7f42ea08258251c39ffe96b911f2 ，0或者一个十进制小数。和整数类型相似，实数也存在正负值，同样由第一个数字前的符号指出。

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

比率

比率数据类型 5bfe5090b04fb7fd0d6ed7d15c4af1b6 表明两个数值之前的关系，这两个数值均为正的整数值 979e7f42ea08258251c39ffe96b911f2 。尽管数学中比率有着多种书写方式，但是在CSS经常被写作 979e7f42ea08258251c39ffe96b911f2 / 979e7f42ea08258251c39ffe96b911f2 。

比率类型的典型用法是用来在媒体查询中指明目标设备的分辨率。

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

百分比

百分比数据类型 42c97a047d75abc12b9b351eb8562711 由一个实数值 d80b5def5ed1be6e26d91c2709f14170 后加一个 % 符号组成。它表示的是其他值的一部分。因此，针对不同的值类型，有不同的百分比数据类型

长度百分比 681b2bd515aa1f62bd1f4d50ed120e94 是长度值 d82af2074b26fcfe177e947839b5d381 的一部分。

数值百分比 37048807626580dd0584665074fc81fa 是数值 d80b5def5ed1be6e26d91c2709f14170 的一部分。

角度百分比 edeb4aedb0fa205d9b967008346802d5 是角度值 0c0cb308ee3d2ee3281772bfc9b806c2 的一部分。

时间百分比 ea74f057a70914f3ec50a34b01b1d330 是长度值 46dd80ba616c57a652514755c74c4211 的一部分。

频率百分比 27dc963f6062b18be37bad7a1f79a1cb 是长度值 1b26ef64c874d94473a4671c85a45a7f 的一部分。

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

尺寸数据类型

尺寸是数值数据类型中的一种，是一种度量单位。它前半部分由数值组成，后面跟一个单位符号。当数值部分为 0 时，单位可以省略。

距离

距离数据类型 d82af2074b26fcfe177e947839b5d381 表示距离的单位，有两种长度单位。

绝对单位 ，如 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);
}

时长

时长数据类型 46dd80ba616c57a652514755c74c4211 是时间单位。有两种单位能够用来定义时间。

s 表示一秒钟。

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

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

频率

频率类型 1b26ef64c874d94473a4671c85a45a7f 表示声音的频率。存在两个单位用来定义频率。

kHz 表示千赫兹。

Hz 表示赫兹。1000Hz等于1kHz.

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

分辨率

分辨率数据类型 f0875990a7c33e8b6db6b54083cd052f 表示用户当前设备的分辨率。分辨率是单一像素点（物理）的大小，通过1CSS英寸、厘米或者像素需要多少像素点能填满来定义。这一计算方式依赖于我们所用的CSS单位，有四种方式可以指定分辨率。

dpi 表示每CSS英寸中物理像素点的个数。

dpcm 表示每CSS厘米中物理像素点的个数。

dppx 表示每CSS像素中物理像素点的个数。

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

其他数据类型

颜色

颜色数据类型 b10fb37415d019cfffa8c4d7366c607f 用来定义颜色值。这一数据类型有两种格式。

关键字形式 ：可以使预定义颜色中的一种（如 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);
}

图片

图片数据类型 dc0870658837139040642baa5555a380 表示一个2D图像。它可以是以下三种形式中的一种。

URL引用 ：通过 9bb6a7d109b3f2bf35f7e2e9bd87f98a 数据类型来指定。

文档中的元素 ：通过 element() 函数来指定。（提示：这一函数的支持度较为有限。）

渐变函数 :使用 bd2c3b8af3e0a5639b590da5f6eca814 数据类型来定义。

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

位置

位置数据类型 7f952ef31037694d232de8bb3c23c71d 指出了一个元素在容器区域或元素中的位置。它可以使下列三种类型中的一种：

关键字 : top ， right ， bottom ， left 以及 center 。

长度值 。

百分比 ，长度百分比。

下例给出了如何让一个大小为100x100px背景图定位在容器元素（300x300px）的左下角。

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

以上就是css的通用数据类型，希望对大家有帮助。

相关推荐：

总结EF通用数据层封装类实例详解

CSS3常用的几种选择器

几个好用的css函数小技巧

以上是css的所有通用数据类型的详细内容。更多信息请关注PHP中文网其他相关文章！