在CSS中的属性值有些是使用数字的。为了让用户客户端能够确定这个值有效，就需要确保它的值是符合规范类型中的一个。这些就被称为数据类型，规范中通常写成这样。
有两种数据类型：特定的和通用的。特定数据类型是一个属性或者一组属性。例如数据类型被用在transform属性的值上。
另一方面，通用数据类型是可以用在任何特定的属性上。比如数据类型，可以设置一个10px的值，它可以用在margin、font-fize或者其它可以用数字值的属性。
在这篇文章中，将会把所有的通用数据类型给大家介绍一下。
文本(Textual)：
关键词(Keywords):
自定义关键词：
引用字符串：
资源定位器：
基本数字(Basic Numeric)
整数(Integers)：
实数：
比率：
百分比：
维度(Dimensions)
距离(Distances)：
角度：
延迟时间(Duration)：
频率(Frequency)：
分辨率(Resolution)：
其它(Other)
颜色：
图片：
位置：
文本数据类型
关键词(Keywords)
数据类型指的是在CSS中预定义的关键词。这包括一些独特的某些属性的值，比如display属性，以及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;
}
引用字符串
数据类型是指任何引用的字符串。引号内的文本可以是任何Unicode字符串。
.foo::after {
content: "Hello, world!";
}
.foo::before {
content: "We can add 'quotes' within quotes \A And move to a separate line";
}
资源定位器
数据类型用来引用一个资源文件或片段(fragment)。这个数据类型通常是使用url()函数，但在某些情况下也可以使用，特别是在@import规则中。
数据类型有三种类型：
绝对路径：是指定一个协议或域名。引用的资源不一定是在样式表的相同域名下
相对路径：引用的文件是相对于引用样式表的位置
片段中URL(Fragment URLs)：指元素在文档中的主机。引用带ID的元素，而不是一个文件路径
比如下面的示例：
/* 绝对路径 */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400");
/* 相对路径 */
.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 {
width: 50%; /* */
line-height: 200% /* */
voice-pitch: 25% /* */
}
维度数据类型
维度数据类型是中特殊的一种，是一个计量单位。它们写成，后面再跟单位标签符。当是0时，可以不带单位。
距离
数据类型代表的是长度单位。其有两种类型的长度单位。
绝对单位：固定的物理测量单位，比如px、cm和pt。一旦确定了，它们的尺寸不能通过改变容器的font-size大小来改变
相对单位：没有一个客观的测量，比如em、rem和Viewport单位。它的实际大小是由其一个父元素的大小决定。这意味着它们的大小可以通过改变依赖元素的大小来改变
例如
.foo {
font-size: 16px; /* absolute */
width: 50vw; /* relative */
}
角度
数据类型代表的是一个圆的角度。它有四个单位，可以用来定义角度的度数。
deg单位表示的是角的度数。360deg是一个完整的圆
grad单位代表Gradians角度。400grad是一个完整的圆
rad单位代表的角的弧度。2πrad(约57.29rad)是一个完整的圆
turn单位代表圆周长。1turn是一个完整的圆
这些单位可以是正值也可以是负值，表示顺时针或逆时针转。下面是一个例子，表示的是按顺时针旋转90度：
.foo {
/* 顺时针方向 */
transform: rotate(90deg);
transform: rotate(100grad);
transform: rotate(0.25turn);
transform: rotate(1.57rad);
/* 逆时针方向 */
transform: rotate(-270deg);
transform: rotate(-300grad);
transform: rotate(-1.25turn);
transform: rotate(-55.72rad);
}
延迟
数据类型表示一个时间单位，可以使用两种单位定义持续时间。
s表示的是秒单位
ms表示的是毫秒单位。1s等于1000ms
例如
.foo {
transition-duration: 1s;
}
.bar {
transition-duration: 1000ms;
}
频率
数据类型表示声音的频率。有两种单位来定义频率。
kHz单位代表的是KiloHertz
Hz单位代表的是Hertz。1Hz等于1000kHz
例如
.foo {
voice-pitch: 250Hz;
}
.bar {
voice-pitch: 1kHz;
}
分辨率
数据类型代表用户的当前设备的分辨率。其有四个单位。
dpi单位代表一英寸中有多少个点
dpcm单位代表是的一个Centemetre有多少个点
dppx单位代表是一个像素里有多少个点
例如
@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()函数
一个渐变函数gradient，使用数据类型
例如
.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
值
百分比，特别是值
下面的示例学示了如何让图像(100 x 100)定位在容器(300px x 300px)的右下角
.foo {
background-position: right bottom;
background-position: 200px 200px;
background-position: 100% 100%;
}
常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。
扫一扫
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
