引入CSS的方式有哪些?link和@import的有何区别应如何选择【转载】
看到淘宝网页中大部分是这样写的:
代码如下:
@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</style>
而很多网站使用的都是link:
代码如下:
而像google、百度、163等网站他们都是直接写在网页中,当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误。
他俩的作用相同
唯一的不同是服务对象不一样
@import 为CSS服务
link是为当前的页服务
蓝色经典有网友说 @import会优先执行。
+++++++++++++++++++++++++++++++++++++++++++++++++
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:老祖宗的差别
link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
差别3:兼容性的差别
由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的。
差别5:@import可以在CSS中再次引入其他样式表
比如可以创建一个主样式表,在主样式表中再引入其他的样式表,
大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。
引入CSS的方式有哪些?link和@import的有何区别应如何选择【转载】的更多相关文章
- CSS引入的方式有哪些? link和@import的区别是?转载
CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...
- 引入CSS文件的方式,以及link与@import的区别
一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...
- 引入CSS的方式、link和@import的区别
引入CSS的方式有四种:内联方式.嵌入方式.链接方式.导入方式. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="back ...
- CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入 link和@import的区别是 : ①link属于XHTML标签,除了加载CSS外,还能 用于定义RSS, 定义rel连接属性等作用:而@import是C ...
- 在HTML中引入CSS的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件. ㈠内联方式 内联方式指的是直接在 HTML 标 ...
- 引入css的方式
---恢复内容开始--- 引入css的样式及link和@import的区别 有3种引入方式 1.内部样式(写在标签内) 2.内联样式 3.外部样式(link @import) 区别: 1.本质区别:l ...
- 引入CSS
前面的话 Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制.随着Mosaic网页浏览器的出现,网站开始到处涌现.对于页面改变外观的需求增加,于是增加了类似< ...
- css学习-css引入&css选择
一.引入css的方式,一共有4种,我们只需要掌握三种就可以了,@import的方法我们不做掌握 1.第一种引入的方法 <!--1.第一种引入css的方法--> <h1 style=& ...
- 前端学习笔记——引入css文件、样式优先级
CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的 ...
随机推荐
- Linux - 设置/取消代理
export http_proxy=118.210.42.251:44367 或: export https_proxy=118.210.42.251:44367 要取消该设置: unset ht ...
- 变量的声明和定义以及extern的用法
变量的声明和定义以及extern的用法 变量的声明不同于变量的定义,这一点往往容易让人混淆. l 变量 ...
- (转)simhash算法原理及实现
simhash是google用来处理海量文本去重的算法. google出品,你懂的. simhash最牛逼的一点就是将一个文档,最后转换成一个64位的字节,暂且称之为特征字,然后判断重复只需要判断他们 ...
- 如何用Django从零开始搭建一个网站(0)
python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:‘django-admin startproject myPit ...
- 实现mysql在windows server 2008下自动备份
环境:MySQL 安装位置:D:\MySQL论坛数据库名称为:Db_Test数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ********************** ...
- ubuntu环境下lnmp环境搭建(1)之Mysql
1. vm下安装Ubuntu 1)下载镜像ubuntu-15.04-desktop-amd64.iso http://yunpan.cn/cF5dwV6zw33ef 访问密码 ecba(个人分享在36 ...
- iOS 11 & iPhone X 适配资料集
本文主要简单谈谈并收集一些关于 iOS 11 & iPhone X 的适配及设计指南. iPhone X 众所周知,iPhone X 屏幕与其他的 iPhone 设备均不同,苹果称 iPhon ...
- python安装(python2.7)
1.下载python 进入官网下载安装 点击打开链接(官网地址:https://www.python.org/downloads/),进入官网后根据自己需求选择python2 或者 python3 2 ...
- 【转】浅谈UML的概念和模型之UML九种图
原文地址:浅谈UML的概念和模型之UML九种图 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图,在每一种视图中都包含一个或多种图.本文我们重点讲解UML每种图的 ...
- setjmp和longjmp用法
本文转自:http://blog.csdn.net/wuhong40/article/details/6155838,感谢原文作者. 前不久在阅读Quake3源代码的时候,看到一个陌生的函数:setj ...