HTML颜色:如何向网页添加颜色

你的网络首码项目网 网站建设评论52字数 2608阅读模式

使用 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

<p style="color:orange;border-width:10px;border-style:solid;border-color:olivedrab;">
Remove the border color then refresh this example.
</p>

背景颜色

背景颜色指定如下: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
十进制代码
0000000,0,0
断续器192,192,192
灰色808080128,128,128
断续器255,255,255
栗色800000128,0,0
FF0000255,0,0
颜色名称十六进制代码
RGB
十进制代码
紫色800080128,0,128
紫红色断续器00FF255,0,255
绿0080000,128,0
石灰00FF000,255,0
橄榄808000128,128,0
黄色断续器00255,255,0
颜色名称十六进制代码
RGB
十进制代码
海军0000800,0,128
0000FF0,0,255
水鸭0080800,128,128
00FFFF0,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 颜色选取器和颜色图表使您可以轻松地为网站选择颜色。

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论