iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
Modern Web

CSS大全閱讀筆記系列 第 16

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

  • 分享至 

  • xImage
  •  
  1. 顏色:
    a. HTML中使用顏色有十六進位碼預設定義好的顏色名稱兩種方式,CSS中則更多方式。
    b. 預設顏色:CSS中友148個關鍵字顏色,用法只要輸入關鍵字即可,如h1 {color: red;}。
    c. RGB與RGBa顏色:
    - 函數式RGB色彩:寫法為rgb(color),color填入紅(R)、綠(G)、藍(B)三個數值表示顏色組成,以半形逗號分隔,數值的表現方式,可用百分比表示,範圍值是0%到100%,可含小數數值,例如rgb(50%, 100%, 20%),或是rgb(50.3%, 90.2%, 20.7%)都是正確的,如果不支援小數的使用者代理會四捨五入至最接近整數,也能用數字表示,範圍值是0到255,但只能用整數,例如rgb(200, 50, 100),百分比可乘以255轉換成純數值表示。當三個數字都相同時是灰色,依數值高低由淡至深。
    - RGBa色彩:與上述者相似,增加了表示alpha通道的a數值,代表不透明度,數值範圍為0至1,0為完全透明,1為完全不透明,可以小數表示,但不能用百分比,超過或錯誤的數值都會被忽略,其餘表現方式都和函數式RGB色彩表示方式相同,因此可寫成rgb(50%, 100%, 20%, 0.7)rgb(50.3%, 90.2%, 20.7%, 0.5),或是rgb(200, 50, 100, 0.2)都是正確的。
    - 十六進位RGB色彩:六個數字兩兩一組,前兩數代表紅色(R)、中間兩數代表綠色(G)、尾端兩數代表藍色(B),範圍從00至FF,前加半形井字號,數字之間或井字號之間都不能有空白或任何分隔符號,就能表現顏色,像是#0496AF,若是剛好三組數字兩兩相同,如#0099FF,可以簡寫成#09F
    - 十六進位RGBa色彩:用法和十六進位RGB色彩相同,但加上了表示不透明度的a數值,數值範圍為00至FF,00為完全透明,FF為完全不透明,寫法如同#0496AFCA,相同的,當四組數字兩兩相同,如#0099FFCC,可以簡寫成#09FC,但注意支援度。

(RGB與RGBa顏色結束,顏色未完)


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

尚未有邦友留言

立即登入留言