CSS中link和@import的区别

你对CSS中link和@import的区别是否熟悉,这里和大家分享一下,@import  属性用来指定导入的外部样式表及目标设备类型, link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用CSS。

CSS中link和@import有什么区别?

定义 

◆link元素

HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息(CSS)、导航助手、属于另 外形式的信息(RSS)、联系信息等等。

@import

指定导入的外部样式表及目标设备类型。
 
其实link和@import的最根本区别就是,link是一个html的一个标签,而@import是CSS的一个标签,  link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用CSS。如果单独从外部引用CSS来说,他们的作用是基本一样,只不过上面的老大不一样而已。

link和@import孰好孰坏?

上面说了因为上面的老大不一样,所以在使用上就会有一些细节的区别,不能说总体谁好谁坏, 只能说具体情况具体分析。

1)我要用javascript进行样式选择;
 
这个时候就要用link,因为link是html元素,可用javascript去控制dom元素最后达到改变样式的效果。 
看下列代码

  1. <link rel="stylesheet" href="/CSS/styles.CSS"
  2. type="text/CSS" media="screen" />
  3. <link rel="stylesheet" href="/CSS/orange.CSS"
  4. type="text/CSS" media="screen" title="orange" />
  5. <link rel="alternate stylesheet" href="/CSS/blue.CSS"
  6. type="text/CSS" media="screen" title="blue" />
  7. <link rel="alternate stylesheet" href="/CSS/pink.CSS"
  8. type="text/CSS" media="screen" title="pink" />
  9. <link rel="alternate stylesheet" href="/CSS/slate.CSS"
  10. type="text/CSS" media="screen" title="slate" />

这是一段很经典的改变页面风格的代码,因为我们今天主要讲的是link和import,所以我这里只列出了引用CSS部分。

我们先来看看link里面个个属性都是表达了什么意思: 
 
 [1]rel:用来声明链接对象的作用或者类型。

譬如上面的的代码:"stylesheet"表示链接一个默认的CSS,而"alternate stylesheet"折表示备选的CSS

[2]href:这个就不用我说了吧,引用CSS的文件路径。

[3]tyle:文件类型

[4]media:应用的设备,"screen"是说明应用在屏幕上。

[5]title:是CSS的名称。

这段代码中一共有5个CSS,第一个是基本样式,而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。

2)我要在应用打印样式; 

打印样式顾名思义就是打印页面时候的样式。

这个样式在普通浏览下是没有效果的,只有在打印的时候生效。如果要为页面单独引用打印样式的话,link和@import都可以的。

时间: 2024-08-07 08:22:25

CSS中link和@import的区别的相关文章

外部引用CSS中 link与@import的区别

差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载. 差别3:兼容性的差别.由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才

CSS的link和@import的区别

CSS的link和@import的区别: 标签和@import都可以引入外部样式表,功能看起来类似,但是它们之间还是有不少区别的,由于标签使用比较频繁,这里就不多介绍了,点击CSS的@import的用法可以了解@import的用法.下面就简单介绍一下它们两者的区别. 一[email protected]可以在一个样式表中引入其他样式表,在同一目录下有三个样式表分别是:main.css.one.css和two.css,在main样式表中可以引入one.css和two.css.方法如下: @char

页面引入css用link和import的区别

假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel="stylesheet" type="text/css" href="a.css"> 2.使用import <style type="text/css"> @import url(a.css); </style&

CSS中link和@import的区别是:

Link属于html标签,而@import是CSS中提供的 在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS @import只有在ie5以上才可以被识别,而link是html标签,不存在浏览器兼容性问题 Link引入样式的权重大于@import的引用(@import是将引用的样式导入到当前的页面中)

css的link和import的区别

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别. 当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载.所以有时候浏览@import加载CSS的页面时开

引用外部CSS的link和import方式的分析与比较

很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url("http://www.abaonet.com/abc.css"); </style> 而很多网站使用的都是 link <link rel="stylesheet" rev="stylesheet" href="style

引入CSS方式link和@import的有何区别

外部引用CSS中 link与@import的区别 这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别 link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别 当一个页面被加载的时候(就是

引入CSS文件的方式,以及link与@import的区别

一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"></div> 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 <html> <head> <style> ..// 此处添加css代码 </style> </head> <

css 样式引入的方法 link 与import的区别

<link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到外部的样式文件2 在<head>元素中使用"style"元素来指定3 使用CSS "@import"标记来导入样式表单4 在<body>内部的元素中使用"style"属性来定义样式 1 用link进行引用 <link r