前端CSS样式规范初.doc

HOUSE365 前端 CSS 规范初稿 2011/0531一 CSS命名规范页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。 骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav 1.通用命名规则： 1) 所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_2 2) 所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav 3) 页面主体框架布局命名：Lay_1、Lay_2 、Lay_34) 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N 5) 栏目标题块命名一律采用title。元素标签采用:如： 标题 6) 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N 7) 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N 8) 页面上按钮采用：btn_1、btn_2、btn_3、btn_N 9) 广告区域：ad_1,ad_2,ad_3,ad_N 2.主框架命名规则： 1) #header (页面头部) 2) #main (页面主体) 3) #footer (页面尾部) 3.通用命名规则： 主 体main外 层wrap功能条funcBar主导航mainNav子导航subNav友情链接：friendLink版 权：copyright页 眉header页 脚footer标 题title主导航mainNav子菜单subMenu注 释note面包屑breadcrumb容 器container内 容content搜 索search登 陆Login当前状态current页头header标志logo侧栏sidebar广告banner导航nav子导航subnav菜单menu子菜单submenu搜索search滚动scroll页面主体main内容content标签页tab文章列表list信息msg提示技巧tips栏目标题title指南guide服务service热点hot新闻news下载download注册reg（register）状态status按钮btn投票vote4.常用简写命名规则： bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多Tit: 标题栏Spr :空行bdr：边w：宽h：高t / d / mid / l / r：上 / 下 / 中 / 左 / 右fl /fr float:left/float:right二 网站布局和样式文件命名 1. 网站样式文件命名和样式从属关系 1) 全局CSS文件：global.css ，其中global.css包括cssreset（用来清除默认值）、全局性的一些属性值的定义2) 全局布局共用CSS文件：layout （网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS3) 频道私有CSS文件：home.css （当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack）2. 网站布局： 网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。 两栏布局：主容器宽度为700px 副容器宽度为240px 三栏布局：依次为190px、510px、240px； 3. 网站栏目： web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义： 1) 全局框架通用样式 2) 页眉 3) 导航 4) 搜索 5) 页脚 6) 内容列表通用样式7) 图片通用样式8) 表单通用样式 4. 频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。 三 XHTML文档结构1.Xhtml基本框架结构 图书门户 2.Xhtml标准的Doctype声明:图书门户采用XHTML1.0 Transitional标准 3. 编码声明:默认使用gb2312编码。 4. meta，title等处填写相应的关键词和描述: 标题 5.基本结构: #header #globalNav #logo #loginBar #mainNav #search #main #lay_1: (布局容器1) #col_1 (内容块1) #col_2 (内容块2) #lay_2: (布局容器2) #col_3 (内容块3) #col_4 (内容块4) #footer: #link #copyright 四 Web页面切图和CSS注意事项 1. Web页面切图 1) Web页面的切图类型可以归纳为背景（bg）列表项目的符号（li）内容中插入的图片（pic）按钮（btn）图标等几种形式（ico）2) 把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。 3) 除页面头部大图保存格式为JPG外，其他图片一律采用gif格式 2. CSS相关事项： 1) 所有的xhtml代码小写 2) 每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上/。 如：、 3) 所有的属性必须用引号 括起来 4) 文档类型必须声明，禁止文档类型乱用 5) 所有和&特殊符号用编码表示 6) 必须正确使用代码缩进，缩进时使用tab(键盘中的TAB键)，禁止无缩进、乱缩进，禁止使用空格缩进 7) CSS加载的背景图片要预定义宽度和高度，路径采用绝对路径可以直接从访问者计算机缓存中加载，提高页面加载速度。 8) 要尽可能做到表现与结构完全分离，代码中不涉及到表现元素，如style、fontbgColor、border、b。 9) 到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。 10) Font的缩写为：样式 粗细 大小 行高 字体 （font:italic bold 12px/30px “simsun”） 11) class和id选择器，id只能在同一页面中不能重复适用 12) 给页面的布局和重要的区块加上注释,如： 13) 给图片加上alt标签，利于搜索引擎的查询。14) 所有的标签必须进行合理的嵌套。 15) 页面的实现过程中出现的问题是有规律的几种：3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。 16) 尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码的重复定义。 17) 网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行，把版式破坏，这样我们就要参考以下样式：word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。 18) 文字过长要出现省略号样式如下： white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 19) 一个完整的表单应该包括： 20) 页面上的列表元素除了ul ol外，我们还可以采用dl dt dd组合。 21) 合理采用多重样式定义可以有效的增加样式的重用性。 22) 我们要清楚那些标签是块状元素和内联元素。一般我们可以把css元素分为block（块状）和inline（内联）。熟悉这些元素属性有利于我们深入理解css。 23) 按照推荐Css属性书写顺序：显示属性： display | visibility list-style : list-style-type | list-style-position | list-style-image positiontop | right | bottom | leftz-index clear float 自身属性： width max-width | min-width height max-height | min-height overflow | clip margin : margin-top | margin-right | margin-bottom | margin-left padding : padding-top | padding-right | padding-bottom | padding-left outline : outline-color | outline-style | outline-width border background : background-color | background-image | background-repeat | background-attachment | background-position 文本属性： Colorfont : font-style | font-variant | font-weight | font-size | line-height | font-family font : caption | icon | menu | message-box | small-caption | status-bar text-overflow text-align text-indent line-height white-space vertical-align cursor