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