iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0
Modern Web

CSS大全閱讀筆記系列 第 18

第四章:數值與單位(7)

  • 分享至 

  • xImage
  •  
  1. 時間與頻率:
    a. 時間:
    - 語法表現為<time>,由<number>和單位s(秒)或ms(毫秒)組成,其中1s=1000ms。
    - 時間常用在轉場與動畫,或是聽覺CSS(aural CSS)上,表示持續時間或延遲。
    b. 頻率:
    - 另一個用在聽覺CSS上的屬性值,語法表示上為<frequency>,由<number>和單位Hz或kHz組成,由於單位識別字不分大小寫,所以寫成hz或是Hz都是正確的。
    - 注意支援率,根據Can I Use網站中查詢的結果,現在基本還不支援。
  2. 位置:
    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;
  3. 使用者定義數值:
    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(),做出更多變化。

上一篇
第四章:數值與單位(6)
下一篇
第五章:字型(1)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言