热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

怎样管理好样式

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

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


推荐阅读
  • 驱动程序的基本结构1、Windows驱动程序中重要的数据结构1.1、驱动对象(DRIVER_OBJECT)每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱 ... [详细]
  • 作为一名饼干爱好者,我尝试过各种各样的饼干。虽然威化饼和消化饼都有其独特的风味,但我对柠檬夹心饼干情有独钟。这种饼干不仅口感丰富,还带有清新的柠檬香味。 ... [详细]
  • 在 PHP 中,使用 `continue` 关键字结合数字可以有效地终止嵌套的 `foreach` 循环。本文将详细介绍如何使用 `continue` 加数字来控制不同层次的循环。 ... [详细]
  • 解决网页乱码问题的实用方法
    网页乱码问题在开发中较为常见,主要由文件编码、程序字符集设置和数据库连接字符集设置不当引起。本文将详细介绍如何逐一排查并解决这些问题。 ... [详细]
  • 本文通过一个示例展示了如何使用HTML和CSS美化并实现响应式的按钮组。 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 本文介绍了三种解决 Git Push 冲突的方法,包括创建新分支、手动解决冲突和强行推送。这些方法适用于不同的开发场景,如版本迭代、多人协作和个人开发。 ... [详细]
  • Excel VBA自动化添加数字证书(续)
    本文继续探讨如何在Excel VBA中自动添加数字证书。上一篇文章因突发情况未能完成,本次将详细介绍证书的生成和集成方法。 ... [详细]
  • 本文探讨了 Java 中 HttpClient 和 HtmlUnit 的区别,重点介绍了它们的功能和应用场景。 ... [详细]
  • 申请地址:https://developer.apple.com/appstore/contact/?topic=expedite 常见申请理由:1. 我们即将发布新产品,这是一个媒体活动,我们无法承担任何风险,因此在多个方面努力提升应用质量。 ... [详细]
  • 近年来,区块链技术备受关注,其中比特币(Bitcoin)功不可没。尽管数字货币的概念早在上个世纪就被提出,但直到比特币的诞生,这一概念才真正落地生根。本文将详细探讨比特币、以太坊和超级账本(Hyperledger)的核心技术和应用场景。 ... [详细]
  • 使用外部样式表实现盒子居中对齐
    本文介绍如何在HTML文件中引入外部CSS样式表,并通过CSS实现盒子的居中对齐。 ... [详细]
  • 本文将介绍如何利用Python从西门子PLC获取数据,并通过Web技术实现数据的可视化。我们将探讨所需的技术栈和具体步骤。 ... [详细]
  • Python学习day3网络基础之网络协议篇
    一、互联网协议连接两台计算机之间的Internet实际上就是一系列统一的标准,这些标准称之为互联网协议,互联网的本质就是一系列网络协议。二、为什么要有互联网协议互联网协议就相当于计 ... [详细]
  • 本文介绍了如何使用线段树实现区间加法和区间查询操作,包括详细的代码实现和解释。 ... [详细]
author-avatar
百脑汇惠州店_956
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有