XHTML&CSS Standardization Document_html/css_WEB-ITnose-HTML Tutorial-php.cn

XHTML&CSS标准化文档

20100329更新

目录

第一章 XHTML标准... 2

一、 XHTML文档结构... 2

1、定义文档类型：... 2

2、声明命名空间：... 2

3、编码类型：... 2

二、 XHTML书写规范... 3

1、语法规范：... 3

2、注释规范：... 3

第二章 CSS标准化及CSS框架... 4

一、 CSS文档统筹与编码规范... 4

1、 CSS文档统筹：... 4

2、 CSS书写的规范：... 5

3、属性的组织：... 6

4、 A属性排列顺序：... 6

5、 CSS命名规则：... 7

6、 CSS命名方法：... 7

二、 Reset CSS. 10

三、清除浮动方法... 11

第三章通用规范... 12

一、文档结构和命名规范... 12

1、 Style文件命名规范：... 13

2、 Images规范：... 13

3、 Javascript规范：... 14

第四章项目制作完成... 15

一、代码的优化（制作部分）... 15

二、夸浏览器兼容性... 16

1、测试代码在各主流浏览器兼容性：... 16

三、项目的上传... 16

第五章页面制作中的SEO规范... 17

一、页面制作中的SEO规范... 17

附录：设计规范... 18

一、页面设计尺寸... 18

二、字体规定... 18

三、字号规定... 18

四、行高规定... 18

五、图片尺寸规范... 19

六、文本颜色... 20

七、切图规则... 20

第一章 XHTML标准

一、 XHTML文档结构

1、定义文档类型：

过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。

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

2、声明命名空间：

xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。

声明命名空间

3、编码类型：

编码类型：GB2312

二、 XHTML书写规范

1、语法规范：

语法规范

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

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

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

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

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

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

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

2. Comment specifications:

代码的注释规范举例

Examples of code comment specifications

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

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

Chapter 2 CSS standardization and CSS framework

1. CSS document coordination and coding standards

1. CSS document coordination:

代码的注释规范

/*d1注释说明*/

#id1{ }

#id1 .class{ }

/* id2注释说明*/

#id2{ }

#id2 .class{ }

CSS Document Coordination (Product Category)

1. Reset style sheet: Reset Set the browser style

按主次关系组织

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

float display position …

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

width height margin padding border background…

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

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

2. Base style sheet: the common layout style of the page

3. Module style sheet: the formulation of small module and small section style sheets.

CSSDocument coordination (publish page class )

1. Reset the browser style, page common layout style, small modules, small The section style sheet is all written into one file called style.css.

2. CSS writing specifications:

Each section is explained with comments, which provides great convenience for future maintenance.

Code comment specifications

/*d1 comment description*/

#id1{ }

#id1 .class{ }

CSS命名规则

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

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

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

/* id2 comment description*/

#id2{ }

#id2 .class{ }

布局常用名称：
名称	说明	名称	说明
wrap	外套	container	容器
site	站点	content	内容块
nav	导航	column	栏
main	主体	left	左
layout	布局	center	中
sidebar	侧栏	right	右

3. Organization of attributes: According to the importance of attributes in layout, it is recommended to declare layout attributes first, then define box model attributes, and finally define typesetting attributes.

Organize by priority relationship

First step : If necessary, first declare layout attributes (determine the display of elements), such as these attributes: float display position … Step 2: Declare the box model attributes (determine the shape of the element) if necessary, such as these attributes: width height margin padding border background… Step 3: Finally declare the layout attributes (to determine the content display of the element) if necessary, such as these attributes: color font font-size font-weight text-align…

4. The order of A attributes: The attributes of A are as follows: a{} a:link{} a:visited{} a:hover{} a:active{} This sorting order 5. CSS naming rules: CSS naming rules should follow certain rules. Simply put, they need to be intuitive, concise, and clear at a glance to facilitate later maintenance and comminicate.

CSSNaming Rules

1. Be case-sensitive: use all lowercase letters when naming CLASS and ID 2. Pay attention to legality: CSS names start with letters and can be connected with numbers, letters, Underline, connector. 3. The semantic definition is clear and easy to understand: CSS naming keywords must convey the meaning, and the name should reflect the purpose and related information, and should be brief and do not include any redundant information.

6. CSS naming method: The following table shows common naming examples: Coat td>

Common layout names:
Name	Description	Name	Description
wrap	container	Container
site	site	content	content block
nav	navigation	column	column
main	main	left	left
layout	layout	center	center
sidebar	sidebar	right	Right

