Hey小伙伴们，今天来聊聊如何让你的HTML页面穿上漂亮的“衣服”——也就是如何引入本地CSS文件，是不是觉得自己的网页看起来有点单调呢？别急，我来教你怎么让它变得美美哒！
你得有一套CSS样式文件，这个文件就像是网页的化妆师，能让网页看起来更精致，我们会把这个文件命名为style.css，但你也可以根据自己的喜好来命名。
就是如何在HTML中引入这个CSS文件了，这里有两种方法，一种是内联样式，另一种是链接样式，但今天我们要讲的是链接样式，因为它能让你的HTML文件和CSS文件分开，这样管理起来更清晰，也更容易维护。
1、直接在HTML文件中引入CSS文件：
你可以在HTML文件的<head>部分添加一个<link>标签来引入CSS文件，这个标签的href属性就是你的CSS文件的路径，比如你的CSS文件和HTML文件在同一个文件夹里，代码看起来就是这样的：
<!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="style.css">
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<!-- 其他内容 -->
</body>
</html> 注意，href="style.css"表示CSS文件和HTML文件在同一目录下，如果CSS文件在不同的目录，你需要指定完整的路径，比如href="css/style.css"。
2、使用相对路径：
如果你的CSS文件放在了不同的文件夹下，比如一个叫做css的文件夹里，那么你就需要使用相对路径来指定CSS文件的位置，就像这样：
<link rel="stylesheet" href="css/style.css">
这里的css/就是相对路径，表示CSS文件位于HTML文件所在目录下的css文件夹中。
3、确保CSS文件的路径正确：
你可能会碰到CSS文件没有正确加载的问题，这时候，你需要检查一下CSS文件的路径是否正确，确保文件名和路径都没错，有时候一个小小的拼写错误就会导致样式无法加载。
4、使用CSS预处理器：
如果你对CSS比较熟悉，可能会使用Sass、Less这样的CSS预处理器来编写更复杂的样式，这些预处理器可以帮你更好地组织和管理CSS代码，但你需要通过编译器将它们转换成浏览器可以理解的CSS代码。
好了，以上就是如何在HTML中引入本地CSS文件的小技巧，通过这些步骤，你的网页就可以穿上漂亮的“衣服”了，记得，一个好的网页不仅要内容吸引人，外观也同样重要哦！快去试试吧，让你的网页变得更加吸引人！
还没有评论，来说两句吧...