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

link
link就是把外部CSS与网页连接起来。

@import
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

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

为什么使用link
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

时间： 2024-09-25 23:24:03

css中@import与link样式调用的区别的相关文章

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

淘宝网页中使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下: 1.淘宝网页中大部分是这样写的: 2.而很多网站使用的都是link: 3.而像google 百度 163等网站他们都是直接写在网页中 import和link的区别 当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导

如何使用jquery修改css中带有!important的样式属性_jquery

<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px");和 $("div.test").css("width&

iOS开发中#import、#include和@class的区别解析_IOS

1. 一般来说,导入objective c的头文件时用#import,包含c/c++头文件时用#include. 2. #import 确定一个文件只能被导入一次,这使你在递归包含中不会出现问题.<标记> 所以,#import比起#include的好处就是不会引起交叉编译. #import && #class: 1. import会包含这个类的所有信息,包括实体变量和方法(.h文件中),而@class只是告诉编译器,其后面声明的名称是类的名称,至于这些类是如何定义的,后面会再告

css中border:0和border:none的区别详解

性能差异: [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值. [border:none;]把border设为"none"即没有,浏览器解析"none"时将不作出渲染动作,即不会消耗内存值. 兼容性差异: 兼容性差异只针对浏览器IE6.IE7与标签button.input而言,在win.win7.vista

学入分析css中px、em和rem单位区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核).  px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册)em是相对长度单位.相对于当前对象内文本的字体尺寸.

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示:   可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span.而是使用li标签的border-right.但是最后一个需要隐藏,否则效果不是很理想. 最原始的写法是: 1: #tabnav li:last-child 2: { 3: border-right:none; 4: } <li id="sub_nav_user" class="dcontent lastitem" ><a >D Con

css中display:none和visibility:hidden的区别

区别分析 首先我们都知道,display: none 和 visibility: hidden 都可以起到隐藏元素的功能 两者的区别在于占用文档流的不同 display: none 隐藏元素同时去除元素在文档流所占的空间 visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间 区别示例 HTML Code <span class="one">第一区域</span> <span>第二区域</span> <br

asp.net 中静态方法和动态方法调用的区别实例分析_实用技巧

复制代码 代码如下: //定义静态方法class SQLHelper       {        public static string aaa()        {            return "你好"               }    } 调用:SQLHelper.aaa(); // 类名.方法名 //定义动态方法class SQLHelper       {        public string aaa()        {            return

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

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