怎样管理好样式

学习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中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的,具有很强扩展性的应用网站来!

以上内容所讲的比较局限,希望对大家的样式管理上有一点帮助

(0)

相关推荐

  • 怎样管理好样式

    学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化.也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局.排版.色彩.图片等等工作.学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事.同时也会避免网页在不同浏览器之间的差异.于是又开始学习XHTML代码,并且不断的去摸索着XHTML的结构的特点.会写CSS了,也懂得XHTML结构的

  • Linux系统上Nginx+Python的web.py与Django框架环境

    1.编译nginx 在网上买了一本<实战nginx-取代Apache的高性能服务器>,写的比较浅,主要是些配置方面的东西,不过却正是目前我所需要的.由于需要支持https和rewrite,所以除了nginx的源码之外,又下载了 openssl-0.9.8r.tar.gz 和 pcre-8.12.tar.gz,把他们和nginx-1.0.4.tar.gz放到同一个目录. 为了方便编译,笔者写了一个脚本,代码如下: #!/bin/bash #============================

  • JS链式调用的实现方法

    链式调用    链式调用其实只不过是一种语法招数.它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的.该技术包括两个部分: 一个创建代表HTML元素的对象的工厂. 一批对这个HTML元素执行某些操作的方法. 调用链的结构$函数负责创建支持链式调用的对象 复制代码 代码如下: (function() {    /*     * 创建一个私有class     * @param {Object} els  arguments 所有参数组成的类数组     */    function _

  • Vue路由权限控制解析

    前言 本人在公司主要负责中后台系统的开发,其中路由和权限校验算是非常重要且最为基本的一环.实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对这个知识点的一些总结. 项目总体目录结构 进入今天主题之前,我们先来梳理下整个项目,src目录下的. api: 接口请求 assets: 静态资源 components: 通用组件 directive: 自定义指令

  • CSS样式表规划与管理的经验总结

    彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了.一年多的实践也积累了一定的经验,现在写这篇文章来总结一下.在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理. 我的CSS管理进化史 在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼.那个时候,一个网站所有的CSS都在一个文件中,没

  • Java卡片布局管理器解释及实例

    由 CardLayout 类实现的布局管理器称为卡片布局管理器,用来操纵其所管理容器中包含的容器或组件.每个直接添加到其所管理容器中的容器或组件为一个卡片,最先被添加的容器或组件被认为是第一个卡片,最后被添加的则为最后一个卡片,初次运行时将显示第一个卡片.下面,我们就来通过一个实例看看它是怎么用的. 源码: import java.awt.BorderLayout; import java.awt.CardLayout; import java.awt.Color; import java.aw

  • 浅谈Vuex的状态管理(全家桶)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • jQuery日程管理控件glDatePicker用法详解

    本文实例讲述了jQuery日程管理控件glDatePicker用法.分享给大家供大家参考,具体如下: 之前接触过一款日程管理控件,叫 FullCalendar,功能很强大,会列出每天的事项,可选择编辑并且可以定制自己的日历,然而,有时候,我们的网页上只需要一个简单的日历,迷你但实用,有日程安排的日期高亮显示,可跳转日期,可选择日期等等基本功能都应该具备,而这时 FullCalendar 就显得太过庞大了,所以,就有了我对 glDatePicker 控件的学习. 先看效果:    橘红色表示当前选

  • Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子. 本文将继续上篇文中的示例,完成编辑操作. 编辑项操作 用户通过单击"编辑"按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击"保存"按钮完成编辑操作,也可以单击"取消"按钮取消编辑状态. 首先,通过单击"编辑"

  • AngularJS的一些基本样式初窥

    显示和隐藏 在 Angular 中的一切,都是基于模型的改变,进而通过标识符反映这些变化到界面上. ng-show 和 ng-hide 可以做相同的事情.显示和隐藏是基于你传递给他们的表达式而定,即,当表达式为 true 时,ng-show 就显示,反之隐藏.当表达式为 true 时,ng-hide 就隐藏,反之显示.这些标识符是通过设置元素的样式 display:block 显示和 display:none 隐藏进行工作的. CSS类和样式 通过 {{}} 解析来进行数据绑定,从而能够动态地设

随机推荐