引入 CSS 样式表

根据 CSS 样式表的书写位置，样式表可以分为：内部样式表（内嵌式）、行内样式表（内联式）、外部样式表（外链式）。

内部样式表

内部样式表 就是指将 CSS 代码写在 HTML 文档的 head 头部标签中, 并且用 style 标签定义，基本语法如下：

<head>
  <style type="text/css">
    标签名: {
      属性1: 属性值1;
      属性2: 属性值2;
    }
  </style>
</head>

1
2
3
4
5
6
7
8

style 标签通常位于 head 标签中的 title 标签之后，也可以放在 HTML 文档的任意位置（不推荐）。
在 html5 中可以省略 type="text/css"

行内样式表（内联样式）

行内样式 又称为：内联样式、行间样式。是通过标签的 style 属性 来设置元素的样式。其基本语法格式如下：

<标签名 style="属性1 : 属性值1 ; 属性2 : 属性值2;">内容</标签名>

任何 HTML 标签都有可以用来设置行内样式的 style 属性，其书写规范同普通 CSS 样式。
行内样式只对其所在的标签及嵌套在其中的子标签起作用。
通常适用于样式比较少的情况

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>1-内嵌样式表</title>
  </head>
  <body>
    <div style="color: red">行内样式表</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10

外部样式表（外链式）

将所有的样式放到一个或多个以 .css 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中，这些 .css 文件就称为外部样式表 又称 外链式样式表。

基本语法如下：

<head>
  <link href="css文件的路径" type="text/css" rel="stylesheet" />
</head>

1
2
3

link 是自闭合标签
link 标签需要放在 head 头部标签中，并且必须制定 link 标签的三个属性，分别为:
- href 定义所链接外部样式表文件的 url , 可以是相对路径，也可以是绝对路径。
- type 定义所链接文档的类型，在这里需要制定为 text/CSS ，表示链接的外部文件为 CSS 样式表。
- rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 stylesheet ，表示被链接的文档是一个样式表文件。

html 文件内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2-外链样式表</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div>外链样式表</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

css 文件内容：

div {
  color: red;
}

1
2
3

显示结果：

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，推荐	控制整个站点（多）

#CSS

上次更新: 2025/02/26, 08:57:57

← CSS 外观属性 CSS 复合选择器→