CSS 书写位置

CSS 有三种书写方式:

内嵌样式 (Internal Style)
外链样式 (External Style)
行内样式 (Inline Style)

1. 内嵌样式

语法

在 HTML 文件的 <head> 标签中使用 <style> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>内嵌样式</title>
  <style>
    h1 {
      font-size: medium;
      color: blue;
    }
  </style>
</head>
<body>
  <h1>内嵌样式</h1>
</body>
</html>

优点

样式和 HTML 在同一个文件中,方便管理
适用于单页面应用或简单的网页

缺点

样式和内容混合,不利于分离
大量样式会增加 HTML 文件大小

2. 外链样式

语法

在 HTML 文件的 <head> 标签中使用 <link> 标签引入外部 CSS 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>外链样式</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
  <h1>h1</h1>
  <p>单独放一个css文件</p>
</body>
</html>

/* css/index.css */
h1 {
  color: red;
  font-size: 24px;
}

p {
  color: #333;
}

优点

HTML 和 CSS 完全分离,结构清晰
样式文件可以被多个 HTML 文件共用
便于维护和修改
浏览器可以缓存 CSS 文件,提高加载速度

缺点

需要额外的 HTTP 请求(首次加载)
需要管理多个文件

3. 行内样式

语法

直接在 HTML 标签的 style 属性中书写样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>行内样式</title>
</head>
<body>
  <h1 style="width: auto; font-style: normal">h1</h1>
</body>
</html>

优点

优先级最高,可以覆盖其他样式
适用于动态生成的样式

缺点

样式和内容混合,不利于分离
代码重复,难以维护
不推荐大量使用

三种方式对比

方式	语法	优先级	适用场景
外链样式	`<link href="...">`	中	推荐方式,适合大多数项目
内嵌样式	`<style>...</style>`	低	单页面,样式较少
行内样式	`style="..."`	高	动态样式,临时修改

优先级规则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>样式优先级</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    div {
      color: aqua;
      font-size: medium;
    }
  </style>
</head>
<body>
  <!-- 行内样式优先级最高,显示红色 -->
  <div style="color: rgb(255, 0, 34)">div标签</div>
  <!-- 内嵌样式和外链就近原则,显示 aqua -->
  <div>我是啥颜色</div>
</body>
</html>

优先级: 行内样式 > 内嵌样式 = 外链样式(就近原则)