CSS-值和单位

全局关键字

• 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;
}

/*a元素有用户代理的默认样式，这里color样式继承无效，使用 inherit 强制继承 */
#toolbar > a {
    color:inherit;
}

/*这里是进行初始化，覆盖了继承的样式*/
#toolbar > span{
    color : initial;
}

/*除了 direction 和 unicode-bidi 之外的所有属性都继承父类*/
#toolbar > p{
	all : inherit;
}

---

绝对长度单位

单位	具体描述
in	英寸
cm	厘米
mm	毫米
q	四分之一毫米
pt	点，一个标准的印刷
pc	派卡，一个派卡等于十二个点
px	像素，屏幕上的小点

分辨率单位

单位	具体描述
dpi	点每英寸，长为1英寸的范围内显示的点数
dpcm	点每厘米，长为1厘米的范围内显示的点数

相对长度单位

单位	具体描述
em	1em 等于当前元素中font-size的大小
ex	ex 等于当前元素的字体 x 的高度
rem	和 em 一样的定义，不同之处在于，它是相遇对 html 根元素的 font-size
ch	ch 是当前等宽字体的 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 是 #second_teal 子元素，此时作用域 teal 是 white，在外部的 span 则还是 蓝绿色*/
span{
  color : var(--teal)
  }

结果如下：