css link import

  

link和@import的区别

页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

  区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

补充:@import最优写法
@import的写法一般有下列几种:

@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)最值得推荐。

时间: 2024-08-28 01:27:47

css link import的相关文章

css link和@import的区别

页面中使用CSS的方式主要有三种:1.行内添加定义style属性值.2.页面头部内嵌调用.3.外面链接调用. 其中外面引用有以下两种:link和@import. XML/HTML代码 <link href="stylesheet" href="CSS文件" type="text/css"/> XML/HTML代码 <style type="text/css"> @import url("CSS

css学习之LInk &amp; import

一.用link加载外部样式表 1.放置位置:放在head元素中 2.样式表中只能包含样式规则,不能包含其他标记语言.如出现了标记,会导致其中一部分或全部被忽略. 3.type = 'text/css'可以指定文件是以.css后缀名传递的,并以样式表的规则处理导入数据,较老的浏览器不可以必须要以.css后缀命名文件. 4.media 属性,all,aural,braille,embossed,handheld,print,projection,screen,tty,tv,其中得到广泛支持的是all

CSS的@import的用法

CSS的@import的用法: @import在很多页面都有应用,不过使用的频率还是比link标签要少的多,所以可能还有很多布局者对此不是太熟悉,下面就简单介绍一下它的用法.它是用来引入外部样式表的一种方式,格式有以下两种: @import "style.css"; @import url("style.css"); @import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表,代码实例如下: 实例一: <!DOCTYPE html> 

link @import区别 src href的区别

先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种方式 link除了加载css还能做其他的事情,比如定义RSS 而@import只能加载css link在页面加载的时候会被同时加载 比较快 @import会在页面全部加载完后再加载 比较慢 有兼容问题 link兼容性好 @import在IE5以上才支持 =======================

CSS中@import与link的具体区别

我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因

css link和@import区别

1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" /> 实际应用截图: 使用link标签截图 Html link标签说明 此标签是引入CSS文件link标签,只要设置好路径即可. 扩展阅读:html link 2.@import语法结构 @import + 空格+ url(CSS文件路径地址); 1).在html中 <style type=&quo

css link和@import区别用法

这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" type="text/css" href="CSSurl路径"  /> 实际应用截图: 2.@import语法结构 @import + 空格+ url(CSS文件路径地址); 1).在html中<style type="text/css"&g

引入css文件时,css link和@import区别

这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" /> 实际应用截图: 使用link标签截图 Html link标签说明 此标签是引入CSS文件link标签,只要设置好路径即可. 2.@import语法结构 @import + 空格+ u

CSS:&lt;link&gt;标签rel和media的解释

代码: media = "screen" rel = "stylesheet" rel:relations的缩写,是指的关联到的文件是什么.此处是指关联到一个stylesheet rel = "shortcut icon"和"icon"的区别: shortcut icon特指浏览器地址栏左侧显示的图标,一般大小为16 x 16, 后缀名为.icon icon指的是图标,格式可为png,gif,jpeg,尺寸一般为16x16,