CSS编码规范

CSS编码规范

ID:42624015

大小:16.44 KB

页数:11页

时间:2019-09-19

CSS编码规范_第1页
CSS编码规范_第2页
CSS编码规范_第3页
CSS编码规范_第4页
CSS编码规范_第5页
资源描述:

《CSS编码规范》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CSS编码规范1基本规范1.1文件命名规范基本样式:base.css全局样式:global.css框架布局:layout.css字体样式:font.css链接样式:link.css打印样式:print.css1.2常用类Class规范页眉:header内容:content容器:container页脚:footer版权:cpright导航:nav分页:pages标志:logo留言:msg标语:banner标题:title边栏:sidebar图标:icon注释:note搜索:search按钮:btn登录:login链接:link主导航:main-nav子导航:sub-nav

2、信息框:manage说明:常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方注释。对于二级类命名,则采用组合书写的模式,两个单词之间使用中横连“-”接,如:搜索框:search-input搜索图标:search-icon搜索按钮:search-btn1.3派生选择器可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时,也使结构更加的清晰化,如:.main-navulli{background:url(images/bg.gif;)}1.4辅助图片用背影图处理这里的“辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒

3、的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:.logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}1.5结构与样式分离在页面里只写入文档的结构,样式写于css文件中,通过外部调用CSS实现结构与样式分离。1.6文档的结构化书写页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

  • 首页
  • 介绍
  • 4、="#">服务

/*主导航S*/.main-nav{width:100%;height:30px;background:url(images/mainMenu_bg.jpg)repeat-x;}.main-navulli{float:left;line-height:30px;margin-right:1px;cursor:pointer;}1.6注释书写规范a整段注释。分别在开始及结束地方加入注释,如1.6中所示;b协助注释。非作者维护时所加入的表示修改时间、修改人等标识信息。在区域注释或单行注释的基础上加上修改人和修改时间等信息

5、。如:区域注释/***S注释内容[修改人和修改时间]*/.class{...}.class{...}/***E*/单行注释.class{/*注释内容[修改人和修改时间]*/}1.7样式属性代码缩写a不同类有相同属性及属性值的缩写对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:.main-nav{background:url(../images/bg.gif);border:1pxsolid#333;width:100%;height:30px;o

6、verflow:hidden;}.sub-nav{background:url(../images/bg.gif);border:1pxsolid#333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处,刚可以缩写为:.main-nav,.sub-nav{background:url(../images/bg.gif);border:1pxsolid#333;width:100%;overflow:hidden;}.main-nav{height:30px;}.sub-nav{height:20px;}b同一

7、属性的缩写同一属性根据它的属性值也可以进行简写,如:.search{background-color:#333;background-image:url(../images/icon.gif);background-repeat:no-repeat;background-position:50%50%;}.search{background:#333url(../images/icon.gif)no-repeat50%50%;}c内外侧边框的缩写在CSS中关于内外侧边框的距离是按照[上右下左]的顺序来排列的,当这四个属性值不同时,也可直接

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签