XHTML&CSS标准化文档_html/css_WEB-ITnose

定义文档类型：过渡型（Transitional）

声明命名空间

语法规范

1、 XHTML对大小写敏感，所有的元素和属性都必须小写。

2、 所有的属性必须用引号””括起来。

3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套

4、 所有的属性必须被赋值

5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<”

6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。

7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。

代码的注释规范举例

CSS文档统筹(产品类)

1、 Reset样式表：重设浏览器的样式

2、 Base样式表：页面公共的布局样式

3、 Module样式表：小模块、小版块样式表的制定。

CSS文档统筹(发布页面类)

1、 重设浏览器的样式、页面公共的布局样式、小模块、小版块样式表，全部写入style.css一个文件中。

代码的注释规范

/*d1注释说明*/

#id1{ }

#id1 .class{ }

/* id2注释说明*/

#id2{ }

#id2 .class{ }

按主次关系组织

第一步：如果需要的话，先声明布局属性（确定元素的显示），例如这些属性：

float display position …

第二步：如果需要的话再声明盒模型属性（确定元素的形状），例如这些属性：

width height margin padding border background…

第三步：如果需要的话最后声明版式属性（确定元素的内容显示），例如这些属性：

color font font-size font-weight text-align…

CSS命名规则

1、 要区分大小写：在命名CLASS和ID时全部使用小写字母

2、 要注意合法性：CSS命名以字母开头，可以连接数字、字母、下划线、连接符。

3、 语义定义明确易懂：CSS命名要词必达意，名称要反映用途和相关信息，同时要简短，不要附带任何冗余信息。

布局常用名称：

名称

说明

名称

说明

wrap

外套

container

容器

site

站点

content

内容块

nav

导航

column

栏

main

主体

left

左

layout

布局

center

中

sidebar

侧栏

right

右

模块常用名称：

名称

说明

名称

说明

logo

标志

banner

广告条

login

登录

loginbar

登录条

regsiter

注册

search

搜索

shop

购物车

list

列表

tool/toolbar

工具条

service

服务

tab

标签页

hot

热点

source

资源

news

新闻

site_map

网站地图

download

下载

about_us

关于我们

copyright

版权

partner

合作伙伴

friendlink

友情链接

guide

指南

vote

投票

joinus

加入

header

页眉

footer

页脚

homepage

首页

类常用名称：

名称

说明

名称

说明

title

标题

current

当前

label

标签

spec

特别

note

注释

red

红色

summary

摘要

submit

提交

msg

提示信息

textbox

文本框

status

状态

drop

下拉

tips

小技巧

btn

按钮

scroll

滚动

form

表单

icon

图标

count

统计

arr/arrow

箭头

crumb

导航

cor/corner

转角/圆角

breadcrumb

导航提示

导航常用名称：

名称

说明

名称

说明

nav

导航

menu

菜单

mainnav/globalnav

主导航

topnav

顶导航

subnav

子导航

sidebar

边导航

leftsidebar

左导航

rightsidebar

右导航

submenu

子菜单

dropmenu

下来菜单

sidebaricon

边导航图标

menucontainer

菜单容器

文件常用名称：

名称

说明

名称

说明

master.css

主要文件

themes.css

主体文件

layout.css

布局、版面文件

base.css

基本公共文件

columns.css

专栏文件

module.css

模块文件

font.css

文字样式文件

forms.css

表单文件

print.css

打印样式文件

mend.css

补丁文件

CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

:focus { outline: 0; }

a img, iframe { border: none; }

ol, ul { list-style: none; }

input, textarea, select, button { font-size: 100%; font-family: inherit; }

select { margin: inherit; }

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */

ol { margin-left:2em; }

ClearFix的CSS代码

/* == clearfix == */

.clearfix:after { /*/*/ content: "."; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; }

/* IE7 hack */

.clearfix { display: inline-block; }

/* IE-mac, IE5, IE6 */

* html .clearfix { height: 1%; }

.clearfix { display: block; }

ClearFix的用法

class="clearfix">

文档结构规范

Images命名规范

1、CSS切图文件按照下列命名规范：（XXX为自定义名称）

l b01.png

l b02.png

l …

l bN.png

2、页面中的其他照片类图片引用绝对地址的图片，不做切图处理。

Images切图规范

1、 采用jpg、gif、png作为切图输出格式。

2、 切图图片大小根据具体项目制定，要求尽量优化图片。

3、 CSS背景图片输出为PNG 8。PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，都应该用 PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。

4、 同类型的图片进行CSS Sprites优化。减少http请求。

Javascript规范

1、 统一采用jquery框架，建立常用JavaScript库和使用文档

2、 Js命名规范：jquery-XXXX.pack.js（XXXX为自定义功能模块名称）