详解HTML颜色设置

2021-02-19 17:11:08
1768次极悦

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>

</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>

</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控制页面颜色的各种技巧，想学的小伙伴赶快行动吧！

上一篇：详解HTML5新特性下一篇：浅谈JDBC是什么