專注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-02-19 17:11:08 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽2019次
HTML支持140多種顏色，如果我們要在HTML中添加這些顏色，就要用到style屬性，用于內(nèi)聯(lián)CSS。在大多數(shù)情況下，只需輸入對(duì)應(yīng)的英文單詞，即可找到這種顏色。如果你對(duì)預(yù)置的顏色不滿意，也可以自己調(diào)色。本文我們就來(lái)簡(jiǎn)單聊聊HTML顏色設(shè)置的相關(guān)知識(shí)。
HTML顏色設(shè)置分為以下4種情況：字體顏色、背景顏色、邊框顏色和自己調(diào)色。
一、字體顏色（color）
舉個(gè)例子，我要把標(biāo)題改成藍(lán)色文字（如果不修改文字顏色，瀏覽器會(huì)默認(rèn)顯示為黑色，就像這篇文章），應(yīng)該怎么做呢？我們只需要在前標(biāo)記里嵌入style屬性即可：
<h1 style="color:blue;">我的第一個(gè)標(biāo)題</h1>
用瀏覽器打開看看，標(biāo)題是否變成了藍(lán)色。不僅標(biāo)題可以添加字體顏色，段落也可以哦：
<p style="color:red;">這是一個(gè)段落，我要把它設(shè)置為藍(lán)色，只需在前面的標(biāo)簽上嵌入style屬性即可，style用于內(nèi)聯(lián)CSS，在以后的文章當(dāng)中我們會(huì)詳細(xì)講解CSS。</p>
下面是完整的代碼（千萬(wàn)不要忽略上下兩部分，上面的示例只是局部代碼，整體結(jié)構(gòu)要完整且不能出現(xiàn)錯(cuò)誤。）。再用瀏覽器打開看一看，標(biāo)題和下面一段文字的顏色是否顯示正常。<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">我的第一個(gè)標(biāo)題</h1>
<p style="color:red;">這是一個(gè)段落，我要把它設(shè)置為藍(lán)色，只需在前面的標(biāo)簽上嵌入style屬性即可，style用于內(nèi)聯(lián)CSS，在以后的文章當(dāng)中我們會(huì)詳細(xì)講解CSS。</p>
</body>
</html>
二、背景顏色（background-color）
背景顏色指一個(gè)HTML元素（目前我們所學(xué)的內(nèi)容元素有<h1>至<h6>和<p>）覆蓋著的顏色。例如這篇文章的背景顏色就是白色，黑色的文字覆蓋在白色的背景上。我們可以隨意更改文字的背景顏色，甚至可以拿一張圖片作為背景。想要更改背景顏色（如果不嵌入背景顏色屬性，默認(rèn)情況下就是白色的，就像這篇文章），同樣是在style屬性里更改。例如我要把段落設(shè)置成黃色的背景：
<p style="background-color:yellow;">這是一個(gè)段落，我要把它的背景顏色設(shè)置為藍(lán)色，只需在前面的標(biāo)簽上嵌入style屬性即可，style用于內(nèi)聯(lián)CSS，在以后的文章當(dāng)中我們會(huì)詳細(xì)講解CSS。</p>
提示：多個(gè)屬性可以并列存在，因此你可以同時(shí)給一段文字添加背景顏色和字體顏色，甚至更多。我再把標(biāo)題設(shè)置成橙色背景，大家輸入完代碼之后保存并關(guān)閉，確保文件是HTML文檔，然后用瀏覽器打開欣賞一下自己的「佳作」。
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:orange;">我的第一個(gè)標(biāo)題</h1>
<p style="background-color:yellow;">這是一個(gè)段落，我要把它的背景顏色設(shè)置為藍(lán)色，只需在前面的標(biāo)簽上嵌入style屬性即可，style用于內(nèi)聯(lián)CSS，在以后的文章當(dāng)中我們會(huì)詳細(xì)講解CSS。</p>
</body>
</html>
三、邊框顏色（border）
什么是邊框？給一些文本添加邊框，也就是用一個(gè)長(zhǎng)方形（或正方形）把這些文本框起來(lái)。邊框有三個(gè)參數(shù)需要設(shè)置，那就是邊框的寬度、邊框的樣式、邊框的顏色。例如我要把標(biāo)題添加一個(gè)直邊框，寬度（也就是粗細(xì)、大小）設(shè)置為5px，顏色設(shè)置為綠色；我再把下面的段落添加一個(gè)直邊框，寬度為3px，顏色為綠色：
<!DOCTYPE html>
<html>
<body>
<h1 style="border:5px solid green;">我的第一個(gè)標(biāo)題</h1>
<p style="border:3px solid green;">這是一個(gè)段落，我要把它的邊框顏色設(shè)置為綠色，只需在前面的標(biāo)簽上嵌入style屬性即可，style用于內(nèi)聯(lián)CSS，在以后的文章當(dāng)中我們會(huì)詳細(xì)講解CSS。我也會(huì)在以后的文章當(dāng)中詳細(xì)講解邊框?qū)傩浴?lt;/p>
</body>
</html>
用瀏覽器打開看一下代碼是否正確。
四、自己調(diào)色
我們已經(jīng)講過HTML支持140種顏色，一般情況下應(yīng)該足夠我們使用。當(dāng)然，也可以自己輸入RGBA（基于RGB）、HEX、HSLA（基于HSL）的數(shù)值（注意格式，如rgba(red, green, blue, alpha)、#rrggbb、hsla(hue, saturation%, lightness%, alpha)等），就可以找到自己想要的顏色。只需要把數(shù)值替換掉原有應(yīng)該填單詞的位置，例如我要把標(biāo)題設(shè)置成藍(lán)色字體、橙色背景、5px寬的綠色直邊框，把段落設(shè)置成紅色字體、黃色背景、3px寬的綠色直邊框。如果我用RGB來(lái)表示顏色（默認(rèn)情況下，A值是1.0，最不透明），完整代碼如下：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:rgb(0,0,255);background-color:rgb(255,128,0);border:5px solid rgb(0,255,0);">我的第一個(gè)標(biāo)題</h1>
<p style="color:rgb(255,0,0);background-color:rgb(255,255,0);border:3px solid rgb(0,255,0);">這是一個(gè)段落，style用于內(nèi)聯(lián)CSS。</p>
</body>
</html>
用瀏覽器打開，看看顯示的效果是否和代碼一致。
以上就是關(guān)于HTML顏色設(shè)置的一些知識(shí)，我們想要制作出色彩繽紛的網(wǎng)頁(yè)，就必須要學(xué)好HTML顏色使用，在本站的HTML教程中不僅有關(guān)于HTML各種顏色的代碼還有HTML中使用CSS控制頁(yè)面顏色的各種技巧，想學(xué)的小伙伴趕快行動(dòng)吧！
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)