1. 引言
在HTML开发中，CSS样式是不可或缺的一部分。为了有效地管理和维护CSS代码，我们通常会将CSS代码单独存放在一个外部CSS文件中，并通过在HTML文件中引入该外部CSS文件来使用样式。而正确的CSS文件引入路径是保证CSS样式在HTML中正常生效的关键之一。本文将深入探讨HTML文件引入外部CSS文件时路径的写法总结。
2. 相对路径
2.1 相对当前HTML文件路径
相对路径是相对于当前HTML文件所在位置的路径。当HTML文件与CSS文件位于同一目录下时，可以直接使用文件名进行引用。
<link rel="stylesheet" type="text/css" href="style.css"> 在这种情况下，HTML文件和CSS文件的相对路径是保持一致的，因此可以直接写CSS文件的文件名。
2.2 相对当前HTML文件父级目录路径
如果HTML文件和CSS文件位于不同目录下，但CSS文件在HTML文件的父级目录中，可以使用"../"表示返回上一级目录。
<link rel="stylesheet" type="text/css" href="../style.css"> 在这个例子中，HTML文件位于子文件夹"html"下，而CSS文件位于父级目录"css"中，因此需要使用"../"表示返回上一级目录，然后再指定CSS文件的相对路径。
2.3 相对当前HTML文件子级目录路径
如果CSS文件位于HTML文件的子文件夹中，可以使用"./"表示当前目录。
<link rel="stylesheet" type="text/css" href="./css/style.css"> 在这个例子中，HTML文件位于根目录下，而CSS文件位于子文件夹"css"中，因此需要使用"./"表示当前目录，然后再指定CSS文件的相对路径。
3. 绝对路径
3.1 基于根目录的绝对路径
基于根目录的绝对路径是相对于网站根目录的路径。可以使用斜杠"/"表示网站根目录。
<link rel="stylesheet" type="text/css" href="/css/style.css"> 在这个例子中，CSS文件位于根目录下的"css"文件夹中，因此可以使用斜杠"/"指定CSS文件的绝对路径。
3.2 完整URL路径
如果CSS文件位于其他服务器上或者其他网站上，可以直接使用完整的URL路径进行引用。
<link rel="stylesheet" type="text/css" href="http://example.com/css/style.css"> 在这个例子中，CSS文件位于"example.com"这个网站上，因此可以直接使用URL路径进行引用。
4. 总结
本文总结了HTML文件引入外部CSS文件时路径的写法。通过正确的路径写法，可以确保CSS样式在HTML中正常生效。在选择路径写法时，需要根据实际情况选择合适的相对路径或绝对路径。同时，路径的写法也需要与文件的实际存放位置相对应。