📌  相关文章
📜  如何在html中更改hr标签的颜色(1)

📅  最后修改于: 2023-12-03 15:38:32.791000             🧑  作者: Mango

如何在HTML中更改hr标签的颜色

HTML 中的水平线（<hr> 标签）是建立网页分割区域的常用元素之一。默认情况下，<hr> 标签的颜色是黑色。如果需要更改其颜色，可以通过 CSS 方式实现。

以下是两种方法：

方法一：使用标签属性

<hr> 标签有一个 color 属性，可以用于设置水平线的颜色。例如：

<hr color="#FF0000">

以上代码会将水平线的颜色设置为红色。

需要注意的是，这种方法只适用于内联样式（inline style）。如果需要在整个网页中统一修改所有水平线的颜色，那么应该使用方法二。

方法二：使用样式表

首先，在 <head> 标签内添加 <style> 标签：

<head>
  <style>
    hr {
      color: #FF0000;
    }
  </style>
</head>

以上代码会将整个网页中的所有水平线的颜色设置为红色。

如果只希望修改某个具体的水平线的颜色，可以为其添加一个类名：

<hr class="my-hr">

然后，在 <style> 标签中为该类名设置颜色：

<head>
  <style>
    .my-hr {
      color: #FF0000;
    }
  </style>
</head>

同样地，以上代码会将带有 my-hr 类名的水平线的颜色设置为红色。

示例代码

以下代码展示了如何使用样式表修改水平线颜色：

<!DOCTYPE html>
<html>
<head>
  <style>
    hr {
      color: #FF0000;
    }
  </style>
</head>
<body>
  <h1>网页标题</h1>
  <hr>
  <p>网页内容</p>
  <hr>
</body>
</html>

以上代码会在 <h1> 和 <p> 之间添加两个红色水平线。

参考资料