[Back To Basic] HTML5 - Styles, Colors

Styles

HTML中提供"Styles"這個屬性(Attributes)，賦予HTML元素(Elements)樣式。但在可維護性的考量上，CSS盡量不要用這種方式撰寫。CSS和HTML應該拆成兩個檔案來維護，才符合關注點分離的原則。

Colors

顏色有6種表現方式

• 預先定義好的顏色名字 e.g. Orange, Red...
• RGB

三原色光模式，寫法: rgb(red, green, blue)，值為0~255，e.g. rgb(180,180,180)

• HEX

三原色光模式改成十六進制表示，寫法: #ffffff

• HSL

色相(hue), 飽和(saturation), 亮度(lightness)表示方式，寫法: hsl(hue, saturation, lightness)

色相(hue)範圍 0~360

飽和(saturation) 範圍 0%~100%

亮度(lightness) 範圍 0%~100%

延伸學習: http://csscoke.com/2015/01/01/rgb-hsl-hex/

• RGBA

三原色光模式+透明度，寫法: rgba(red, green, blue, alpha)

alpha的範圍:0.0~1.0

• HSLA

概念同上，寫法: hsla(hue, saturation, lightness, alpha)