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)
  }

結果如下：