当前位置:   article > 正文

link和@import:

link和@import

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兼容性好。

上面讲到CSS的引入方式,CSS共有4中引入方式:

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

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

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

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

  1. <head>
  2. <style>
  3. div {
  4. height: 100px;
  5. height: 100px;
  6. background-color: pink;
  7. }
  8. </style>
  9. </head>

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

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

  1. <style>
  2. @import url("css文件");
  3. </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
推荐阅读
相关标签
  

闽ICP备14008679号