189 8069 5689

css样式@import的简单介绍

CSS里 @import用法

引入CSS的方法有两种,一种是@import,一种是link

成都创新互联公司是一家专注于网站建设、成都网站设计与策划设计,路北网站建设哪家好?成都创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:路北等地区。路北做网站价格咨询:18980820575

@import url('地址');

link href="地址" rel="stylesheet" type="text/css" /

现在绝大部分的网站都采用后一种link方式,原因在于

@import先加载HTML,后加载CSS

link先加载CSS,后加载HTML。

所以前者加载网页会出现令浏览者以外的格式,后者则是带格式的加载网页。

关于@import css样式表问题

这里是指相对路径,举个例子比较好理解:

假如有两个样式文件,main.css和index.css(它们在同一文件夹中),我们要在main.css里引用index.css,那么这里的写法就是:

@import url(index.css);

css中为什么要把@import放在样式表的最前面?

实际上,@import并不是一定要在最前面

W3C的CSS2.1标准中,对@import作了以下规定:

In CSS 2.1, any @import rules must precede all other rules (except the @charset rule,if present).

在CSS2.1中,任何@import命令必须放在所有其它语句之前(除了用到@charset时)。

而在CSS3标准中,则是这样规定:

Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.

在样式表中,任何@import命令必须紧跟在@charset命令之后(如果有的话),放在其它@命令和样式语句之前。

还有,@import命令放在注释之后同样生效。你不需要知道为什么,只要记住如果不这样做@import就会失效就行了。假如你一定要追究为什么要做这样的硬性规定,我认为主要出于这样的考虑:

p id="intro" class="frame head"I'm just a p element used test specificity of selectors. So leave me alone!/p

p#intro { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

p { font: italic 2em Georgia, serif; }

你认为页面最终会使用哪条规则的font样式?是第一条p#intro。这里涉及到一个优先级(specificity)的问题:#id .class element(标签名)。所以即便p{font}样式出现在p#intro{font}和p.frame{}之后,最终被应用的还是p#intro{font}。而容易导致问题的是下一种情况:

p.head { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

这次你认为会使用哪条font样式?是第二条p.frame。这里涉及到cascading的问题。p.head的优先级和p.frame的优先级相同,但p.frame写在p.head之后,按规则p.frame的font样式会覆盖p.head的font样式。

在这种情况下,再允许把@import放在一堆样式当中,到底@import引入的样式表中有没有会覆盖当前样式表的条目,诸如此类的判断会更加困难。实际上,即便CSS标准里没有作这样的规定,程序员也还是会这样做,因为这样可以减少很多不必要的麻烦。

CSS里 @import用法?

引入CSS的方法有两种,一种是@import,一种是link \x0d\x0a@import url('地址');\x0d\x0a\x0d\x0a现在绝大部分的网站都采用后一种link方式,原因在于\x0d\x0a@import先加载HTML,后加载CSS\x0d\x0alink先加载CSS,后加载HTML。\x0d\x0a\x0d\x0a所以前者加载网页会出现令浏览者以外的格式,后者则是带格式的加载网页。


本文名称:css样式@import的简单介绍
URL地址:http://jkwzsj.com/article/phcpic.html

其他资讯