引入 CSS

在 HTML 中，CSS（层叠样式表） 用于控制网页的外观与布局。我们可以通过多种方式将 CSS 应用于 HTML 页面，实现更丰富的样式效果。

三种引入方式

1. 内联样式（Inline CSS）

将样式直接写在标签内的 style 属性中。适合局部简单样式。

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

2. 内部样式表（Internal CSS）

将 CSS 写在 HTML 文件 <head> 区域的 <style> 标签内，适用于单页面项目。

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

3. 外部样式表（External CSS）

将 CSS 单独写在 .css 文件中，并通过 <link> 标签引入。推荐使用此方式，便于样式复用与维护。

<head>
  <link rel="stylesheet" href="style.css" />
</head>

style.css 示例：

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

使用建议

• 推荐使用 外部样式表 管理项目样式。
• 避免频繁使用 内联样式，不利于维护。
• 内部样式 可用于单页演示或测试阶段。

通过引入 CSS，网页不仅结构清晰，还能拥有良好的视觉体验，是前端开发的重要组成部分。