最近考虑到对网站的样式部分进行统一管理,遂写出本文,供大家参详,不妥之处,欢迎补充【这只是一点点想法,希望大家一起完善】:
以前在程序中,有美工设计好了静态页面,而我们程序员将其整理成动态页面(例如jsp页面),一般程序员是不会管像图片、样式这样的东西,直接拿来就用了。这时可能出现下面几个问题:
1 修改过几次后,会出现无用的样式或者图片;
2 不同页面所用的样式可能在一个css文件中,查找起来非常的麻烦。
3 没有良好的结构,对以后的扩展(例如换肤)非常不利
4 样式或者图片名称起的很随意或者不符合实际要求,对理解有一定的影响。
下面是总结的一些css使用约定:
1尽量使用外部链接的方式引入css
示例详见:demo2.html
2 css文件开发版本中尽量加入样式注释
示例详见:demo2.css
3 css命名规则:
css文件名称建议具有实际意义,例如,公用css可以命名为cmm.css、邮件专用css可以命名为:mail.css
4 css样式命名规则:
样式命名建议根据实际用途进行命名,例如,用于标题的样式可以.title{};
尽可能的保证不同css中定义的样式不会发生命名上的冲突,以免造成不必要的相互影响
5 css用到的图片放置规则:
Css用到的图片,主要是背景。可以按照如下规则去做:
在css文件相同目录下建立文件夹images.在images下新建与css同名的文件夹(不带.css后缀名称),css文件的图片均放在这里面,demo3.html
详见示例:demo3.html
6建议将布局css与皮肤css分开编写。
布局Css即那些对网站骨骼结构产生影响的css,比如宽高、border、margin等等。
皮肤CSS指的是诸如颜色、背景图片这样的,不会对页面骨骼结构产生影响的css。这里分开,主要是为了以后的换肤功能,如不实现换肤的话,可以写在一起。
7布局css如果只用到一次(在一个页面中的一处地方使用),可以写在页面中,甚至直接写在html元素中,如果用到2次以上(同一页面或者不同页面中),必须归纳出来形成独立的css。
PS:如果需要文中提及的示例,请联系我。
分享到:
相关推荐
以前在程序中,有美工设计好了静态页面,而... 下面是总结的一些css使用约定: 1尽量使用外部链接的方式引入css 2 css文件开发版本中尽量加入样式注释 3 css命名规则: css文件名称建议具有实际意义,例如,公用css
管理css css注释写法的例子 管理css css注释写法的例子 管理css css注释写法的例子
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
各浏览器css兼容写法各浏览器css兼容写法
Moo-CSS 模块化面向对象的css写法
css浏览器兼容写法 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000...
css写法的简单操作,真实用,虽然简单,但在实际开发中都能用到。
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
css a链接 写法 新手篇
这是一个支持多浏览器的css通用的写法。
兼容IE的最小最大高度CSS写法
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
获取css样式 兼容写法
css样式布局写法,css样式布局例子程序
简单学习css组合与CSS嵌套的写法. CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; }.jb51 { color: red; }.jb51...
兼容各种浏览器篡位的css样式写法分享,需要的朋友可以参考下。
div css教程TOP排行榜或新闻列表最标准div css样式表代码写法
css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法