CSS布局教程

基于web标准的网站设计指南

« CSS的显示环境一浏览器png格式图像简介 »

CSS样式表的引入规划与维护管理

将CSS样式文件引入到HTML页面中方式一般分为3种,任何一种都有其独有的作用,分别为:
直接写在标签元素的属性style中,通常称为行间样式。
将样式写在<style></style>标签之内,通常称为内嵌样式表。
通过<link/>方式外链CSS样式文件,通常称为外联样式表。
]通过@import关键字导入外部CSS样式文件,通常称为导入样式表。
行间样式的应用范围很小,只对具有style属性的标签元素有效,而且优先级也是很高的,有悖于结构与表现的分离,建议不要使用。
内嵌样式表是将样式文件写入到<style></style>标签之内,一般应用在访问量比较大的页面减少对服务器的HTTP请求数而减少对服务器的负担。缺点是如果需要修改,那就只能对页面进行修改。
外联样式表是目前使用最多也是这几种方式中较好的方式,将CSS样式写在一个扩展名为.CSS的文件中,统一管理,方便修改,而且能够实现结构与表现的分离。
其中rel属性定义该标签关联的样式表标签;href属性定义该标签所链接的外部CSS样式文件的地址,可以是相对地址,也可以是绝对地址;type属性定义文档类型;media属性是设置属性调用的样式文件主要是针对什么设备而使用的,例如,media="screen”是针对计算机显示器的样式,而media="all”即为所有的设备(具体请参考CSS手册的附录“设备类型(Media Types)”)
导入样式表类似于外联样式表,都是利用外部CSS文件而改变页面的表现的,但其与外联样式表不同的是,需存在于样式表文件中或者<style></style>标签中使用@import关键字导入的外部CSS文件中。
以上两种导入样式表的方式,都是通过@import关键字导入URL中的CSS样式文件的地址而使CSS文件生效。导入样式表的方式主要优点体现于能在一个样式文件中再次导入其他样式表,可以降低HTML文档的复杂性,并且允许在一个样式表中管理所有样式表。导入样式表的方式必须放在样式表的最前面,否则它们可能无法正常运行。当样式表同时导入多个样式表文件时,必须要考虑的是样式的优先级问题。因为先考虑导入的样式文件再考虑样式表,所以样式表中的文件会覆盖导入的样式文件中的样式。虽然在佳使用@import关键字导入样式的方式时,@import写在样式表的最前面,但浏览器解析的时候是最后才解析的,这样很容易导致IE6中的闪屏或者在打开页面的过程中无样式直到页面加载完毕后才会加载样式的现象出现,因此建议不要使用导入样式一表的方式,而是使用外联样式表的方式来链接外部样式表文件
下面,天津网站建设为您说一下样式表的规划与维护,对于简单的Web站点,可以只使用一个CSS样式文件。对于大型的复杂站点,如何处理CSS样式文件以便简化维护、方便管理是大家所关心的一个话题。对于CSS样式文件的规划方式将直接影响后期对Web站点维护的效率,对于大型的复杂站点一般将CSS样式文件分为两个部分:页面的全局定义及处理页面基本布局的CSS样式文件和处理细节方面的CSS样式文件。这样的话,在布局确定之后,很少需要再次更改布局结构,可以减少修改样式过程中意外地改动或者破坏页面布局的可能性。当然,处理细节方面的CSS样式文件还可以再次进行细分,例如,将表单、文字、列表等再分割成一个个CSS样式文件。但不建议这样操作,虽然细分了,对后期维护效率或许会有所提高,却给服务器带来了不必要的HTTP请求。这会影响到一些性能,所以一般选择一个大型的CSS文件而不是多个CSS小文件。在编写CSS代码的时候过程中,未发布站点之前可以在CSS中适当添加CSS注释,便于开发过程中间题的排查,正式发布站点的时候就可以删除注释,减少文件的代码量。例如,可以在对定义图片的样式之前添加如下代码段中的注释,搜索"=pic”就会立即找到样式文件中的需要的代码部分
 

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号