html 改变字体颜色

🌙
手机阅读
本文目录结构
axihe

html 改变字体颜色

为 HTML 文字添加颜色非常容易!在这个简短的教程中,我们将介绍如何使用 Hex 颜色代码、HTML 颜色名称、RGB 和 HSL 值改变 HTML 文字颜色。

文字颜色使用 Hex 颜色代码

为 HTML 文本设置颜色最常见的方式是使用十六进制颜色代码(简称 Hex 代码)。只需简单地将一个样式属性添加到您希望设置颜色的文本元素中――下面以一个段落为例――使用您的 Hex 代码作为颜色属性。

<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>

没有 Hex 代码?不用担心,使用我们的使用我们的颜色选择器浏览数以千万的 Hex 颜色代码表示的颜色,还有更多。

文字颜色使用 HTML 颜色名称

另一种为网站文字设置颜色的的方式是使用 HTML 颜色名称。HTML 代码也很相似,只要上一步骤中的 Hex 代码替换为您希望使用的颜色名称(我们以红色为例)。有 140 种已命名的颜色可供选择,我们已制成列表,请查看这里。

<body>
  <p style="color:red;">Red paragraph text</p>
</body>

文字颜色使用 RGB 颜色值

RGB 值的使用现如今十分盛行。它与 Hex 代码或颜色名称的使用同样简单。根据颜色属性在 rgb() 参数内插入 RGB 值。除了 Hex 代码,您也可使用我们的颜色选择器获取 RGB 值。

<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>

使用 RGB 值用于您的网站时,还可以指定不透明度。使用 rgba() 而不是 rgb()――其中 a 代表α,控制不透明度的颜色通道 — 在您的三个色彩值之后加入第四个值表示透明度,范围从 0-1(0 表示完全透明,1 表示完全不透明)。

<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>

文字颜色使用 HSL 颜色值

添加颜色的第四种方法是使用 HSL 值。与上面描述的 RGB 语法类似,HSL 使用 hsl() 前缀,三个值表示色相、饱和度和亮度。色相值范围在 0-360,饱和度和亮度均为百分比,从 0% 到 100%。

<body>
  <p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>

与 RGB 一样,使用 HSL 时可以在颜色属性中修改不透明度。使用 hsla() 前缀,加入第四个值,范围在 0 和 1 之间,代表所需的不透明度。

<body>
  <p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>

更多 HTML 搜索

通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang