web前端入門到實(shí)戰(zhàn)：css中顏色-創(chuàng)新互聯(lián)

顏色

如果我們相給頁(yè)面設(shè)置顏色可以采用多種方法進(jìn)行設(shè)置：

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的10多年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如成都玻璃貼膜等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致稱贊。

一、命名顏色

假設(shè)在設(shè)置頁(yè)面的顏色時(shí)覺得一部分很小的顏色集中就足夠了，就可以直接給定顏色的名稱。CSS稱這些有名稱的顏色為命名顏色。

命名顏色的關(guān)鍵字有限，css定義了17個(gè)標(biāo)準(zhǔn)色：淺綠色，黑色，藍(lán)色，紫紅色，灰色，橙色，綠色，石灰，栗色，海軍，橄欖，紫，紅，銀，藍(lán)綠色，白色和黃色。

有的時(shí)候也許使用其他顏色值，并不在標(biāo)準(zhǔn)顏色之內(nèi)的顏色也可以使用，它之所以能起作用，原因是大多數(shù)的web瀏覽器能識(shí)別多達(dá)140個(gè)顏色，包括前面說的17種顏色。

（二）、RGB指定顏色

計(jì)算機(jī)通過組合不同的紅色、藍(lán)色、綠色分量來創(chuàng)造顏色。這種組合通常被稱為RGB顏色?？梢灾苯釉L問這些顏色，通過調(diào)整紅、綠、藍(lán)分量來大限度的控制顏色。所有瀏覽器都支持 RGB 顏色值。

RGB 顏色值是這樣規(guī)定的：rgb(red, green, blue)。每個(gè)參數(shù) (red、green 以及 blue) 定義顏色的強(qiáng)度，可以是整數(shù)三元組表示法：參數(shù)介于 0 與 255 之間的整數(shù)，或者是百分比值（從 0% 到 100%）。

百分?jǐn)?shù)記法：分別指定白色和黑色，值將指定為：

rgb(100%,100%,100%)
rgb(0%,0%,0%)

整數(shù)三元組記法，相同的顏色表示如下

rgb(255,255,255)
rgb(0,0,0)
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

在百分?jǐn)?shù)記法中也可以使用分?jǐn)?shù)，假設(shè)如果向指定某一顏色的紅色分量為25.5%，綠色分量為40%，藍(lán)色分量為98.2%，如果用戶代理忽略小數(shù)點(diǎn)，就會(huì)把這些值取整為與之最接近的整數(shù)。當(dāng)然整數(shù)取值法只能使用整數(shù)。如下所示：

h3{color:rgb(25.5%，40%，98.2%)} 轉(zhuǎn)換為 h3{color:rgb(26%，40%，98%)}

無論哪種記法，如果值落在可取范圍之外，都會(huì)變動(dòng)到最接近的范圍邊界。當(dāng)一個(gè)值大于100%或是小于0%都會(huì)默認(rèn)的調(diào)整到100%或0%（這是可取的大和最小值）

h3{color:rgb(200%，-40%，0%)} 轉(zhuǎn)換為 h3{color:rgb(100%，0%，0%)}

h3{color:rgb(42，500，-20)} 轉(zhuǎn)換為h3{color:rgb(42，255,0)}

假設(shè)有一個(gè)顏色為rgb（25%，37.5%，60%），將其轉(zhuǎn)換為整數(shù)記法，百分?jǐn)?shù)乘以255，就會(huì)得到63.75、95.625、153。再將這些值取整為最接近的整數(shù)，記得到了rgb（64,96,153）。

（三）、十六進(jìn)制RGB顏色

所有瀏覽器都支持十六進(jìn)制顏色值。

十六進(jìn)制顏色是這樣規(guī)定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍(lán)色）十六進(jìn)制整數(shù)規(guī)定了顏色的成分。所有值必須介于 0 與 FF 之間。大寫小寫都可以。

如果組成十六進(jìn)制的三組數(shù)各自都是成對(duì)的，還允許一種簡(jiǎn)寫方法，這種寫法一般都是#RGB

如 h3{color:#FFF}=h3{color:#FFFFFF}

瀏覽器會(huì)取一位，并將其復(fù)制成兩位。因此#FF0000等價(jià)于#F00。

（四）、RGBA顏色值

RGBA 顏色值得到以下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 顏色值是 RGB 顏色值的擴(kuò)展，帶有一個(gè) alpha 通道 - 它規(guī)定了對(duì)象的不透明度。

RGBA 顏色值是這樣規(guī)定的：rgba(red, green, blue, alpha)。alpha 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字。

（五）、HSL 顏色

HSL 顏色值得到以下瀏覽器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue（色調(diào)）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面坐標(biāo)表示法。

HSL 顏色值是這樣規(guī)定的：hsl(hue, saturation, lightness)。

Hue 是色盤上的度數(shù)（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍(lán)色。Saturation 是百分比值；0% 意味著灰色，而 100% 是全彩。Lightness 同樣是百分比值；0% 是黑色，100% 是白色。

（六）、HSLA 顏色

HSLA 顏色值得到以下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 顏色值是 HSL 顏色值的擴(kuò)展，帶有一個(gè) alpha 通道 - 它規(guī)定了對(duì)象的不透明度。

HSLA 顏色值是這樣規(guī)定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 參數(shù)定義不透明度。alpha 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字。

（七）、web安全顏色

web安全顏色是指，在256色計(jì)算機(jī)系統(tǒng)上可以避免抖動(dòng)的顏色，保證網(wǎng)頁(yè)顏色可以正確顯示。web安全顏色可以表示為RGB值20%和51（相應(yīng)的十六進(jìn)制值為33）的倍數(shù)。另外，0%或0也是一個(gè)安全值。

• 如果使用RGB百分?jǐn)?shù)，要讓所有這三個(gè)分量要么是0%，要么是能被20整除的數(shù)值，例如rgb（40%，100%，80%）或rgb（60%，0%，0%）。
• 如果使用0~255范圍的RGB值，則分量要么是0，要么是能被51整除的數(shù)，如rgb（0,204,153）或rgb（255,0,102）
• 采用十六進(jìn)制記法，使用值為00、33、66、99、CC和FF的三元組都認(rèn)為是Web安全的。這種例子還有#669933、#00CC66和#FF00FF。這說明，web安全顏色的簡(jiǎn)寫十六進(jìn)制值是0、3、6、9、C和F。因此#693、#0C6、#F0F都是web安全顏色的例子。

新聞名稱：web前端入門到實(shí)戰(zhàn)：css中顏色-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article10/eejgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、ChatGPT、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)