0
点赞
收藏
分享

微信扫一扫

CSS--link与@import的区别

小铺有酒一两不够 2022-02-15 阅读 101


简介

        link标签和@import都是引入CSS的方法,本文介绍两种方式的区别。

link与@import的区别

结论:推荐使用link引入CSS。

link

@import

从属关系

link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

@import是 CSS 提供的语法规则,只有导入CSS的作用。

加载顺序

加载页面时,link标签引入的 CSS 被同时加载。

@import引入的 CSS 将在页面加载完毕后被加载。

兼容性

是HTML很早就有的标签,所有浏览器都支持。

@import是 CSS2.1 才有的语法,只可在 IE5+才能识别。

DOM可控性

可以在 JS 代码中插入link标签来改变样式;

DOM 方法是基于文档的,无法使用@import的方式插入样式。

选择器优先级

link引入的样式权重大于@import引入的样式。

link引入的样式权重大于@import引入的样式。

引入CSS的四种方式

方式1:内联样式

        内联样式,也叫行内样式,指的是直接在 HTML 标签中的 style 属性中添加 CSS。

        它只能改变当前标签的样式。若想要多个 <div> 拥有相同的样式,就要为每个 <div> 添加相同的样式,很麻烦。

<div style="background: red"> </div>

方式2:嵌入样式

        嵌入方式指的是在 HTML <head>中的 <style> 标签里书写 CSS 代码。 

        嵌入方式的 CSS 只对当前的网页有效。当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

        因为 CSS 代码是在 HTML 文件中,所以代码比较集中,当我们写模板网页时比较有利,因为可以一目了然地查看 HTML 结构和 CSS 样式。

<head>
<style>
.content {
background: red;
}
</style>
</head>

方式3:链接样式

        链接方式指的是使用 HTML 的 head 标签引入外部的 CSS 文件。 

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

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

方式4:导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

写法1:写在HTML里

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

实际有如下写法:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别

@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。

写法2:写在CSS文件

@charset "utf-8";
@import url(style.css);

* {
margin: 0;
padding: 0;
}

.notice-link a {
color: #999;
}


举报

相关推荐

0 条评论