9.1 CSS中設置顏色的方法
顏色在網頁設計和開發中扮演著重要角色。CSS中有多種方式設定顏色，讓開發者可以創建吸引人的直觀介面。以下我們來看看CSS中不同的設置顏色的方法，包括色彩模型、透明度、漸變和標準的顏色操作功能。
CSS中設置顏色的方法：
- 命名顏色
- 十六進制顏色
- RGB和RGBA
- HSL和HSLA
- 漸變
- 透明度
9.2 RGB色彩模型
模型RGB (Red Green Blue)透過混合紅色、綠色和藍色來定義顏色。每種顏色的值設定在0到255之間。
重要！
一個位元組可以表示256個值：從0到255。0是最小值，255是最大值。
語法：
CSS
color: rgb(255, 0, 0); /* 紅色 */
color: rgb(0, 255, 0); /* 綠色 */
color: rgb(0, 0, 255); /* 藍色 */
範例：
CSS
body {
background-color: rgb(240, 248, 255); /* 背景色：aliceblue */
}
9.3 HEX色彩模型
HEX (Hexadecimal)用十六進制值來表示顏色。每個值(RR, GG, BB)可以從00到FF。
重要！
一個位元組可以表示256個值：從0到255。但如果用16進制表示，它們從0到FF—最大值。
語法：
CSS
color: #ff0000; /* 紅色 */
color: #00ff00; /* 綠色 */
color: #0000ff; /* 藍色 */
範例：
CSS
h1 {
color: #4CAF50; /* 綠色 */
}
9.4 HSL色彩模型
HSL (Hue, Saturation, Lightness)以色相、飽和度和亮度來表示顏色。色相(Hue)以度數計算(0-360)，飽和度(Saturation)和亮度(Lightness)用百分比(0%-100%)測量。
語法：
CSS
color: hsl(0, 100%, 50%); /* 紅色 */
color: hsl(120, 100%, 50%); /* 綠色 */
color: hsl(240, 100%, 50%); /* 藍色 */
範例：
CSS
p {
color: hsl(210, 100%, 50%); /* 藍色 */
}
9.5 透明度：RGBA和HSLA
當你想要為顏色添加透明度時，可以使用RGBA和HSLA模型。這些模型中增加了第四個參數—alpha通道(Alpha)，其值從0(完全透明)到1(完全不透明)。
1. RGBA (Red, Green, Blue, Alpha):
語法：
CSS
color: rgba(255, 0, 0, 0.5); /* 半透明紅色 */
color: rgba(0, 255, 0, 0.3); /* 半透明綠色 */
color: rgba(0, 0, 255, 0.7); /* 半透明藍色 */
範例：
CSS
div {
background-color: rgba(255, 99, 71, 0.6); /* 半透明蕃茄色 */
}
2. HSLA (Hue, Saturation, Lightness, Alpha):
語法：
CSS
color: hsla(0, 100%, 50%, 0.5); /* 半透明紅色 */
color: hsla(120, 100%, 50%, 0.3); /* 半透明綠色 */
color: hsla(240, 100%, 50%, 0.7); /* 半透明藍色 */
範例：
CSS
span {
color: hsla(210, 100%, 50%, 0.8); /* 半透明藍色 */
}
GO TO FULL VERSION