CSS的导入方式:link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点:
1.兼容性不一样
link是一个HTML标签,所以它不存在兼容性问题,而import方式则具有兼容性问题,因为它是CSS2.1提出的,所以稍老一点的浏览器不支持,只在IE5以上才能识别,不过现在估计也没有再使用IE5版本以下的浏览器了,所以基本来讲都不具有兼容性问题。
2.权重不一样
link方式引入的样式的权重要高于import的样式的权重,这点要注意。
3.所属性质不一样
link属于XHTML标签,而import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,而import就只能加载CSS。
4.加载顺序不一样
link引用的CSS会在页面被加载的时候就加载,而import引用的CSS则会等到页面全部被加载完毕以后再进行加载。所以有时候浏览使用import加载CSS的页面时开始会出现没有样式的情形,尤其是在网速慢的时候。
5.使用DOM方法控制样式不一样
因为DOM方法是基于文档的,所以它可以操作link标签来控制样式,而控制不了import方式插入的样式。
CSS的导入方式:link与import方式的区别的更多相关文章
- CSS 的导入方式 (link or import ?)
前言 最常看见的CSS的使用方式有三种 1. 在span, div 等标签上直接使用 style 属性定义CSS <span style="color:blue">Th ...
- 引用外部CSS的link和import方式的分析与比较
很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url( ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- Web--CSS控制页面(link与import方式区别)
先了解: [1] “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 W3C,是World Wide ...
- Web--CSS控制页面(link与import方式差别)
先了解: [1] "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是 ...
- 页面导入样式时,使用link和@import有什么区别
link和@import两种导入样式表的方法比较 link属于HTML标签,而@import是CSS提供的 页面被加载的时候,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 ...
- CSS中link和@import的使用区别
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...
- 调用css时,用link 和 @import url 有什么区别
加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...
- css加载方式link和@import的区别!
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...
随机推荐
- 浅谈微信smali注入
作者:郭少雷 搞android搞了几年也没搞出个啥牛逼app出来,眼看时下最火的app微信如此火热,实在想搞搞它,索性就想着给它加点东西进去. 以下内容纯属本人个人爱好,仅限个人学习android用途 ...
- mac终端(terminal)里的快捷键
Command + K 清屏 Command + T 新建标签 Command +W 关闭当前标签页 Command + S 保存终端输出 Command + D 垂直分隔当前标签页 Command ...
- 深入理解 sudo 与 su 之间的区别
深入理解 sudo 与 su 之间的区别 作者: Himanshu Arora 译者: LCTT zhb127 在早前的一篇文章中,我们深入讨论了 sudo 命令的相关内容.同时,在该文章的末尾有提到 ...
- 洛谷P2839 [国家集训队]middle 主席树_二分
Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...
- appium 模拟实现物理按键点击
appium自动化测试中,当确认,搜索,返回等按键通过定位点击不好实现的时候,可以借助物理按键来实现.appium支持以下物理按键模拟: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ ...
- 洛谷1019 单词接龙 字符串dfs
问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- 入门python:《Python编程从入门到实践》中文PDF+英文PDF+代码学习
入门python推荐学习久负盛名的python入门书籍<Python编程从入门到实践>. 书中涵盖的内容是比较精简的,没有艰深晦涩的概念,最重要的是每个小结都附带有"动手试一试& ...
- 【Codeforces Round #462 (Div. 1) A】 A Twisty Movement
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] ans初值值为a[1..n]中1的个数. 接下来考虑以2为结尾的最长上升子序列的个数. 枚举中间点i. 计算1..i-1中1的个数c ...
- 【Round #36 (Div. 2 only) C】Socks Pairs
[题目链接]:https://csacademy.com/contest/round-36/task/socks-pairs/ [题意] 给你n种颜色的袜子,每种颜色颜色的袜子有ai只; 假设你在取袜 ...
- 金融项目java开发_BigDecimal(解决计算精度问题)
当使用double进行商业运算时,double计算会丢失精度.可以使用BigDecimal进行计算. import java.math.BigDecimal; import org.junit.Tes ...