Web前端入门第 20 问：CSS 入门功法【外部样式表基础语法】
HELLO，这里是大熊学习前端开发的入门笔记。
本系列笔记基于 windows 11 系统。
HTML 页面内容越来越多，势必 CSS 也会跟着膨胀，如果 CSS 还是用内部样式表，那会导致 HTML 页面代码行数将会超长，这时候聪明的人类就会想到把 CSS 抽离出来单独管理，这时候外部样式表就诞生了。
所谓分久必合合久必分，外部样式表就是把 CSS 和 HTML 分离，让 CSS 与 HTML 分别放在不同的文件中，从而让 HTML 结构更简洁，而不至于让代码太过臃肿，达到代码可维护性的目的。
初识 CSS 文件
HTML 的文件扩展名是 .html，那 CSS 的文件扩展名当然是 .css 咯，嘿...一点问题都没有。
外部样式表对应的就是 .css 文件，所以第一步，先新建一个 css 文件，并保存为 example-20.css。
详细步骤：
- 鼠标右键新建一个文本文档。
- 鼠标右键重命名文本文档。
- 改名为
example-20.css，这里可以是其他名字，但需要把文件名记下来，后面会使用到。
如此，我们便已经完成了第一个外部样式表的创建。
创建 HTML 文件
我们继续创建一个 HTML 文件，步骤与上面相似，只是第三步需要重命名文本文档为 example-20.html，文件名也可以自定义任何名称。
如此之后，便有了如下结果：
编写 HTML 代码使用外部样式表
example-20.html 文件中新增以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<link rel="stylesheet" href="./example-20.css">
</head>
<body>
<p class="style1">此处是第一段文字</p>
</body>
</html>
注意 <link rel="stylesheet" href="./example-20.css"> 这一行代码。
-
link为 HTML 标签名，用于链接外部资源到HTML文档。 -
rel="stylesheet"表示link标签用于链接外部的 CSS（层叠样式表）文件。rel还有其他值，比如引用图标<link rel="icon" href="/favicon.ico">。 -
href="./example-20.css"作用便是引入外部样式表example-20.css。 -
文件名前面的
./为相对路径，表示当前目录，也就是example-20.html所在的目录。- 其相对路径还有一种写法
../example/example-20.css，表示example-20.html文件所在的父级目录下的example目录下的example-20.css文件。 - 文件路径也可以是绝对路径，比如
href="E:/wechat/公众号【前端路引】/example-20.css"。
- 其相对路径还有一种写法
外部样式表新增 CSS 代码
外部样式表其内部的语法规则与内部样式表一样，无任何差别。
example-20.css 新增如下代码：
.style1 {
color: red;
font-size: 12px;
}
.style1 {
font-size: 20px;
}
运行 HTML 文件查看效果
- 打开浏览器，将
example-20.html文件拖拽到浏览器中。
- 使用
开发者工具查看渲染结果。
注意样式区域右侧有标明此样式来源于哪个文件哪一行代码，这里的文件信息是有助于我们定位问题的，可以尝试点击文件名看看效果。
总结
- 外部样式表的语法与内部样式表没有区别，唯一不同是外部样式表把以前写在
<style>标签中的内容给提取到一个独立的 css 文件中了。 - 在引入 CSS 文件时，需要注意相对路径与绝对路径。
浙公网安备 33010602011771号