本文我们你就来讲讲css的通用数据类型，css中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用
CSS中存在两种数据类型——特定数据类型和通用数据类型。特定数据类型只与一个单独的属性或某一类属性有关联。例如，
相反的，通用数据类型并不和任何特定的属性相关联。例如，
本文，我将整体讲述一下所有的通用数据类型。
目录 名称 类型
立即学习“前端免费学习笔记（深入）”；
文本值 关键字
文本值 自定义关键字
文本值 引用字符串
文本值 资源定位符
基本数值 整数
基本数值 实数
基本数值 比率
基本数值 百分数
度量 距离
度量 角度
度量 时长
度量 频率
度量 分辨率
其他 颜色
其他 图片
其他 位置
文本数据类型
关键字
关键字数据类型
.foo { border-color: red; position: inherit;
}
这些关键字都是大小写不敏感的，使用时不能添加引号。这样以来就能够避免和字符串数据类型
自定义关键字
自定义关键字数据类型
自定义关键字的最常见的例子就是 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（统一资源定位符）。
绝对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"); }基本数值类型
整数
整数类型
.foo { z-index: 10; }.foo { z-index: +10; }.bar { z-index: -10; }
实数
实数类型
.foo { line-height: 3; }.bar { line-height: -2.5; }.foo { line-height: +5.5; }比率
比率数据类型
比率类型的典型用法是用来在媒体查询中指明目标设备的分辨率。
@media screen and (device-aspect-ratio: 16/9) { /* Wide screen displays, iPhone 5 */ }
@media screen and (device-aspect-ratio: 4/3) { … }百分比
百分比数据类型
长度百分比
数值百分比
角度百分比
时间百分比
51shop 由 PHP 语言开发, 使用快速的 MySQL 数据库保存数据 ,为中小型网站实现网上电子商务提供一个完美的解决方案.一、用户模块1. 用户注册：用户信息包括：用户ID、用户名、用户密码、性别、邮箱、省份、城市、 联系电话等信息，用户注册后不能立即使用，需由管理员激活账号，才可使用（此功能管理员可设置）2. 登录功能3. 资料修改：用户可修改除账号以后的所有资料4. 忘记密码：要求用
频率百分比
.foo {
width: 50%; /* */
line-height: 200% /* */
voice-pitch: 25% /* */} 尺寸数据类型
尺寸是数值数据类型中的一种，是一种度量单位。它前半部分由数值组成，后面跟一个单位符号。当数值部分为 0 时，单位可以省略。
距离
距离数据类型
绝对单位 ，如 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);
}时长
时长数据类型
s 表示一秒钟。
ms 表示一毫秒。1秒等于1000毫秒。
.foo { transition-duration: 1s; }
.bar { transition-duration: 1000ms; }频率
频率类型
kHz 表示千赫兹。
Hz 表示赫兹。1000Hz等于1kHz.
.foo { voice-pitch: 250Hz; }
.bar { voice-pitch: 1kHz; }分辨率
分辨率数据类型
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);
}图片
图片数据类型
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%;
}以上就是css的通用数据类型，希望对大家有帮助。
相关推荐：
