第四章：數值與單位（7）

第 11 屆 iThome 鐵人賽

DAY 18

Modern Web

CSS大全閱讀筆記系列第 18 篇

11th鐵人賽

Camellus

2019-10-04 23:45:36

611 瀏覽

分享至

時間與頻率：
a. 時間：
- 語法表現為<time>，由<number>和單位s（秒）或ms（毫秒）組成，其中1s=1000ms。
- 時間常用在轉場與動畫，或是聽覺CSS（aural CSS）上，表示持續時間或延遲。
b. 頻率：
- 另一個用在聽覺CSS上的屬性值，語法表示上為<frequency>，由<number>和單位Hz或kHz組成，由於單位識別字不分大小寫，所以寫成hz或是Hz都是正確的。
- 注意支援率，根據Can I Use網站中查詢的結果，現在基本還不支援。
位置：
a. 用來指定影像在背景區域的位置（background-position），語法表示為<position>。
b. 語法使用：
- 宣告時，可以使用長度單位、百分比，或是方向關鍵字（right、left、top、bottom、center）。
- 宣告一個數時，代表水平值，垂直值會自動預設為center，寫法像background-position: right;、background-position: 100px;、background-position: 25%;都是正確的。
- 宣告兩個數值，且第一個數值是長度或是百分比，那第一個數值會代表預設代表水平值，第二個數值會被視為垂直值，若是方向關鍵字就沒有此項限制。因此，background-position: top right;或是background-position: right top;都是合法宣告，background-position: 25% top;和background-position: right 30px;也是合法宣告，其中的25%是水平值，但background-position: 30% right;就是不合法的宣告了。
- 宣告四個數值，順序必須是：方向關鍵字->長度或百分比->方向關鍵字->長度或百分比，關鍵字代表基準邊與間距計算基準的水平或垂直值，長度或百分比代表與基準邊的間距，因此background-position: right 10px top 20%;代表距離右邊界10px，距離上邊界20%。宣告四個數值時，數值以關鍵字為準，因此第一個數也可以是垂直值，如background-position: bottom 10px left 20%;。
- 宣告三個數值，規則和四個數值相同，但最後一個值被視為0，所以background-position: right 10px top;會等於background-position: right 10px top 0;。
使用者定義數值：
a. 是在CSS建立某種形式的變數。
b. 寫法與注意事項：
- 作用區域{--變數: CSS數值;} 在作用區域的選擇器{屬性: var(--變數);}。
- 作用區域可以是一部份，如只作用於<aside>內，或是作用在全部範圍，作用區域就必須寫根元素<html>，作用在不同區域的變數識別字命名可以相同。
- 變數識別字前方必須加兩個半形破折號（--），後接自定義的變數識別字，中間不加任何空白或區隔符號，變數識別字的命名上有區分大小寫，不可以用到預設的關鍵字，建議使用要用能表明用意的語意化命名。
- 使用者定義數值又被稱為CSS變數（CSS Variables），var()便由此而來，注意**var()處的分號位置是在小括弧外，大括弧內**。
c. 實例：
- HTML：......<body><p>TEST</p><aside><p>TEST</p></aside></body>......
- CSS：html{--test-color: red;} aside{--test-color: blue;} p{color: var(--test-color);}
d. 注意支援度，較舊的瀏覽器與IE不支援。
e. 可以結合calc()，做出更多變化。