CSS引入方式及link和@import的区别

1. 概述

在项目开发中，我们经常使用css样式使页面丰富多彩，编写过程中，CSS有四种引入方式。

内联样式(行内样式)：直接在 HTML 标签中的 style 属性中添加CSS

<div style="width:200px;height:200px;background:red;"></div>

内联样式只能改变当前标签的样式，如果想要多个<div>拥有相同样式，则需要重复的对多个<div>添加相同的样式，如果要修改一种样式，又要进行批量的去修改style中的代码。

缺点：内联样式引入CSS代码会导致HTML代码变得冗长，页面维护成本过高。

嵌入样式：在HTML头部中的<style>标签下书写CSS代码

<head>
    <style>
      .div-content{
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
 </head>

嵌入样式的CSS只对当前的网页有效。因为CSS代码是在HTML文件中，所以会使得代码比较集中，可以很清晰的查看HTML结构和CSS样式，通常会在模板网页中使用。

缺点：多个页面中需要引入相同的CSS代码时，嵌入样式会导致代码冗余，不利于维护。

链接样式：使用HTML头部的标签引入所需的外部CSS文件。

<head>
    <link ref="stylesheet" type="text/css" href="style.css">
  </head>

链接样式是最推荐引入CSS的方式。使用这种方式，所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性。并且所有的CSS代码只存在于CSS文件中，CSS文件会在第一次加载时引入，以后切换页面时只需加载HTML文件即可。

ref：定义当前文档与目标文档之间的关系

导入样式：使用CSS规则引入外部CSS文件。并且@import必须得在<style></style>中使用。

<style>
   @import url(style.css);
</style>

导入样式类似链接样式

注意：@import url(xxx.css) 有最大次数的限制，经测试：IE6的最大次数是31次，第32个import及以后的都不生效；

加载内容
- link是XHTML标签，除了加载CSS外，还可以加载网站网页图标(网页标签图标)等多种文件
```
<link rel="icon" href="https://file.iviewui.com/file/favicon.ico">
```
- @import属于CSS范畴，只能加载CSS
加载顺序
- link引入CSS时，在页面载入时同时载入 --- 浏览器一边下载HTML网页，一边开始解析；解析过程中，发现link标签，浏览器继续往下解析HTML网页，同时并行下载link标签中的css样式。
- @import需要页面完全载入以后才加载 --- 在网速慢的情况下，会出现一开始没有css样式，闪烁一下出现样式后的页面。
兼容问题
- link是XHTML标签，无兼容问题
- @import是在CSS2.1提出的，低版本的浏览器不支持(IE5以下不兼容)
操作DOM
- link支持使用JavaScript操作DOM动态引入样式表改变样式
- @import不支持，因为@import是css语法故无法动态修改

posted @ 2023-04-17 13:50 ajuan 阅读(163) 评论(0) 编辑收藏举报

刷新页面返回顶部