:CSS-顏色設置-經驗觀點免费ppt模版下载-道格办公

CSS-顏色設置

色的設置一定很熟悉了吧!在CSS中,可以使用顏色值來設置元素的顏色。常用的顏色值有以下幾種:1. 關鍵字顏色值:使用預定義的顏色關鍵字,如red(紅色)、blue(藍色)、green(綠色)等。 2. 十六進制顏色值:使用6位十六進制數表示顏色,以#開頭,如#FF0000代表紅色。 3. RGB顏色值:使用紅、綠、藍三個通道的值來表示顏色,格式為rgb(紅色值, 綠色值, 藍色值),每個通道的值範圍是0-255。4. RGBA顏色值:與RGB顏色值類似,只是多了一個透明度的通道,格式為rgba(紅色值,

大家好久不見!我回來更新了!謝謝大家還關注著我的公眾號!比心

想試一下新打開的插廣告功能,開的智能插入大家不要被廣告迷惑不知道真正的圖片在哪裡

大家對顏色設置應該是不陌生的,設置背景顏色或者是文字顏色都會接觸到。

我剛剛接觸顏色設置的時候經常因為自己有關色彩的英文知道的不夠多而憂鬱,設置的時候都是red,green ,blue之類的顏色,想做個漂亮的背景或文字的顏色這種膚淺的詞彙必然是不夠不夠不夠

通過顏色名稱設置顏色

哈哈哈雖然我上面說了通過顏色名稱設置很膚淺,但它也在今天的教程裡擁有姓名!

這個方式雖然不容易(基本不可能)得到自己想要的界面效果但是它拿來測試隨手一用賊方便!而且色彩很醒目!所以還是需要知道!

我個人認為沒必要和英文色彩名死磕,知道幾個基本的詞彙方便使用就好了

 <p >red'>通過顏色名稱設置顏色</p>

解釋:p標籤的樣式為:背景色設置為紅色

效果如下圖

通過16進制設置顏色

大家可能也見過這種顏色設置方式 #FFA900 、#F00。

看上去似乎是可以通過鍵盤瞎打獲得驚喜or驚嚇的顏色設置方式。 至於為什麼有的是#後面6個字符,有的是#後面3個字符也不了解,能用什麼字符來表示顏色也不了解。


這裡我們要知道紅綠藍這三基色,具體的概念大家可以搜索一下。我們後面提到的RGB也是紅R ED綠GREEN藍BLUE三基色的英文首字母組成的。


然後我們要說一下16進制,我們上數學課用的是10進制,滿十進一位,16進制顧名思義就是滿16進一位。 【0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F】這就是16進制的0-15。


顏色由一個十六進制符號(形如#FFA900)來定義,這個符號由紅色、綠色和藍色的值組成(RGB)。 每種顏色的最小值是0由十六進制的#00表示,最大值是255由十六進制的#FF表示。


所以不是隨便在鍵盤上打6個字母就可以獲得顏色,字母是16進制中對10進制中10~15的表示方式。


<p >#FF0000</p>


<p >#F00</p>


解釋:p標籤的樣式為:背景色設置為 #FFFF00

           p標籤的樣式為:背景色設置為 #FF0


效果如下圖

可以看到他們顏色一樣,十六進製表示顏色每兩位相同可以省略,所以會出現3個字符表示的顏色。

通過RGB設置顏色

我們在上邊提到了一下子三基色和16進制,每種顏色的最小值是0由十六進制的#00表示,最大值是255由十六進制的#FF表示。 RGB的方式就是換了一個形式而已。

我自己寫小網頁的時候很喜歡用RGB設置顏色,因為大部分截圖工具都提供色彩的RGB碼,配色好參考。

<p >

        RGB設置的顏色

</p>

解釋:p標籤的樣式為:背景色設置為 rgb(111,111,011)


效果如下圖

通過RGBA設置顏色

RGBA比RGB多了一個A,這個A是給色彩加一個透明度的意思

RGBA(紅,綠,藍,alpha) Alpha參數介於0~1之間。

0是完全透明,1是完全不透明。


<p >

RGB設置的顏色

</p>

<p >

RGBA設置的顏色

</p>

解釋:p標籤的樣式為:背景色設置為 rgb(111,111,011)

           p標籤的樣式為:背景色設置為 rgba(111,111,011,0.5)


效果如下圖

上圖對比可以看出來透明度設置為0.5的效果。

謝謝大家看這次更新! (✪ω✪)

我會盡量多更的,希望能找時間更個大的,總寫導航條怎麼寫,想克服拖延症寫個中間的塊塊。

文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/CSScolor%20settings.html

(810)
打賞 支付宝扫一扫 支付宝扫一扫
single-end

相關推薦