html5--6-14 CSS3中的顏色表示方式

實例

 

• 每個參數 (red、green 以及 blue) 定義顏色的強度，可以是介於 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。

 

 

 

 

 

學習要點

• 掌握選擇器的優先級問題
• 掌握CSS3中新增的顏色表示方式

---

選擇器的優先級問題

• 原則上：元素選擇器<類選擇器< ID選擇器<行內樣式
• 誰指向精確誰的優先級高
• 並列的話誰在后邊誰優先級高

CSS2時代的顏色表示方法

關於顏色的小知識

顏色是通過對紅、綠和藍光的組合來顯示的。早期的電腦只支持最多 256 種顏色時，但是現在大多數電腦都能顯示數百萬種顏色。

1. 顏色名稱
• 優點：方便快捷而且特定顏色比較准確
• 缺點：表示顏色數量有限，英文不好的不容易記住，不支持透明度的表示
2. 十六進制方式
• 優點：表示顏色種類多，使用較方便
• 缺點：不支持透明顏色。
3. RGB方式 三原色配色方式
• 優點：表示顏色種類多，使用較方便
• 缺點：不支持透明顏色。
• 每個參數 (red、green 以及 blue) 定義顏色的強度，可以是介於 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。

CSS3新增的顏色表示方法

1. RGBA方式三原色配色方式
• 在RGB模式上新增了Alpha透明度。
• alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。
2. HSL模式
• 語法:HSL(H,S,L)，HSL分別表示色調，飽和度，亮度
• H:0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
• S:(飽和度)。取值為：0.0% - 100.0%
• L:(亮度)。取值為：0.0% - 100.0%
3. HSLA模式
• HSL模式上新增了Alpha透明度。