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>
2 差别

2.1 适用范围不同
    @import可以在网页页面中使用,也可以在css文件中使用,用来将多个css文件引入到一个css文件中;而link只能将css文件引入到网页页面中。
   
2.2 功能范围不同
    link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义RSS,定义rel连接属性等,@import就只能加载CSS。

2.3 加载顺序不同
    当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

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

2.5 控制样式时的差别
    使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。

当然如果将样式直接写在网页中将能减少网站服务器产生的HTTP请求,避免加载慢出现的各种问题,但是维护量会变大。

时间: 2024-10-23 03:35:47

css中link与@import引入css文件用法区别的相关文章

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中expression怎么用? CSS expression详解

什么是CSS expression? IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一个成员函数中一样. 是不是感觉上面的文字有点晦涩?没有关系,你只需要知道:我

网页设计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,

html中加入KindEditor除了引入js文件还要怎么实现

问题描述 就像这样的效果的 解决方案 解决方案二:就是发帖的文本编辑器,已经引入<scriptcharset="utf-8"src="/editor/kindeditor.js"></script><scriptcharset="utf-8"src="/editor/lang/zh_CN.js"></script>解决方案三:kindeditor中的工具可以自己设置,参考:<

centos中/etc/profile,/etc/bashrc等文件的区别与作用

当我们在做一些与bash相关的操作时,比如设置别名.登录启动项等,多多少少都会与下面几个文件打交道,用的时候一查,然后又忘了.好记性不如烂笔头,下面老高就帮你理一理这些文件到底是干啥的. /etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc •文件说明: ◦/ect/profile ■此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. ◦/etc/bashrc

MySQL中select into和MSSQL select into用法区别

  一.MySQL不支持Select Into语句直接备份表结构和数据,由于工作中的需要在网上找到一种方法可以代替, 也有其它方法可以处理,总结如下: 方法1: MYSQL不支持:  代码如下 复制代码 Select * Into new_table_name from old_table_name; 替代方法: Create table new_table_name (Select * from old_table_name); 方法2: 1.先备份表结构和数据 #导出命令 -u用户名 -p密

php中static静态类与static 静态变量用法区别

1. 创建对象$object = new Class(),然后使用"->"调用:$object->attribute/function,前提是该变量/方法可访问. 2. 直接调用类方法/变量:class::attribute/function,无论是静态/非静态都可以.但是有前提条件: A. 如果是变量,需要该变量可访问. B. 如果是方法,除了该方法可访问外,还需要满足: b1) 如果是静态方法,没有特殊条件: b2) 如果是非静态方法,需要改方法中没有使用$this,即