网站制作学习网DIV+CSS→正文:css样式表中@import指令的应用
字体:

css样式表中@import指令的应用

DIV+CSS 2009/3/16 13:15:52  点击:不统计

关键词:css样式表,使用多个样式表,使用@import指令创建一个单一的外部样式表,@import指令



当一个样式表变得很强大,以至于难于查找和编辑样式时,肯能就要创建多个独立的样式表了,每一个样式表提供一种独立的功能。你可以把用来格式化表格的样式放在一个样式表中,用于布局的样式放在另一个样式表中,决定东西颜色的样式放在第三个样式表中,另一个样式表用来存放你的Internet Explorer 修复,等等;要保持和力度饿独立文件数目,以为假设有30个外部css文件要处理的话,可能根本就节省不了时间了。

乍看之下,似乎最终在每张网页中会有更多的代码,因为你将有更多的外部样式表要链接或者导入—每个文件一行代码。啊哈,有一种更好的方法:用@import指令创建一个单一的外部样式表来包括多个样式表。

建立这类样式表的步骤:

1.创建外部样式表来格式化网站中不同类型的元素

例如一个color.css文件带有控制网站颜色的样式,一个forms.css文件控制表格样式,一个layout.css文件用于布局控制,而一个main.css文件则涵盖了其他所有的东西

2.创建一个外部样式表,并导入你在第一步中创建的每一个样式表

你可以命名这个文件为base.css、global.css、site.css或者像这样比较通用的名字。这个CSS文件不包含任何规则,而是利用@import指令来附上其他的样式表,像这样:

@import ulr(main.css)

@import ulr(layout.css)

@import ulr(color.css)

@import ulr(forms.css)

这是这个文件里面需要的唯一的代码,虽然你可能添加一些版本号、网站名称等注释来帮助辨别这个文件。

3.最后,用<link>标签或者@import方法,把来自第二步的样式表添加到网站的HTML页面。

例如,<link rel="stylesheet" href="base.css" type="text/css" />,现在,当网页加载时,网页浏览器就会加载base.css,它会告诉浏览器依次加载4个其他的样式表。

这肯能感觉就像有一整批的加载正在进行,但是一旦浏览器下载了那些文件,并把它们保存在它的调整缓存中,就不必再次从因特网上重新获取了。

应用单一外部样式表来加载几个其他样式表的另一个好处是:如果你稍后决定进一步把你的样式表分成其他的样式表,那么你不一定要去弄乱网站的HTML。反之,只要再添加一个@import指令给那个门卫式的样式表。如果你决定把有关类型的所有样式从main.css文件中取出来把它们放在它们自己的type.css文件中,那么你不必碰网站的网页,只要打开它里面所有带@import指令的样式表,并在添加一个@import url(type.css)。

这种安排也让你使暂时的设计变化在不同的样式表中交换,来从网站中获得一些乐趣。假设你决定改变网站的颜色一天、一个月或者一个季度。如果你已经把定义颜色的主要样式放进一个独立的color.css文件中,那么你可以用一个不同的颜色组创建另一个文件(比如summer_fun.css)。那么,在那个门卫式的文件中,改变color.css文件的@import指令,加载这个新的颜色样式文件(例如@import url(summer_fun.css))





·上一篇:Microsoft OLE DB Provider for ODBC Drivers (0x80040E21) >>    ·下一篇:超过宽度显示省略号(无js全兼容) >>
推荐文章
最新文章