搜尋
首頁web前端css教學如何設定CSS 文字字體顏色

如何設定CSS 文字字體顏色

Jun 11, 2018 pm 03:57 PM
colorcss

這篇文章主要介紹了CSS 文字字體顏色設定方法(CSS color),需要的朋友可以參考下

一、認識CSS 顏色(CSS color)

#這裡要介紹的是網頁設定顏色包含有哪些;網頁顏色規定規格。

1、常用顏色地方包含:字型顏色、超連結顏色、網頁背景顏色、邊框顏色
2、顏色規格與顏色規定:網頁使用RGB模式顏色

二、顏色基礎知識

網頁中顏色的運用是網頁不可或缺的一個元素。使用顏色目的在於有區別、有動感(特別是超連結中運用)、美觀之用,同時顏色也是各種各樣網頁的樣式表現元素之一,了解CSS 字體顏色。

傳統的html顏色與w3c標準下的css顏色比較和p CSS運用顏色

CSS color顏色語法:

color:#000000;

Css樣式中color後直接加上RGB顏色值(#FFFFFF 、#000000 、#F00)
RGB顏色值在實際佈局時候確定,可以使用Photoshop(簡稱PS)拾取工具進行取得。

三、兩種方法設定物件顏色樣式

1、在p標籤內使用color顏色樣式

www.jb51.net

2、在CSS選擇器中使用color顏色樣式CSS程式碼:

.pcss5{color:#00F}
/* 设置对象pcss5内文字为蓝色 */

擴充閱讀:這裡運用了CSS註解對此樣式設定說明,了解CSS 註解

3、p CSS顏色樣式完整案例:

Css程式碼:

.pcss5{color:#00F}
/* 设置对象pcss5内文字为蓝色 */

HTML程式碼:

<p> 
标签内使用color css样式
<p style="color:#F00">www.jb51.net 红色</p> 
</p> 
<p>外部样式表设置对象color颜色

<p class="pcss5">www.jb51.net 蓝色</p> 
</p>

4、實例結構圖:

以上使用標籤內使用color顏色樣式和css程式碼使用color顏色樣式。

四、文字顏色控制一樣  

傳統html和css 文字顏色相同使用「color:」 「RGB顏色取值」即可,如顏色為黑色字即對應設定CSS屬性選擇器內新增「color:#000;」即可。

五、網頁背景顏色設定區別  

傳統設定背景顏色使用“bgcolor=顏色取值”,而CSS中則“background:” 顏色取值。例如:設定背景為黑色,傳統Html設置,即在標籤內加入“bgcolor="#000"”即可實現顏色為黑色背景,如果在W3C中即在對應CSS選擇器中始終“background:#000”實現。

六、設定邊框顏色差異  

傳統“bordercolor=取值”,CSS中“border-color:” 顏色取值。例如:在傳統html直接在table標籤加入“bordercolor="#000"”即可,在現在CSS中設定“border-color:#000;”即可讓邊框顏色為黑色,同時記得對包括設定寬度和樣式(虛線、實現)。

p CSS顏色值擴充知識:
顏色值是一個關鍵字或一個數字的RGB規格。

16個關鍵字是採取從Windows的VGA調色盤: 水色, 黑色, 藍色, 紫紅色, 灰, 綠, 灰, 褐紅色,藏青色, 橄欖色, 紫色, 紅色, 銀色, 青色, 白色, 黃色。

七、RGB顏色給了四種方法之一  

#1、#rrggbb( 如,#00cc00) (強烈建議使用此表示顏色取值)
2、#的RGB( 如,#0c0)
3、RGB(十中,x,x)的x是一個包容性的0和255之間的整數( 如的RGB(0,204,0 ))
4、RGB(Ÿ%,Ÿ%,Ÿ%),其中y是一個包容性的數量介於0.0和100.0( 如的RGB(0%,80%,0%))

八、以下是RGB顏色表


當然一般的網頁開發軟體都有顏色取值器:

#網頁開發軟體DW軟體中CSS取色器
如何取得CSS顏色值?
我們又不能記住顏色值,以及如何確定準確的與美工圖相同顏色值呢?其實很簡單通常我們是在PS軟體裡透過識色器工具進行獲得準確顏色值,當然也可以藉用其它專門辨識顏色工具來取得準確的color顏色值。
九、p css color顏色樣式總結
使用css樣式設定物件內容color顏色樣式,我們可以使用命名CSS類別物件設定其顏色樣式,還有直接在html標籤內設置color樣式。以上我們也詳細介紹並實踐這2種對文字內容設定顏色方法。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

JS與CSS實作漸進式背景特效的程式碼

##

以上是如何設定CSS 文字字體顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
帶有真實下劃線的造型鏈接帶有真實下劃線的造型鏈接Apr 17, 2025 am 10:57 AM

在進入如何樣式下劃線之前,我們應該回答以下問題:我們應該強調嗎?

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow domApr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

帶有GraphQL的多人遊戲TIC TAC TOE帶有GraphQL的多人遊戲TIC TAC TOEApr 17, 2025 am 10:54 AM

GraphQL是API的查詢語言,對前端開發人員非常有能力。正如GraphQL網站所解釋的那樣,您可以描述您的數據,詢問什麼

使用CSS變量的邏輯操作使用CSS變量的邏輯操作Apr 17, 2025 am 10:44 AM

通常,在使用開關變量(一個0或1的變量時,這是在這篇文章中更詳細地解釋的概念),我希望我可以

懶負載嵌入YouTube視頻懶負載嵌入YouTube視頻Apr 17, 2025 am 10:40 AM

通過亞瑟·科倫贊(Arthur Corenzan),這是一個非常聰明的主意。與其使用默認的YouTube嵌入,該YouTube嵌入了,這會在用戶播放的情況下在頁面上添加大量資源

您可以在CSS中旋轉光標嗎?您可以在CSS中旋轉光標嗎?Apr 17, 2025 am 10:28 AM

kind!沒有簡單或標準的方法可以做到這一點,但是它可能是可能的。您可以使用CSS將光標更改為不同的內置本機版本

漢堡菜單,帶有React鉤子和样式組件漢堡菜單,帶有React鉤子和样式組件Apr 17, 2025 am 10:21 AM

我們都知道什麼是漢堡菜單,對嗎?當該模式開始進入網絡設計時,它既被嘲笑又鼓掌

玻璃狀(和優雅)的文字效果玻璃狀(和優雅)的文字效果Apr 17, 2025 am 10:19 AM

蘋果街機的著陸頁具有很酷的效果,其中一些“白色”文本具有半透明的效果。您可以看到背景的一些顏色

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器