当前位置:园子博客 » Css » 调用样式表的方法

调用样式表的方法

1月 6th, 2009 | Filed under Css | 共有7,449次浏览

基于WEB标准设计的网站,过渡的方法主要采用xhtml+css,网页里面所有表现的地方都需要用CSS来实现。这就要求我们必须熟练掌握CSS,要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的,园子总结了一下常用的三种调用样式表的方法。

方法一:页面内嵌法

这也是初学者经常使用的方法,就是将样式表直接写在页面代码的head区。类似这样:

1
2
3
<style type="text/css">
body { background:white; color:black; }
</style>

方法二:外部调用法

在制作大型站点时常用的方法。将样式表写在一个独立的*.css文件中,然后在页面head区用类似以下代码调用。

1
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web标准的设计中,我们使用外部调用法,好处不言而喻,我们可以不修改页面样式,而只改动 css 文件来改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式,这对网站的后期维护有很大的便利性。

方法三:双表法调用样式表

或许我们会发现在某些符合标准站点源代码中可以看到,在调用样式表的地方会有如下代码:

1
2
3
4
<link rel="stylesheet" rev="stylesheet" href="css/style.css" mce_href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">
@import url( css/style01.css );
</style>

我们也许会有所疑问,为什么要写两次呢?实际上一般情况下用外联法调用(就是第一句,也就是上面的第二种方法)就足够了。园子在这里使用双表调用只是一种示例,其中的”@import”命令用于输入样式表。而”@import”命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用”@import”命令方法调用样式表。

一些总结

在我们设计网站的过程中,我们要学会灵活运用某种方法来调用你的样式表。

我的建议是前期布局网站时尽可能把样式表放在一个单独的文件夹里面,然后通过外部调用方法来调用,你可以把所有样式写在一个文件里,也可以按功能模块划分为几个CSS样式表,这样对大型站点来说也许更加利于维护与管理。例如:base.css(基本共用样式)module.css(模块样式)forms.css (表单样式)mend.css(补丁样式)print.css(打印样式)。

如果以后我们在维护网站的时候需要在一个页面上加些文字,这些文字需要特别链接且和其他页面表现形式不重复的时候我们可以采用页面内嵌法直接写入页面。

目前还没有任何评论.
您必须在 登录 后才能发布评论.