阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      html 改变字体颜色

      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 知识

      目录
      目录