使用 CSS 样式：为 HTML 元素添加样式效果

CSS（层叠样式表）是一种用于描述和控制网页样式的标准语言。通过使用 CSS，我们可以为 HTML 元素添加各种样式效果，如颜色、字体、布局、边框和动画等。本文将介绍如何使用 CSS 样式为 HTML 元素添加样式效果。

内部样式表：在 HTML 文件的 <head> 标签中，可以通过 <style> 标签来定义内部样式表。在样式表中，我们可以使用选择器和属性来指定要应用样式的 HTML 元素以及其样式属性和值。以下是一个简单的示例：
```
<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
```
在上述代码中，我们为 <h1> 和 <p> 元素定义了不同的颜色和字体大小。这些样式会应用于对应的元素。
外部样式表：另一种常见的方式是使用外部样式表文件。外部样式表文件是一个单独的 CSS 文件，可以通过 <link> 标签链接到 HTML 文件中。这种方法的好处是可以在多个 HTML 文件中共享相同的样式定义，提高了样式的重用性和维护性。以下是一个示例：
```

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
```
```
/* styles.css */
h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: green;
  font-size: 16px;
}
```
在上述示例中，我们将样式定义放置在名为 styles.css 的外部样式表文件中，并通过 <link> 标签将其链接到 index.html 文件中。
内联样式：还有一种方式是使用内联样式，直接在 HTML 元素的 style 属性中定义样式。这种方法的优点是可以针对特定元素提供个性化的样式，但不太适合大规模应用样式。以下是一个示例：
```
<h1 style="color: blue; font-size: 24px;">这是一个标题</h1>
<p style="color: green; font-size: 16px;">这是一个段落</p>
```
在上述示例中，我们使用 style 属性直接在元素标签中定义样式。

通过使用 CSS 样式，我们可以轻松为 HTML 元素添加各种样式效果。无论是通过内部样式表、外部样式表还是内联样式，都可以根据需要选择合适的方式来应用样式。这样，我们可以为网页创建出精美、吸引人的外观，提供更好的用户体验。