本规范主要讲述了css的值和单位
Textual Data Types 文本数据类型
Pre-defined Keywords 预定义关键字
-
预定义关键字
css会预定义一些关键字，例如 display 里的
block,flex -
CSS-wide keywords CSS维度关键字
所有的属性都能接受CSS维度关键字。CSS维度关键字 有
initial,inherit,unset三种。initial代表了属性被指定的初始。inherit代表了元素的父节点属性的计算值。unset取决于属性是否可继承来使用initial或inherit。
Author-defined Identifiers 自定义标志
用户可以自定义表示，例如下面的ease-in 就是自定义的
@keyframes ease-in {
//...
}
#box {
animation: ease-in ease-out;
}
注: 自定义标志最好与其他关键字区分，避免歧义。
Quoted Strings 字符串
字符串是由"或'包裹的。以下写法的结果是一致的。
/* 使用不同的引号或者用 \ 转义 */
#box1{
content: "this is a 'string'.";
content: "this is a \"string\".";
}
/* 换行符可以 \ 转义，从而连接上下两行 */
#box2{
a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
}
Resource Locators 资源地址
用url()声明这资源地址。
/* 带不带引号是一致的 */
#box{
background: url("http://www.example.com/pinkish.gif");
background: url(http://www.example.com/pinkish.gif);
}
/* import 加不加url一致 */
@import url("base-theme.css");
@import "base-theme.css";
/* 可以使用相对路径 */
#box{
background: url("tile.png")
}
/* #开头的路径会被解析会为页面路径 */
#box{
background: url("#tile")
}
/* 空url无效 ，类似于 about:invalid */
#box{
background: url("");
background: url();
}
Numeric Data Types 数值数据类型
-
Range Restrictions and Range Definition Notation
范围限制，
width在[0,∞]区间 -
Integers 整数
-
Real Numbers 数字
-
Numbers with Units
带单位的数字 ，
10px -
Percentages 百分比
-
Mixing Percentages and Dimensions 混合型
可以用
calc()组合使用维度单位和百分比
Distance Units 距离单位
Relative Lengths 相对长度
相对字体单位
| 单位 | 描述 |
|---|---|
| em | 该元素使用的字体大小 |
| ex | 该元素使用的字体的x高度 |
| ch | 该元素使用的字体中"0"这一图形的宽度 |
| rem | 根元素使用的字体大小 |
相对视口单位
| 单位 | 描述 |
|---|---|
| vw | 视口的宽度的1% |
| vh | 视口的高度的1% |
| vmin | 视口的高度和宽度中的最小值的1% |
| vmax | 视口的高度和宽度中的最大值的1% |
Absolute Lengths 绝对单位
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| Q | 千米 |
| in | 英寸；1in相当于2.54cm |
| pc | picas; 6pc = 1in |
| pt | points; 72pt = 1in |
| px | pixels; 96px = 1in |
所有的绝对单位是能相互换算的，px是它们的参考单位。
在CSS策略中，这些单位：
- 要么针对物理单位的物理测量
- 要么针对像素单位的参照像素
对于打印媒体和类似的高分辨率设备来说，针对的单位应该是标准物理单位中的一个(英寸、厘米等)。对于低分辨率设备和特殊视距的设备来说，我们推荐换用像素单位。同时推荐表示整个设备像素值的像素单位最好接近参考像素。
Angle Units 角度单位
| 单位 | 描述 |
|---|---|
| deg | 角度制。圆是360deg。 |
| grad | 百分度制。圆是400grad。 |
| rad | 弧度制。圆是2π。 |
| turn | 圆是1turn。 |
所有的角度单位是能相互换算的，deg是它们的参考单位。
Duration Units 时间单位
| 单位 | 描述 |
|---|---|
| s | 秒 |
| ms | 毫秒 |
所有的时间单位是能相互换算的，s是它们的参考单位。
Frequency Units 频率单位
| 单位 | 描述 |
|---|---|
| Hz | 赫兹，它代表了每秒触发的次数。 |
| kHz | 千赫兹，1kHz = 1000 Hz。 |
所有的频率单位是能相互换算的，Hz是它们的参考单位。
Resolution Units 分辨率单位
| 单位 | 描述 |
|---|---|
| dpi | 每英寸点数。 |
| dpcm | 每厘米点数。 |
| dppx | 每像素的点数。 |
注：由于CSS中1in = 96px , 所以 1dppx = 96dpi。
Functional Notations 函数表达式
calc()
calc()中可以用带有加减乘除、单位、百分比 的表达式 。
类型检查
表达式的类型需要符合以下规则
- 对于加减运算，检测两侧类型是否相同。
- 对于乘法运算，至少一侧是数字。
- 对于除法，右侧一定要为数字。
calc(0+1px) 是无效的。
计算值
百分比不会在计算值时被处理。例如calc(100% - 100% + 1em)会被处理成calc(0%+1em)并不会被处理成calc(1em)。表达式中的百分比的值去决定其属性的特殊规则，例如height会去决定父元素的高度。
范围检查
表达式的值的结果必须在目标语境被允许的范围内。
attr()
attr()可以返回元素的属性。注意attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content 属性。
attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )
