link与@import区别

最新推荐文章于 2023-07-04 08:25:09 发布

小白菜生长记

最新推荐文章于 2023-07-04 08:25:09 发布

阅读量165

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_46775833/article/details/113434959

版权

应用场景：

<head>
    <!-- link是标签，引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
    <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>

区别：
1.link属于html标签。@import在css中使用表示导入外部样式表；
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4.link方式的样式的权重高于@import的权重；
5.link 支持使用javascript改变样式（document.styleSheets），后者不可

1.link写法外部链接样式表（外链式）

<head>
  <link href="CSS文件的路径"  rel="stylesheet" type="text/css"/>
</head>

该语法中，link标签需要放在head头部标签中，link标签的属性具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

@import 导入式样式表（导入式）
导入式是将所有的样式放在以.CSS为扩展名的外部样式表文件中，通过style标签将外部样式表文件，使用@import url()链接到HTML文档中，其基本语法格式如下：

<head>
			<style type="text/css">
				@import url(css文件地址);
			</style>
</head>

导入式加载速度慢，不建议使用

url 统一资源定位符

理论上:行 > 内 > 外链 >导入

实际上:行内式 > 内| 外链 |导入(就近原则)

小白菜生长记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