HTML 如何使用 CSS 样式 - 详解及示例 - 常规

HTML 和 CSS 是两种不同的语言，HTML 用于定义网页的结构和内容，而 CSS 用于控制网页的样式和布局。为了将 CSS 应用于 HTML，需要在 HTML 文档中使用 CSS 代码。以下是 CSS 在 HTML 中的应用方法：

在 HTML 文档中使用内部样式表

在 HTML 文档头部的 <head> 标签中添加 <style> 标签，然后在 <style> 标签中编写 CSS 代码。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    body {
      background-color: #f1f1f1;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph.</p>
</body>
</html>

在 HTML 文档中使用外部样式表

可以将 CSS 代码写入一个独立的 .css 文件中，然后在 HTML 文档中使用 <link> 标签将其引入。例如：

在 .css 文件中编写 CSS 代码：

body {
  background-color: #f1f1f1;
}
h1 {
  color: red;
}

在 HTML 文档头部的 <head> 标签中添加 <link> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph.</p>
</body>
</html>

在 HTML 标签中使用内联样式

可以在 HTML 标签中使用 style 属性来定义内联样式。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1 style='color: red;'>Welcome to My Website</h1>
  <p style='background-color: #f1f1f1;'>This is a paragraph.</p>
</body>
</html>

以上是 CSS 在 HTML 中的三种应用方法。可以根据需要选择最合适的方法。