怎样管理好css样式
作者:小毅 来源:小毅的博客 发布时间:2008-10-12 12:12:00
学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习XHTML代码,并且不断的去摸索着XHTML的结构的特点。会写CSS了,也懂得XHTML结构的重要性并能灵活应用的时候,是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。
大家也许都已经有了自己的管理方式,因为所要应用的网页类型的不同可能管理的思路也不一样,这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例,给对于没有形成自己的管理方式的朋友们提供一个参照范本。
我的样式管理是针对于单一项目、单一的风格体系的网站,一般这样的网站都是中小型的网站,风格是上一致的。对于大型网站,或是风格差异很大的网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便,修改工作的成本是很高的,所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法:
其中,[images] 是存放xHTML中出现的图片,[jonStyle]我统称之为主题包,在样式包中包括了[CSS]、[img]、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的[img]与外面的[images]虽然都是存放图片的,但是这里的图片的性质却是不一样的。[img]是CSS中所引用的图片,所有的图片的显示与否都与CSS样式有关,他的归属性是,[img]里的图片是归属于CSS的,而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML,xHTML也不要直接使用[img]中的图片。
这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥,我的考虑是这样的:行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候,也有可通这个行为也是需要更换的。比如:在第一套方案中,某个区块的内容是要上下滚动的,然而在第二套方案中,这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。
基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢?我是这样来划分的:样式包中有一个base.css(基本共用样式)module.css(模块样式)forms.css (表单样式)mend.css(补丁样式)print.css(打印样式)
其中base.css是一个基本的样式,也就是所有网页的共性样式,这个样式与module.css配合基本上可以显示正常的页面。表单的划分,也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性,所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式,是提供给打印设置使用的。
我通过这样的划分,在对于维护与网站的样工更新上,就显得非常的容易,基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包,那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的,具有很强扩展性的应用网站来!
以上内容所讲的比较局限,希望对大家的样式管理上有一点帮助!


猜你喜欢
- 本文实例讲述了asp.net C#实现解压缩文件的方法。一共给大家介绍了三段代码,一个是简单的解压缩单个zip文件,后一个可以解压批量的大量
- 本文实例讲述了SQL Server日期加减函数DATEDIFF与DATEADD用法。分享给大家供大家参考,具体如下:SQL Server 日
- 本文实例讲述了PHP面向对象程序设计之类与反射API。分享给大家供大家参考,具体如下:了解类class_exists验证类是否存在<?
- 本文实例为大家分享了python实现五子棋游戏的具体代码,供大家参考,具体内容如下一、运行截图:二、代码# 用数组定义一个棋盘,棋盘大小为
- Python列表的append()方法踩坑在这之前,我一直认为append()只是个将一个对象添加到列表尾部的方法,但是今天之后,我对它有了
- 在开始之前还是提一下三个函数吧:"ob_start()、ob_end_clean()、ob_get_contents()"
- 今天 大白 问了一个关于CSS权重的问题:关于选择器权重的问题 。class的权重是10 标签权重是 1 。比如说 p span{} 权重是
- 面部识别----考勤打卡、注册登录、面部支付等等...感觉很高大上,又很方便,下面用python中的框架--django完成一个注册登录的功
- 前言最近在整理我磁盘上的照片,发现不少猫照,突然觉得若能把这些猫照都挑出来,观察它们的成长轨迹也是一件不错的事情。一张一张的找实在是太费劲了
- 1.字典的概念字典和列表类似,也是可变序列,不过和列表不同,它是无序的可变序列,保存的内容是以键值对(key:value)形式存放的 字典的
- webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。var webpack = r
- renderer是Go语言的一个简单的、轻量的、快速响应的呈现包,它可以支持JSON、JSONP、XML、HYAML、HTML、File等类
- 数组新的shape属性应该要与原来的配套,如果等于-1的话,那么Numpy会根据剩下的维度计算出数组的另外一个shape属性值。举个例子:x
- Go素数筛选分析1. 素数筛选介绍学习Go语言的过程中,遇到素数筛选的问题。这是一个经典的并发编程问题,是某大佬的代码,短短几行代码就实现了
- 例如我们有如下结构的文件:pkg/ __init__.py libs/ some_lib.py __init__.py components
- MySQL的自增id都定义了初始值,然后不断加步长。虽然自然数没有上限,但定义了表示这个数的字节长度,计算机存储就有上限。比如,无符号整型(
- 最近公司准备扩张海外业务,所以要给 Django 系统添加 国际化与本土化 支持。国际化一般简称 i18n ,代表 Internationa
- Form表单验证:js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等。完整代码如下:
- MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管
- Part.I 预备知识Chap.I 几个概念的区分Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了