td>

模块常用名称：
名称	说明	名称	说明
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	首页

Module common name:

Name

类常用名称：
名称	说明	名称	说明
title	标题	current	当前
label	标签	spec	特别
note	注释	red	红色
summary	摘要	submit	提交
msg	提示信息	textbox	文本框
status	状态	drop	下拉
tips	小技巧	btn	按钮
scroll	滚动	form	表单
icon	图标	count	统计
arr/arrow	箭头	crumb	导航
cor/corner	转角/圆角	breadcrumb	导航提示

Description

Name

Description

logo

banner

advertising banner

loginbar

regsiter

shop

Shopping cart

list

tool/toolbar

Toolbar

service

Service

tab

hot

Hotspot

source

Resource

news

site_map

Sitemap

download

Download

about_us

About us

partner

Partner

friendlink

Friendly link

guide

Guide

vote

Vote

joinus

Join

header

Header

footer

homepage

Homepage

td> tr>

Class commonly used Name:
Name	Description	Name	Description
title	title	current	current
label	label	spec	Special
note	Annotations	red	red
summary	Summary	submit	Submit
msg	Prompt message	textbox	text box
status	status	drop	drop
tips	Tips	btn	Button
scroll	scroll	form	form
icon	icon	count	statistics
arr/arrow	Arrows	crumb	Navigation
cor/corner	Corner/Rounded Corner	breadcrumb	Navigation Tips

导航常用名称：
名称	说明	名称	说明
nav	导航	menu	菜单
mainnav/globalnav	主导航	topnav	顶导航
subnav	子导航	sidebar	边导航
leftsidebar	左导航	rightsidebar	右导航
submenu	子菜单	dropmenu	下来菜单
sidebaricon	边导航图标	menucontainer	菜单容器

Navigation common name:

文件常用名称：
名称	说明	名称	说明
master.css	主要文件	themes.css	主体文件
layout.css	布局、版面文件	base.css	基本公共文件
columns.css	专栏文件	module.css	模块文件
font.css	文字样式文件	forms.css	表单文件
print.css	打印样式文件	mend.css	补丁文件

Name

Description

Name

CSS Reset

: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; }

Description

nav

Navigation

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; }

mainnav/globalnav

Main navigation

topnav

Top navigation

subnav

sidebar

Side navigation

leftsidebar

left navigation

rightsidebar

right navigation

submenu

Submenu

dropmenu

drop menu td>

sidebaricon

side navigation icon

menucontainer

Menu container

Common file names:
Name	Description	Name	Description
master.css	main file	themes.css	Main file
layout.css	Layout, layout files	base.css	Basic public files
columns.css	column file	module.css	Module file
font.css	Text style file td>	forms.css	Form file
print.css	Print style file	mend.css	Patch file

2. Reset CSS CSS Reset refers to resetting the style of the browser. In various browsers, some default values are used for CSS selectors. For example, when h1 is not set to a value, a certain size is displayed. But not all browsers use the same values, so CSS Reset is used to make the style of the web page behave consistently in each browser. Code for CSS Reset.

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; }

It is recommended to keep the Reset CSS code as reset.css uploaded to the server. All design and production personnel shall refer to this document uniformly. Administrators can maintain and update this file when needed. (Publish the class page and write the CSS Reset code in style.css.) 3. Clear the float method Use the ClearFix method in the code to clear the float. Unlike the traditional method of clear floating, useless empty divs will be added to the page and destroy the structure of the document. How to use ClearFix, when you need to clear the floating parent menu, add the class attribute clearfix

ClearFix CSS code

/* == 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; }

class="clearfix">

ClearFix的用法

class="clearfix">

ClearFix usage

文档结构规范

XHTML&CSS Standardization Document_html/css_WEB-ITnose

一、 XHTML文档结构

1、定义文档类型：

2、声明命名空间：

3、编码类型：

二、 XHTML书写规范

1、语法规范：

2. Comment specifications:

#id2{ }

1. Document Structure and Naming Specifications

2. Images specification:

1. Code optimization (production part)

XHTML&CSS Standardization Document_html/css_WEB-ITnose

一、 XHTML文档结构

1、 定义文档类型：

2、 声明命名空间：

3、 编码类型：

二、 XHTML书写规范

1、 语法规范：

2. Comment specifications:

#id2{ }

1. Document Structure and Naming Specifications

2. Images specification:

1. Code optimization (production part)

1、定义文档类型：

2、声明命名空间：

3、编码类型：

1、语法规范：