Css中import与link用那个比较好?区别在哪里

淘宝网页中使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下:

1、淘宝网页中大部分是这样写的:

2、而很多网站使用的都是link:

3、而像google 百度 163等网站他们都是直接写在网页中

import和link的区别

当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误。

他俩的作用相同

唯一的不同是服务对象不一样

@import 为CSS服务

link是为当前的页服务

经常有网友说 @import会优先执行。

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

差别1:

老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:

加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

差别3:

兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

差别4:

使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

至于为什么google这些网站直接将CSS写在页面内,我想很多人都知道,因为这些浏览量很高的网站,最重要的是速度,如果用link,每次都会多一个请求,那么这么多的浏览量,服务器必定会增加许多负担,而方在HTML文档内,却大不了多少,所以,还是优势还是非常明显的。

时间: 2024-09-24 00:41:19

Css中import与link用那个比较好?区别在哪里的相关文章

css中@import与link样式调用的区别

link link就是把外部CSS与网页连接起来. @import import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import 大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式. 另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样

网页设计CSS中文字大小的pt、px的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 在网页设计css中,经常用到字体,而字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个"点"有多长多大么?可以画的很小,也可以很大.如

css中单位px和em,rem的区别

  px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px,

CSS中通过import方式导入的方法

在高性能网站设计的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下面将会用到.对于这个问题的底线是:如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import. LINK vs. @import 大家都知道,有两种方法可以在你的页面中导入样式文件.你可以使用LINK标签:  <link rel='stylesheet' href='a.css' />

css中link与@import引入css文件用法区别

1 网页中引用外部CSS的两种方式 网页中引用外部CSS文件有两种方式:link和@import,两者引用的方式在页面上的展现效果是一样的. link引用方式如下: <link href="styles.css" type="text/css" />@import引用方式如下: <style type="text/css">@import url("styles.css");</style>

css中link和@import的区别分析详解

导入CSS文件主要有两种方式: 链接式(link)  代码如下 复制代码 <link rel="stylesheet" href="style.css" type="text/css"/>   导入式(@impot) <style type="text/css">      @import url("style.css"); </style> 以上是这两种方式的语法区别.

CSS网页设计教程:link和@import外部引用CSS的区别

文章简介:link与@import在外部引用CSS中的区别. link与@import在外部引用CSS中的区别 1.老祖宗的差别 link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 2.加载顺序的差别 当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载.

css import与link的区别_经验交流

看到一些网站的页中大部分是这样写的 <style type="text/css" media="screen"> @import url("http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css"); </style> 而很多网站使用的都是link <link rel="stylesheet" rev="stylesheet

[译] 再谈 CSS 中的代码味道

本文讲的是[译] 再谈 CSS 中的代码味道, 原文地址:Code Smells in CSS Revisited 原文作者:Harry 译文出自:掘金翻译计划 译者:IridescentMia 校对者:rccoder, Germxu 再谈 CSS 中的代码味道 回到 2012 年,我写了一篇关于潜在 CSS 反模式的文章 CSS中的代码味道.回看那篇文章,尽管四年过去了,我依然认同里面的全部内容,但是我有一些新的东西加到列表中.再次说明,这些内容并不一定总是坏的东西,因此把它们称为代码味道:在