link和@import：

作者：IT小白 | 2024-04-23 10:07:00

踩

link和@import

link和@import是外部引入CSS样式的两种方式。他们两个的区别在于：

1.引入方式不同：@import是CSS的语法规则，只能用来导入样式表。而link是HTML的一个标签，可以引入CSS样式，还可以通过rel规定样式表的属性（rel="stylesheet"，rel属性表示的是当前文档与被引入文档之间的关系，stylesheet意思样式表）。

2.加载顺序不同：他们两个是先加载link后加载@import。是因为浏览器在解析HTML文档时，link标签引入的CSS文件会被同时进行加载，而@import引入的CSS文件在页面加载完之后才会被加载。

3.兼容性不同：link作为HTML的标签，不存在兼容性的问题。而@import这个CSS语法是在CSS2.1才有的，所以@import没有link兼容性好。

1.内联样式：也叫行内样式。直接写在标签里的一种方式，给标签的style属性添加CSS。

 <div style="background-color: red;display: none;"></div>

这种方式存在一个弊端，只能改变当前标签的样式。就是假如说有多个<div>拥有相同的样式，就要给这几个div分别去添加，但当你想修改这个样式的时候，就又得修改所有的style中的代码。所以这种方式书写的样式，代码繁琐，后期不好维护。但这种形式只适合书写一两个样式会简便。

2.嵌入样式：以标签<style></style>形式写在HTML文档的<head></head>标签里面，而书写样式的代码就可以写在<style></style>标签里面。


<head>
  <style>
    div {
      height: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

这种方式书写只会对当前页面的样式有效。当我有多个页面，这几个页面的头部和底部的样式都相同时，那么我就要给这几个页面都写上这相同的样式。当想统一修改其中的某一个样式时，就得每个页面的style样式都去修改，这样会造成代码冗余，不利于维护。

3.导入样式：CSS语法规则@import引入外部样式表。


 <style>
    @import url("css文件");
 </style>

@import是CSS的语法，所以得写在CSS的<style></style>标签中，并且得写在样式表的开头，要不然就没有办法引入CSS样式。

4.链接样式：在HTML头部的<head></head>中，用link引入外部CSS文件。

<link rel="stylesheet" href="css文件">

这种方式，CSS代码可以单独写在一个CSS文件中，多页面有这种相同样式时，直接引入就可以，也利于维护。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/473313