《HTMLCSS编写规范》由会员分享，可在线阅读，更多相关《HTMLCSS编写规范（10页珍藏版）》请在金锄头文库上搜索。
1、 让每一名学员高薪就业 HTML+CSS 编写规范在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于 Web 项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。1、CSS 样式文件的命名建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：主要 main.css 文字样式 font.css表格 table.css 主题 themes.css打印 print.css 补丁 mend.css在项目初期，会把不同类别的样式放于不同的 CSS 文件，是为了 CSS 编写和调试的方便，
2、在项目后期会为了网站性能上的考虑会整合不同的 CSS 文件到一个 CSS 文件，必要时可压缩。2、 CSS 选择符的命名所有选择符必须有小写英文字母或“_”下划线组成，样式名必须是表示该样式的大概含义（禁止出现如 Div1、div2、Style1），参考后面的“样式命名参考”。对 CSS 选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID 选择器（ ID 是用于 JavaScript 的编写）。如：li span td.fancy inputtype=text当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo dcrm_logo_ico3、图
3、片的命名与书写图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。设计人员在 PS中保存图片时，请使用“文件”“ 存储为 Web 和设备所用的格式”。 让每一名学员高薪就业 广告 banner 标志 logo链接的小图片 button 装饰图 pic标题的图片 title banner_sohu.png 、banner_sina.png 、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif
4、、pic_people.jpg4、CSS 注释书写规范4.1 提示和标签信息注释这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。.searchborder:1px solid #fff; /*Border Color*/ 注意：注释内容和前面样式语句间有 3 个空格，后面 1 个空格4.2 修改样式注释（时间和相关人员）/*_Styles Updated: Thu 4.8.08 5:15 p.m. Author: hour-*/4.3 文档结构/*_Header-*/ 让每一名学员高薪就业 .searchborder:1p
5、x solid #fff; /*Border Color*/color:#333; /*Color*/*_Menu-*/.menul_ulborder:1px solid #fff; /*Border Color*/注意：相对独立的 2 段内容之间空 1 行。5、 CSS 布局编码标准和建议5.1 建立样式表索引样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的 CSS 注释文本写在 main.css 中。给出该 CSS 文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）。/*-*Filename: main.css*Descri
6、ption: Global CSS*Version: 1.0.0(2009-12-28)YYYY-MM-DD*Website: http:/=STRUCTURE:= = = =*Page width: 980px*Number of columns: 2-*/ 让每一名学员高薪就业 5.2 命名锚点的使用命名锚点是用来规划整个 CSS 文件结构的（就好像书签一样），从而使整个 CSS 文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS 本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该 CSS 节。*=S
7、TRUCTURE:=$_header Header Definitions$_menu Global Site$_content Everything within the content-*/*_header-*/.Header CSS Definitions./*_menu-*/.Header CSS Definitions.5.3 建立良好的 CSS 编码顺序最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式，比如下面这个例子：p color: red; background: yellow;p color: green;以上的段落最终将呈现绿色的字体，并带有黄
8、色的背景，这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了，至于黄色背景为何没有消失，那是因为第二个 p 的定义中并没有与之冲突的定义，因此它还是有效的。 让每一名学员高薪就业 5.4 合适的缩写在 CSS 中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS 缩写会使CSS 文档更加干净、简洁；缩写语法参考相关章节。5.5 CSS 图像拼合(即 CSS Sprites 技术)CSS Sprites 技术：将用到的所有小图片（图标）合并为一张图片，使用 css 背景属性，来控制图片的显示位置和方式。CSS Sprites 技术的应用可以大大减少 HTTP 请求的
9、次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。5.6 CSS 组合和嵌套CSS 组合你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。h2 color: red; .w3cbbs color: red; .w3cbbs_52css color: red; 则你可以这样写 h2,.w3cbbs,.w3cbbs_52css color: red; CSS 嵌套CSS 结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。.top background-color: #ccc; padding: 1em
10、;.top h1 color: #ff0; .top p color: red; font-weight: bold; 六、常用 CSS 选择符命名参考导航 nav 页头 header 让每一名学员高薪就业 主导航 mainnav 页面主体 main顶导航 topnav 内容 content子导航 subnav 页脚 footer菜单 menu 版权 copyright子菜单 submenu 登陆 login标志 logo 侧栏 sidebar广告 banner 搜索 search滚动 scroll 标签页 tab小技巧 tips 合作伙伴 partner加入 joinus 标题 title注
11、册 regsiter 指南 gUIld新闻 news 下载 download按钮 button 状态 status服务 service 投票 vote注释 note 友情链接 friendlink提示信息 msg 注意：命名方式使用“类别_功能”的方式（.bar_news .bar_product）。 让每一名学员高薪就业 七、DIV+CSS 页面的布局Table 布局由于代码冗余已经过时，所以 HTML 页面普遍采用代码简洁 Div+CSS 的布局，HTML 页面大体可分为 top、main 和 bottom，在 main 中又可以为 left 和right，这些 CSS 的名必须是有意义的
12、名字。如下面代码：目前 table 主要是用来展现数据表，反正在布局中尽量少用 table。八、HTML 代码书写规范页面的 HTML 代码书写必须符合 XHTML 规范，XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。XHTML 与 HTML 的不同：1. XHTML 元素必须被正确地嵌套。2. XHTML 元素必须被关闭。 让每一名学员高薪就业 3. 标签名必须用小写字母。4. XHTML 文档必须拥有根元素。对于第 1 点：最有可能发生错误是在与标签的结合，的直接子元素只能为：、和，而 、和的直接子元素只能为：，而的直接子元素只能为和 ，在和才可以放其它标签。此外相类似的标签有
