全局关键字
inherit 关键字可以强制继承父元素的样式，比如一些没有默认继承的样式，使用此关键字可以做到强制继承initial 关键字可以让元素样式初始化unset 可以让拥有默认继承的样式初始化，让没有默认继承的样式强制继承，是 inherit 和 initial 的通用替身all 表示除了 direction 和 unicode-bidi 之外的所有属性
<div id="test">
<a href="http://www.baidu.com>百度一下
</a>
<span>Test
</span>
<p>Page
</p>
</div>
#toolbar{
background-color:blue
;
color:white
;
}
#toolbar > a {
color:inherit
;
}
#toolbar > span{
color : initial
;
}
#toolbar > p{
all : inherit
;
}
绝对长度单位
单位具体描述
in英寸cm厘米mm毫米q四分之一毫米pt点，一个标准的印刷pc派卡，一个派卡等于十二个点px像素，屏幕上的小点
分辨率单位
单位具体描述
dpi点每英寸，长为1英寸的范围内显示的点数dpcm点每厘米，长为1厘米的范围内显示的点数
相对长度单位
单位具体描述
em1em 等于当前元素中font-size的大小exex 等于当前元素的字体 x 的高度rem和 em 一样的定义，不同之处在于，它是相遇对 html 根元素的 font-sizechch 是当前等宽字体的 0 的宽度，如果不是等宽字体，则很难定下标准
视区相关单位
单位具体描述
vw视区宽度单位，当前可视区域的 宽度 1%vh视区高度单位，当前可视区域的高度 1%vmin视区最小单位，取高度和宽度中偏小的那一个vmax视区最大单位，取高度和宽度中偏大的那一个
计算值
可以使用 calc() 进行数学计算，不过需要遵从以下规则：
“”+” 和 “-” 要求两侧使用相同的单位“*” 要求有一侧是 number“/” 要求右边的一方是 number，且 number 不能为 0
CSS3颜色拓展
CSS3 rgba() 接收四个参数，多了一个透明度的参数，取值为 0 - 1 之间，取值越低，透明程度越高
/*使用了 react*/
<div>
<p id={'first'}>First First First</p>
<p id={'second'}>Second Second Second</p>
<p id={'third'}>Third Third Third</p>
</div>
#first{
color : rgba(30%,30%,30%,0.8
);
font-weight: bold
;
}
#second{
color : rgba(30%,30%,30%,0.6
);
font-weight: bold
;
}
#third{
color : rgba(30%,30%,30%,0.4
);
font-weight: bold
;
}
结果如下：
CSS3 提供 hsl 和 hsla 表示法
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
颜色关键字
transparent 表示完全透明的颜色currentColor 表示当前元素的 color样式的颜色
自定义值
使用 – 和 var 等关键字或符号来实现自定义值，区分大小写，自定义值有作用域范围
<div>
<div id={'teal'}></div>
</div>
html{
--teal: #009688
}
#teal{
background-color: var(--teal
);
width : 200px
;
height : 200px
;
margin : auto
;
margin-top: 200px
;
}
结果如下：
自定义值存在作用域
<div>
<div id={'teal'}>
<div id={'second_teal'}>
<span>Inner</span>
</div>
</div>
<span>Outer</span>
</div>
html{
--teal: #009688
}
#teal{
background-color: var(--teal
);
width : 200px
;
height : 200px
;
margin : auto
;
margin-top: 200px
;
}
#second_teal{
--teal: white
;
}
span{
color : var(--teal
)
}
结果如下：
