使用 CSS 将颜色应用于 HTML 元素。您还可以选择要将颜色应用于元素的哪个部分。
我们刚刚看到了将样式应用于 HTML 文档的各种方法。其中一些示例包括为文档添加颜色。鉴于颜色是任何网站设计的主要部分，让我们更仔细地研究将颜色应用于网页。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
前景色
前景色用于更改元素文本的颜色。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
前景色是这样指定的。color:orange;文章源自你的网络首码项目网-https://www.youranweb.com/40.html
例如：文章源自你的网络首码项目网-https://www.youranweb.com/40.html
<h3 style="color:orange;">HTML Colors</h3>
前景色还可以（间接）影响元素其他部分的颜色，包括其边框。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
这可能是也可能不是预期的效果。但是，始终可以通过显式指定受影响属性的颜色来覆盖它。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
试试这个
下面是指定边框及其颜色的示例。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
从样式中移除，然后点按以查看它如何更改边框的颜色。border-color:olivedrab;Run文章源自你的网络首码项目网-https://www.youranweb.com/40.html
背景颜色
背景颜色指定如下：background-color:yellow文章源自你的网络首码项目网-https://www.youranweb.com/40.html
<h3 style="background-color:yellow;">I have a background color.</h3>
边框颜色
我们已经看到了一个为元素边框指定颜色的示例（上图）。这是指定各种边框属性的一种方法。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
您还可以一次性指定多个边框属性（而不是将它们分成不同的声明）。可以使用边框快捷方式属性执行此操作，该属性允许您在一个位置指定边框的宽度、样式和颜色。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
下面是一个示例：文章源自你的网络首码项目网-https://www.youranweb.com/40.html
<h3 style="border:1px dashed orange;">I have a border color.</h3>
嵌入式和外部样式
此页上的示例使用内联样式。与所有样式一样，您也可以使用嵌入方法或外部方法。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
颜色名称
在上面的示例中，我使用颜色名称来指定颜色。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
您可以通过颜色的名称（例如，），其十六进制值（例如），RGB值（例如）或其HSL值（例如）来指定颜色。blue#0000ffrgb(0,0,255)hsl(240,100%,100%)文章源自你的网络首码项目网-https://www.youranweb.com/40.html
初学者可能会发现通过颜色名称指定颜色更容易，因为颜色名称可能比其他选项更容易记住。尽管颜色名称更易于记忆，但十六进制、RGB 和 HSL 表示法为您提供了更多颜色选项。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
十六进制颜色代码是字母和数字的组合。数字从 0 到 9，字母从 A 到 F。在 HTML/CSS 中使用十六进制颜色值时，请在值前面加上哈希 （#）。虽然十六进制值起初可能看起来有点奇怪，但您很快就会习惯它们。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
如果您使用图形软件（如 Adobe 照片商店或 GIMP），则可能会使用 RGB 或 HSL 方法。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
下图显示了颜色名称的一些示例，以及它们相应的十六进制和 RGB 值。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
| 颜色名称 | 十六进制代码 RGB | 十进制代码 |
|---|---|---|
| 黑 | 000000 | 0,0,0 |
| 银 | 断续器 | 192,192,192 |
| 灰色 | 808080 | 128,128,128 |
| 白 | 断续器 | 255,255,255 |
| 栗色 | 800000 | 128,0,0 |
| 红 | FF0000 | 255,0,0 |
| 颜色名称 | 十六进制代码 RGB | 十进制代码 |
|---|---|---|
| 紫色 | 800080 | 128,0,128 |
| 紫红色 | 断续器00FF | 255,0,255 |
| 绿 | 008000 | 0,128,0 |
| 石灰 | 00FF00 | 0,255,0 |
| 橄榄 | 808000 | 128,128,0 |
| 黄色 | 断续器00 | 255,255,0 |
| 颜色名称 | 十六进制代码 RGB | 十进制代码 |
|---|---|---|
| 海军 | 000080 | 0,0,128 |
| 蓝 | 0000FF | 0,0,255 |
| 水鸭 | 008080 | 0,128,128 |
| 水 | 00FFFF | 0,255,255 |
此表是 HTML 中可用大量颜色的一小部分示例。要了解更多信息，请查看 HTML 颜色代码。文章源自你的网络首码项目网-https://www.youranweb.com/40.html
您可以通过简单地输入任何六位数的十六进制值（前面带有哈希值）来制作自己的颜色。
在下面的示例中，我们使用三种不同的方法指定相同的颜色。结果颜色相同。
<h3 style="color:blue">Color Name</h3> <h3 style="color:#0000ff">Hexadecimal</h3> <h3 style="color:rgb(0,0,255)">RGB Value</h3>
如果我们想更改为不同的蓝色阴影，我们可以稍微更改我们的值，如下所示：
<h3 style="color:steelblue;">Color Name</h3> <h3 style="color:#4682B4;">Hexadecimal</h3> <h3 style="color:rgb(70,130,180)">RGB Value</h3>
透明度
您还可以使用 alpha 来指定颜色应具有的不透明度级别。这仅在 和 符号上可用。为此，请将字母“a”添加到功能符号中（即 和）。例如，生成半透明蓝色，就像 .RGBHSLRGBAHSLArgba(0,0,255,0.5)hsla(240, 100%, 50%, 0.5)
下面是使用 RGBA 更改不透明度的示例。
<h3 style="background-color:rgba(0,0,255,1)">No transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.5)">Half transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.1)">Lots of transparancy</h3>
下面是使用 HSLA 更改不透明度的示例。
<h3 style="background-color:hsla(240, 100%, 50%, 1)">No transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.5)">Half transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.1)">Lots of transparancy</h3>
选择颜色 - 简单的方法
通过使用十六进制、RGB 或 HSL 表示法，您可以选择超过 1600 万种不同的颜色。例如，您可以从 一个值开始并递增一个值，一直到 。每个不同的值表示略有不同的颜色。#000000#FFFFFF
但别担心 - 您不需要记住每个十六进制颜色值！HTML 颜色选取器和颜色图表使您可以轻松地为网站选择颜色。
评论