1.关键字
有时,值用一个词表示,这叫关键字。none是一个非常常见的关键字,若想移除HTML文档中链接的下划线,可以这样写
a:link, a:visited {
text-decoration: none;
}
//去掉下划线
a:link, a:visited{
text-decoration: underline;
}
//加上下划线
全局关键字
inherit initial unset
inherit继承 initial改为初始值 unset是inherit和initial的通用替身。对继承的属性来说,unset的作用与inherit一样,对不继承的属性来说,unset的作用与initial一样
有个特殊的属性只接受这几个全局的关键字,all。all表示除direction和unicode-bidi之外的所有属性。如果一个元素声明 all: inherit ,意思是除direction和unicode-bidi之外的所有属性都从父元素上继承值。
如果只想几个属性值继承,那就一个一个的inherit
2.值
绝对的长度单位如px,in,cm这种就不再细说了。
dpi 在长为1英寸的范围内能显示的点数
相对长度单位 em和ex单位
1em = 元素的font-size属性值
1ex = 所用字体中小写字母x的高度 (字体的不同也会导致ex值不同)
rem 与em类似,但是是根据根元素计算的
CSS3新增单位:ch 一个零加上空隙的宽度
视区相关的单位:vw 视区宽度单位 vh 视区高度单位 单位的大小都是视区的高和宽除以100
vmin 视区宽度和高度的最小值 / 100 尺寸最小值单位
vmax 视区宽度和高度的最大值 / 100 尺寸最大值单位
3.计算值
p {
width: calc(90% - 2em);
}
calc()函数计算
+ - 运算符的两侧必须有空格,避免与负数混淆
attr()来获取HTML元素属性的值
p::before {
content: "[" attr(id) "]";
}
在p元素之前插入id元素的值
4.颜色
RGB和RBGa应该都比较熟悉,就不再介绍
两个颜色的关键字
transparent 和 currentColor
transparent与rgba(0,0,0,0)等效,currentColor 当前元素color属性计算得到的值
5.角度
deg 度数 圆是360deg
grad 百分度 圆是400grad
rad 弧度 圆是2pi
turn 圈数
6.时间和频率
s,ms,hz,khz
7.自定义CSS变量
html {
--base-color: #639;
--highlight-color: #AEA;
}
h1 {
color: var(--base-color);
}
h2 {
color: var(--highlight-color);
}
自定义值以--开头,并通过var调用