CSS Podcast - 006:第 1 部分
顏色是所有網站不可或缺的一環,而且在 CSS 中有很多顏色類型 函數和治療方法
如何決定要使用哪一種顏色類型? 如何將顏色設定為半透明? 本課程 您會學到哪些方案可以幫助您為專案和團隊做出正確的決策。
CSS 提供多種資料類型, 例如字串和數字 顏色是上述類型之一,並使用其他類型。 例如其定義的數字
數字顏色
您在 CSS 中第一次接觸色彩時,很可能是透過數字來增加色彩。 數字顏色值可運用在幾種不同形式中。
十六進位顏色
h1 {
color: #b71540;
}
十六進位標記法 (通常縮短為十六進位) 是 RGB、 會將數值指派給紅色和藍色 也就是三種主要顏色。
十六進位範圍是 0-9 和 A-F。 如果是 6 位數序列中使用 轉換成 RGB 數值範圍 (介於 0 到 255) 每個頻道分別對應至紅色、綠色和藍色頻道
您也可以定義任何數字顏色的 Alpha 值。
Alpha 值是透明度的百分比。
若是 16 個數字,您可以在 6 位數字的序列中加入另外兩位數,
產生八位數序列
舉例來說,如要將十六進位代碼設為黑色,請編寫 #000000
。
如要增加 50% 的透明度,請變更為 #00000080
。
由於十六進位尺碼為 0-9 和 A-F,因此透明度值可能不如預期。
以下是新增至黑色十六進位碼 #000000
的一些鍵/常見值:
- 0% Alpha (完全透明) 為 00:
#00000000
- 50% Alpha 為 80:
#00000080
- 75% Alpha 為 BF:
#000000BF
如要將二位數十六進位轉換成十進位, 第一個數字再乘以 16 (因為十六進位是底數 16), 然後加上第二位數以 BF 做為 75% Alpha 的範例:
- B 等於 11,乘以 16 等於 176
- F 等於 15
- 176 + 15 = 191
- Alpha 值為 191 到 255 的 75%
RGB (紅、綠、藍色)
h1 {
color: rgb(183, 21, 64);
}
RGB 顏色是以
rgb()
色彩函式,
將數字或百分比做為參數
數字必須介於 0-255 的範圍內,且百分比介於 0% 至 100% 之間。
RGB 大小為 0 至 255
所以 255 就等於 100%,0 到 0%。
如要在 RGB 中設定黑色,請將其定義為 rgb(0 0 0)
、
也就是零紅色、零綠色和零藍色
黑色也可以定義為 rgb(0%, 0%, 0%)
。
白色為正反對面:rgb(255, 255, 255)
或 rgb(100%, 100%, 100%)
。
Alpha 是透過以下兩種方式在 rgb()
中設定。
請在紅色、綠色和藍色參數「後面」加上 /
。
或使用 rgba()
函式。
可使用 0 到 1 之間的百分比或小數來定義 Alpha。
舉例來說,如要在新型瀏覽器中將 50% 的 Alpha 值設為黑色,請編寫:rgb(0 0 0 / 50%)
或 rgb(0 0 0 / 0.5)
。
如需更廣泛的支援,請使用 rgba()
函式
寫入:rgba(0, 0, 0, 50%)
或 rgba(0, 0, 0, 0.5)
。
HSL (色調、飽和度、亮度)
h1 {
color: hsl(344, 79%, 40%);
}
HSL 代表色調、飽和度和亮度。 Hue 表示從 0 到 360 度的色彩轉盤上,從紅色開始 (同時是 0 和 360) 的值。 180 或 50% 的色調則代表藍色範圍。 這是我們看到色彩的起點。
飽和度是指所選色調的生動程度。
完全不飽和的顏色 (飽和度為 0%
) 將顯示為灰階。
最後,Lightness 參數用來說明增加亮度的比例由白色到黑色。
亮度為 100%
時一律會呈現白色。
使用 hsl()
顏色函式時,
您可以編寫 hsl(0 0% 0%)
,甚至是 hsl(0deg 0% 0%)
,定義真實黑色。
這是因為 hue 參數會定義色輪的度數
如果使用數字類型,則該類型為「0-360」。
您也可以使用角度類型,也就是 (0deg
) 或 (0turn)
。
飽和度和亮度兩者都是以百分比定義。
Alpha 定義在 hsl()
中
方法與 rgb()
相同,方法是在色調、飽和度和亮度參數後方加上 /
,或使用
hsla()
函式。
可使用 0 到 1 之間的百分比或小數來定義 Alpha。
舉例來說,如要將 50% 的 Alpha 值設為黑色,請使用 hsl(0 0% 0% / 50%)
或 hsl(0 0% 0% / 0.5)
。
請使用 hsla()
函式寫入:hsla(0, 0%, 0%, 50%)
或 hsla(0, 0%, 0%, 0.5)
。
顏色關鍵字
CSS 中有 148 種具名顏色, 這些是實際的英文名稱,例如紫色、番茄和黃金。 還有一些最熱門的名稱 Web Almanac 的研究基礎 分別是黑、白、紅、藍和灰色 我們的精選應用程式包括金黃、紅杉和辣椒。
除了標準顏色之外,您還可以使用特殊關鍵字:
transparent
是完全透明的顏色。 也是background-color
的初始值currentColor
是color
屬性根據內容計算的動態值。 如果文字顏色為red
,然後將border-color
設為currentColor
,該文字也會呈現紅色。 如果您定義currentColor
的元素並未定義color
值, 系統會改為透過串聯計算「currentColor
」
在 CSS 規則中使用顏色的位置
如果 CSS 資源接受
<color>
資料類型做為值。
即可接受上述任一種色彩方式。
如要設定文字樣式,請使用 color
、text-shadow
和 text-decoration-color
屬性
這些值都會接受顏色做為值或顏色的一部分。
背景可以將顏色設為 background
或 background-color
的值。
顏色也可以用於漸層,例如 linear-gradient
。
漸層是可在 CSS 中透過程式定義的圖片類型。
漸層值支援兩種以上顏色格式組合的顏色,例如十六進位、 rgb 或 hsl。
最後,border-color
和 outline-color
會設定方塊的框線和外框顏色。
box-shadow
屬性也接受使用顏色做為其中一個值。
隨堂測驗
測試您對顏色的瞭解程度
以下何者是有效的顏色?
#OOFZ2
rgb(255, 0, 0)
#0f08
rbga(400 0 1)
hotpink
hsl(180deg 50% 50%)
找出無效的 hsl 顏色。
hsl(2rad 50% 50%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)