HTML+CS前端编码规范.docVIP

HTML CSS编码规范 2012-05-08 目录 CSS样式文件的命名 2 CSS选择符的命名 2 常用CSS选择符命名参考 2 Id和class的区别 3 CSS的优先级 4 不需要重复定义可继承的值 4 多重CSS样式定义，属性追加重复最后优先原则 4 导入 Import 和隐藏CSS 5 CSS链接规范 5 CSS hack 5 JS调用规范 5 HTML+CSS页面布局 6 HTNL代码书写规范 6 字体规范 7 图片的分类及命名规则 7 任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于web 项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。 CSS样式文件的命名 简历样式表文件时看，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里： 主要 main.css 文字样式 font.css 表格 table.css 主题 themes.css 打印 print.css 链接 link.css 普通样式 全局，文字 Css.css 框架布局 layout.css 在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件。 CSS选择符的命名 所有选择符必须有小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，要用有意义的单词或缩写组合来命名，让人看命知其意，节省查找样式的时间。样式名必须是表示样式的大概含义（禁止出现如Div1、Div2、Style1….），参考下面的“样式命名参考”。 对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID选择器（ID是用于 javascript的编写）。 如：li span … td.fancy … input[type text] … 当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo … dcrm_logo_ico … 常用CSS选择符命名参考 导航 nav 头 部 header 容 器 Container/box 底 部 footer 滚动 scroll 页面主体 main 主导航 mainnav 内容 content 顶导航 topnav 标签页 tab 子导航 subnav 版权 copyright 菜单 menu 登录 login 子菜单 submenu 列 表 list 子菜单内容 subMenuContent 侧 边 栏 sidebar 标志 logo 搜索 search 广告 banner 图 标 icon 页面中部 mainbody 表格 table 小技巧 tips 列 定 义 olumn_1of3 三列中的第一列 加入 joinus 标题 title 注册 regsiter 指南 guid 新闻 news 下载 download 按钮 button 状态 status 服务 service 投票 vote 注释 note 友情链接 friendlink 提示信息 msg 注意：命名方式使用“类别_功能”的方式（.bar_news .bar_product ）。Id和class的区别 在样式表中定义一个样式的时候，可以定义id也可以定义class。id一个页面只可以使用一次，class可以多次引用。 Id是一个标签，用于区分不同的结构和内容，就像你的名字，如果一个屋子有2个人同名，就会出现混淆。 class是一个样式，可以套在任何结构和内容上。 概念上说是不一样的，Id是先找到结构/内容，在给它定义样式、class是先定义好样式，再套给多个结构/内容。也就是说建议在写xhtml+css时，如果唯一的结构定位的就用id，否则就用class。 ID方法：#test color:#333333 ，在页面中调用 div id test 内容 ID方法：#test color:#333333 ，在页面中调用 div id test 内容 CSS的优先级 行内样式 inline style 》ID选择符 》样式（class），伪类 psenudo-class 和属性（attribute）选择符 》类别 type ，伪对象 pseudo-element 解释： 1 .内嵌样式 inline style :元素的style属性，比如 div style color:red; ，其中的color:red;就是行内样式。 2 .ID选择符，元素的id属性，比如 div id content