CSS3中Color的一些特性介紹

2024-07-11 08:25:57

字體：大中小

來源：轉載

供稿：網友

1.CSS 簡介
CSS（Cascading Style Sheets），我們都不陌生吧。特別是我們在開發web項目的時候，用的更是不亦樂乎。

可是，你知道嗎？CSS（注意也就是CSS1）是在1996年的時候產生的標準，也就是到現在時隔（2012-1996）差不多15年的歷史。畢竟時間在一直的走嘛，現在CSS3也在使用中，不過需要注意的是，CSS3并非是W3C的一個標準，它現在依舊是草案（Working Draft）狀態，而不是最終的穩定版---W3C推薦。

據目前所知，CSS3已經增加了40多種模塊（Module），既然還是草案，所以以后就還有增加的可能。所以，用我們的祈禱吧，希望CSS3趕快成為標準。那個時候我們程序員才是解放的時候。

在這篇文章中，我們會討論一下CSS3中新增的40多個模塊中的一個模塊----Color模塊。Color模塊，比其他的模塊更加的穩定。事實上，在2011年6月的時候，它就已經成為了W3C的推薦了，也就是標準了。

這新的CSS3 Color特性包括在傳統的hex 和RGB 值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels。

2.HSL Colors
在我們傳統開發web網頁的時候，我們在使用下面的關鍵字來進行對HTML和CSS進行顏色的設定。

Color 關鍵字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
Hexadecimal（16進制）表示法
RGB (red，green，blue)表示法

比如，如下實例：

復制代碼

代碼如下:
.keyword { color: white; }//關鍵字表示法
.shorthex { color: #FFF; } //短的16進制表示法
.longhex { color: #FFFFFF; } //長16進制表示法
.rgb1 { color: rgb(255, 255, 255); } //rgb1 通過值
.rgb2 { color: rgb(100%, 100%, 100%); } //rgb2 通過百分比

對上面的表示，我們都不陌生。

那么，在CSS3中的HSL怎么表示以及是什么意思呢？

HSL格式：

.example { color: hsl([hue], [saturation], [light]); }用的也很簡單：

.implemented { color: hsl(240, 50%, 80%); }
那這三個單詞什么意思呢？

H（Hue）色調：0和360是紅色，接近120的是綠色，240是藍色。W3C提供了一些對H色調有用的值：Tables Of Hue andSaturation Values,當然也還有其他的工具可以生成Hue的值，比如下面提到的HSL Color Picker在線工具。

S(Saturation,飽和度)值是一個百分比：0%是灰度，100%飽和度最高

L(Lightness，亮度)值也是一個百分比：0%是最暗，50%均值，100%最亮。

HSL Color Picker是一個用來取HSL顏色的工具。界面如下：

HSL瀏覽器兼容性：