CodeBetter
工程化
性能优化
云服务器
项目笔记
三方库
其它
工程化
性能优化
云服务器
项目笔记
三方库
其它

CSS引入方式

内部样式

将CSS代码放置于HTML文档的<style>标签中。

内部样式有助于保持HTML文档的结构清晰,但仅限于当前页面使用。

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <title>内部样式示例</title>
6  <style>
7    h1 {
8      color: blue;
9    }
10  </style>
11</head>
12<body>
13  <h1>Hello CSS</h1>
14</body>
15</html>

外部样式

将CSS代码保存在独立的.css文件中,并通过<link>标签引入HTML文档。

外部样式是最推荐的方式,它支持样式的多页面复用,并且有助于结构与样式的彻底分离。

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <title>外部样式示例</title>
6  <link rel="stylesheet" href="styles.css" />
7</head>
8<body>
9  <h1>Hello CSS</h1>
10</body>
11</html>
1h1 {
2  color: blue;
3}

:::

内联样式

写在标签的 style 属性中。

  • style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的形式。
  • 内联样式只能控制当前标签的样式,对其他标签无效。
  • 内联样式具有最高的优先级,但不利于样式复用和维护。
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>CSS_行内样式</title>
6  </head>
7  <body>
8    <h1 style="color: blue;">Hello CSS</h1>
9  </body>
10</html>

样式表的优先级

  • 优先级规则：行内样式 > 内部样式 = 外部样式

  • 同名属性时,行内样式优先,内部和外部样式按书写顺序决定,后出现的覆盖先出现的。

分类 优点 缺点 适用场景
行内样式 最高优先级,即时生效 结构与样式未分离,不利于维护 特定元素快速样式
内部样式 样式可复用,代码结构清晰 样式局限于当前页面,不利于多页面复用 单页面项目
外部样式 样式多页面复用,代码结构清晰,可触发浏览器缓存,结构与样式彻底分离 需要额外的文件引入 多页面项目

  • 最佳实践：推荐使用外部样式,以实现结构与样式的最佳分离。