网站建设CSS命名规范_第1页
网站建设CSS命名规范_第2页
网站建设CSS命名规范_第3页
网站建设CSS命名规范_第4页
网站建设CSS命名规范_第5页
已阅读5页,还剩2页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、众成新项目部CSS样式表及XHTML命名书写规范 编写者:黄挽审核者:黄挽批准者:黄挽 众成技术开发有限公司版本历史记录日期版本更改描述作者2007-03-051.0初始版本黄挽2008-03-082.0修正版本黄挽2010-07-223.0修正版本黄挽一、DTD声明DTD (Document Type Definition)是一套关于标记符的语法规则。它是XML1.0版规格的一部分,是XML文件的验证机制,属于XML文件组成的一部分。 DTD 是一种保证XML文档格式正确的有效方法,可以通过比较XML文档和DTD文件来看文档是否符合规范,元素和标签使用是否正确。页面顶部一律使用标准DTD声明

2、<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml">二、指定语言及字符集如无特殊约定,默认一律采取UTF-8编码<meta http-equiv="Content-Type" content="text/html;

3、 charset=utf-8" />三、调用样式表:3.1内部样式表调用:只能用于独立页面如login.aspx,leftMenu.aspx所使用样式仅为一个页面所引用页面内嵌法:就是将样式表直接写在页面代码的head区。如:<style type=”text/css”><! body background : white ; color : black ; > </style>3.2外部样式表调用:外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。<link rel=”stylesheet” r

4、ev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />理论上讲除了较简单的站点或软件,一个应用应该由多张CSS表组成,如:base.css 全局使用的css表 (基本标签及UL,Li等)必须form.css 表单各元素使用的css表 必须font.css 字体样式使用的css表,如可以用于定义各种Title 必须themes.css 主题样式表index.css 首页特殊使用的css表四、样式表命名规范采用驼峰命名法,首单词小写,次单词首位大写。名称不可以使用下划线、标点符号、其它特殊符号、中文等,原则上项目

5、名称不超出20个字符,以英文单词中的名词为准,不使用拼音。如picBox, titleBlue,font14px,titleRed,btnSubmit4.1 常用元素的命名页头:header标志:logo头部广告:banner其他广告:msgAd菜单:menu 子菜单:submenu导航:nav 子导航:subnav登录条:loginbar侧栏:sidebar搜索:search页面主体:main内容:content容器: container标签页:tab文章列表:listArticle产品列表:listProduct提示信息:msg栏目标题:title小技巧:tips指南:guild服务:se

6、rvice热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner友情链接:friendlink页脚:footer版权:copyright外套: wrap注释: note当前的current五、样式表及XHTML书写规范1. 先书写基本标签类body,a,table,td,注意A标记,统一只定义a 与a:hover2. 先对整体元素的边距与间距进行格式化*padding:0px;margin:0px;3. 尽量使用简写语法,如:.concentNewsborder:1px solid #eee;4. 使用注释(特

7、殊地方使用注释 /*注释内容*/)5. 注意标签的容器规范注意标签结构与容器关系,以及缩进,例<div id=”head”> <h1></h1><h1></h1> <ul> <li></li><li></li></ul></div> 错误的写法:1.<span><div id=”head”></div></span> 2. <li><h1></h1></li>3. <li><p></p></li>6. 注意Padding与Margin区别Paddding用于扩展所定义区域的宽度与高度(容器总高宽等于定义值+padding),而margin是相对对齐。7. 注意子容器中有浮动的父容器使用clearfix,如:/* Clear Fix */.clearfix:aftercontent:"."display:block;height:0;clear:both;visibility:hidden;.clear

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论