极速PE官网 > 帮助中心 >
规范书写CSS之九大要素
作者：pe系统 2013-09-23
你们知道怎样来书写CSS书写吗?接下来WinPE改密码教你规范书写CSS的方法:
第一. 选择DOCTYPE：
XHTML 1.0 给了三类DTD声明可以选择：
过渡的(Transitional):要求很宽松的DTD，其允许您继续使用HTML4.01的标识(可是得符合xhtml的写
法)。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严格的(Strict):要求严格之DTD，您无法使用所有表现层的标识与属性，比如<br>。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):特别针对框架页面设计使用的DTD，若您的页面里包括有框架，得使用这种
DTD。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情况自然是严格的DTD，可对于咱们大部分刚接触web标准的设计师而言，过渡的DTD(XHTML
1.0 Transitional)是如今理想选择(包含本站，使用的也为过渡型DTD)。由于此类DTD还允许咱们使用表现
层的标识、元素与属性，也比较容易通过W3C的代码校验。
第二. 指定语言和字符集：
给文档指定语言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
为了被浏览器正确解释与通过W3C代码校验，全部XHTML文档均得声明它们所使用的编码语言；
如：
常用的语言定义：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对旧版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为了提高字符集，最好使用“utf-8”。
第三. 调用样式表：
外部样式表调用：
页面内嵌法：即是把样式表直接写在页面代码的head区。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法：把样式表写在一个独立的.css文件里，随后在页面head区用如以下代码调用。
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
在符合web标准的设计里，建议使用外部调用法，能够不更改页面只更改.css文件而改变页面的样式。
若全部页面均调用同一个样式表文件，则更改一个样式表文件，能够更改全部文件的样式。
第四、选用恰当的元素：
按照文档的结构来选择HTML元素，而非按照HTML元素的样式来选择。比如，使用P元素来包括文字
段落，而非为了换行。若在创建文档时无法找出适当的元素，那么能够考虑使用通用的div 或是span；
防止过渡使用div与span。少量、适当的使用div与span元素能够让文档的结构更加清晰合理而且易于使
用样式；
尽量少地使用标签与结构嵌套，如此不仅能够让文档结构清晰，同时也能够保持文件的小巧，在提
升用户下载速度的同时，也易于浏览器对文档的解释和呈视；
第五、派生选择器：
能够使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也让结构更加的清晰化，如
：
.mainMenu ul li {background:url(images/bg.gif;)}
第六、辅助图片用背影图处理：
此处的”辅助图片”是指那些非作为页面要表达的内容的一部分，而只是用于修饰、间隔、提醒的图片
。把它做背影图处理，能够在不改动页面的情形下有CSS样式来进行改动，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
第七、结构和样式分离：
在页面里仅写入文档的结构，而把样式写于css文件里，用外部调用CSS样式表来完成结构和样式的
分离。
第八、文档的结构化书写：
页面CSS文档均应使用结构化的书写方式，逻辑清晰便于阅读。如：
<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>
/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/
第九、鼠标手势：
在XHTML标准里，hand仅被IE识别，当需要把鼠标手势转换成“手形”时，那么把“hand”更换成“pointer”，
也就是“cursor:pointer;”
第一. 选择DOCTYPE：
XHTML 1.0 给了三类DTD声明可以选择：
过渡的(Transitional):要求很宽松的DTD，其允许您继续使用HTML4.01的标识(可是得符合xhtml的写
法)。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严格的(Strict):要求严格之DTD，您无法使用所有表现层的标识与属性，比如<br>。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):特别针对框架页面设计使用的DTD，若您的页面里包括有框架，得使用这种
DTD。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情况自然是严格的DTD，可对于咱们大部分刚接触web标准的设计师而言，过渡的DTD(XHTML
1.0 Transitional)是如今理想选择(包含本站，使用的也为过渡型DTD)。由于此类DTD还允许咱们使用表现
层的标识、元素与属性，也比较容易通过W3C的代码校验。
第二. 指定语言和字符集：
给文档指定语言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
为了被浏览器正确解释与通过W3C代码校验，全部XHTML文档均得声明它们所使用的编码语言；
如：
常用的语言定义：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对旧版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为了提高字符集，最好使用“utf-8”。
第三. 调用样式表：
外部样式表调用：
页面内嵌法：即是把样式表直接写在页面代码的head区。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法：把样式表写在一个独立的.css文件里，随后在页面head区用如以下代码调用。
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
在符合web标准的设计里，建议使用外部调用法，能够不更改页面只更改.css文件而改变页面的样式。
若全部页面均调用同一个样式表文件，则更改一个样式表文件，能够更改全部文件的样式。
第四、选用恰当的元素：
按照文档的结构来选择HTML元素，而非按照HTML元素的样式来选择。比如，使用P元素来包括文字
段落，而非为了换行。若在创建文档时无法找出适当的元素，那么能够考虑使用通用的div 或是span；
防止过渡使用div与span。少量、适当的使用div与span元素能够让文档的结构更加清晰合理而且易于使
用样式；
尽量少地使用标签与结构嵌套，如此不仅能够让文档结构清晰，同时也能够保持文件的小巧，在提
升用户下载速度的同时，也易于浏览器对文档的解释和呈视；
第五、派生选择器：
能够使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也让结构更加的清晰化，如
：
.mainMenu ul li {background:url(images/bg.gif;)}
第六、辅助图片用背影图处理：
此处的”辅助图片”是指那些非作为页面要表达的内容的一部分，而只是用于修饰、间隔、提醒的图片
。把它做背影图处理，能够在不改动页面的情形下有CSS样式来进行改动，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
第七、结构和样式分离：
在页面里仅写入文档的结构，而把样式写于css文件里，用外部调用CSS样式表来完成结构和样式的
分离。
第八、文档的结构化书写：
页面CSS文档均应使用结构化的书写方式，逻辑清晰便于阅读。如：
<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>
/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/
第九、鼠标手势：
在XHTML标准里，hand仅被IE识别，当需要把鼠标手势转换成“手形”时，那么把“hand”更换成“pointer”，
也就是“cursor:pointer;”