📌  相关文章
📜  如何在 html 中使用 * - CSS (1)

📅  最后修改于: 2023-12-03 14:52:18.737000             🧑  作者: Mango

如何在 HTML 中使用 CSS

在 HTML 中使用 CSS 可以让网页更加美观和易于阅读。本文将介绍如何在 HTML 中使用 CSS。

1. 外部 CSS

可以创建一个独立的 CSS 文件，然后将其与 HTML 文件链接。这样，可以在多个 HTML 文件中共享同一样式。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

/* styles.css */
h1 {
  color: red;
  font-size: 36px;
}

p {
  color: blue;
  font-size: 18px;
}
2. 内部 CSS

也可以在 HTML 文件中使用内部 CSS。这样，可以在单个 HTML 文件中定义样式。

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
        font-size: 36px;
      }

      p {
        color: blue;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
3. 行内 CSS

还可以在 HTML 元素中直接使用行内 CSS。这种方式比较方便，但不推荐。因为这样，可能需要在多个元素中重复定义样式。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 style="color: red; font-size: 36px;">Hello, world!</h1>
    <p style="color: blue; font-size: 18px;">This is a paragraph.</p>
  </body>
</html>

以上是在 HTML 中使用 CSS 的三种方法。根据实际需求选择合适的方式即可。