htmlcss前端编码规范

《htmlcss前端编码规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML+CSS界面开发标准7/76/24/2021HTMLCSS编码规范2012-05-08目录CSS样式文件的命名2CSS选择符的命名2常用CSS选择符命名参考2Id和class的区别3CSS的优先级4不需要重复定义可继承的值4多重CSS样式定义，属性追加重复最后优先原则4导入(Import)和隐藏CSS5CSS链接规范5CSShack5JS调用规范5HTML+CSS页面布局6HTNL代码书写规范6字体规范7图片的分类及命名规则7软件UI界面开发标准7/76/24/2021HTML+CSS界面开发标准7/76

2、/24/2021任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。CSS样式文件的命名简历样式表文件时看，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：主要main.css文字样式font.css表格table.css主题themes.css打印print.css链接link.css普通样式(全局，文字)Css.css框架布局layout.css在项目

3、初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件。CSS选择符的命名所有选择符必须有小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，要用有意义的单词或缩写组合来命名，让人看命知其意，节省查找样式的时间。样式名必须是表示样式的大概含义（禁止出现如Div1、Div2、Style1….），参考下面的“样式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它

4、们的组合使用，严禁使用ID选择器（ID是用于javascript的编写）。如：lispan{…}td.fancy{…}input[type="text"]{…}当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo{…}dcrm_logo_ico{…}常用CSS选择符命名参考导航nav头部header容器Container/box底部footer滚动scroll页面主体main主导航mainnav内容content软件UI界面开发标准7/76/24/2021HTML+CSS界面开发标准7/76/24

5、/2021顶导航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友

6、情链接friendlink提示信息msg注意：命名方式使用“类别_功能”的方式（.bar_news{}.bar_product{}）。Id和class的区别1、在样式表中定义一个样式的时候，可以定义id也可以定义class。id一个页面只可以使用一次，class可以多次引用。2、Id是一个标签，用于区分不同的结构和内容，就像你的名字，如果一个屋子有2个人同名，就会出现混淆。3、class是一个样式，可以套在任何结构和内容上。4、概念上说是不一样的，Id是先找到结构/内容，在给它定义样式、class是先定义好样式，

7、再套给多个结构/内容。也就是说建议在写xhtml+css时，如果唯一的结构定位的就用id，否则就用class。5、ID方法：#test{color:#333333}，在页面中调用内容