网页中 link 和@import介绍
网页中，link和@import都是用来引入外部样式表——CSS（层叠样式表）文件的方法，它们可以让我们将样式表分离出来，提高代码的可维护性和复用性。
在HTML中，用于引入外部样式表的主要指令是<link>元素。<link>元素通常放在HTML文档的<head>部分，用于链接到外部的CSS文件。
在CSS中，我们可以使用@import规则来在一个CSS文件中导入另一个CSS文件，但这并不是HTML的指令，而是CSS的一部分。
link
link是HTML中的一个标签，用于在HTML文档中引用外部的样式表文件。通过link标签，我们可以链接CSS文件，从而将其中定义的样式应用到HTML文档中的元素上。
link的基本语法如下：
Copy<link rel="stylesheet" type="text/css" href="style.css">
说明：
rel="stylesheet"：指定关联的文档是一个样式表文件；
type="text/css"：指定关联的文档类型为CSS；
href：指定要引入的CSS文件的链接地址。
一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 页面内容部分 -->
</body>
</html>
说明：1）styles.css文件，确保它包含有效的CSS样式规则。styles.css文件是否确实存在于您的HTML文件所在的目录中。如果不在同一目录，您需要确保href属性中的路径【注】指向正确的位置。2）需要您已经用实际的HTML元素替换了这个注释<!-- 页面内容部分 -->，并且这些元素能够应用CSS样式。
【注:
1.绝对路径：完整路径
2.相对路径：相对位置关系
./ 表示当前目录,可忽略不写
../表示上一级目录
可参见 https://blog.csdn.net/cnds123/article/details/105169800】
@import
@import是CSS中的一种规则（at-rule），用于在一个CSS文件中引入另一个CSS文件。通过@import规则，我们可以将多个样式表文件组织在一起，从而实现更好的模块化和管理。
@import的基本语法如下：
Copy@import url('style.css');
说明：
url('style.css')：指定要引入的CSS文件的路径。
一个简单的示例：
/* main.css */
@import url('other.css');
body {
font-family: Arial, sans-serif;
}
/* other.css */
h1 {
color: blue;
}
说明：确保main.css和other.css文件都位于正确的位置，以便它们能够被正确地引用。如果它们位于不同的目录中，你需要使用正确的相对路径或绝对路径来引用other.css。
link 和@import的区别
· link是一个HTML元素，而@import是一个CSS指令。
· link通常用于在HTML文档中链接到外部样式表，而@import用于在一个CSS文件中导入另一个CSS文件。
· 使用link可以并行下载，而@import会等到页面全部被下载完再下载，因此link比@import更优。
· @import是CSS2.1提出的，只可以在<style>标签中使用，或者用在CSS文件中；而link是XHTML标签，不仅可以链接CSS，还可以定义RSS等其他事务。
· 当使用JavaScript控制DOM去改变样式的时候，只能使用link，因为@import不是DOM可以控制的。
通常情况下，我们更倾向于使用link来引入外部样式表，因为它更灵活、更通用，同时也能提高页面加载的效率和并行请求的速度。而@import则更适用于特定情况下，比如对于一些模块化和分割较为复杂的CSS文件。
4441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
