css样式表中@import指令的应用
关键词: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))