HTML
与
CSS
在应用中的一些规范
一、
HTML
部分
1、
所有标鉴及属性都要求小写。
2、
为了易读性,代码要求采用
tab
来进行缩进方式缩写。千万不要用空格。
3、
尽量多地编写一些注释。例如:
<!-- end of hotelListHotelAddress -->
4、
在把
expedia
网站的
table
形式转为
div
时,要求有一层最外层的
div
能包含所有的内容,并且把这个
div
的
ID
名称定为文件的名称。
5、
Div
对应层要一层一层配对关闭好。
6、
在使用浮动
float
进行左右排列时,一定要在最右边的那个
div
后面清除浮动。代码如下;
<div class="clearer"></div>
7、
避免用一两个字符来做为
id
及
class
的名称。
8、
对于
img
的属性
alt,title
都要同时写上,值一样。
9、
对于
img,br,input
等标签,要自我关闭。例如:
<img src="images/tip_topRt.gif" class="imgSrc7X20"/>
10、
不要用
<b>
标签,可用
css
实现,实在要用的话用
<strong>
代替。
11、
我们现在很少用
<font>
标签,我一般用
<span>
来替代。
12、
尽量少用
来产生间距。可用
css
中的
margin
来实现。
13、
当在写图片之后紧接着一段文本的代码时,要求这两段
xhtml
代码写在一行。因为在分成两行时,会在图片与文本间产生不必要的空隙。例如:
<img src="images/tip_icon.gif"/>What are ThankYou Points?
13
、
<br>
要统一写成
<br class=”clearer”/>
14
、不要在代码中加入
javascript
事件,比如
onclick
15
、代码中也不要有任何的样式描述,例如:
<div width=20 height=60>
<div style=
“
width:20px;height:60px
”
>
这些写法都是错误的,得把这些东西提取到
css
中,正确的写法:
<div class=”XX”>
二、
CSS
部分
1、
使用
css
缩写。使用缩写可以帮助减少你
CSS
文件的大小,更加容易阅读。比如:
#000000
可以缩写为
#000;#336699
可以缩写为
#369;
Margin-top:1px; margin-right:0px; margin-bottom:2px; margin-left:1px;
可缩写为
margin:1px auto 2px 1px;
顺序:上
-
右
-
下
-
左
border-width:1px; border-style:solid; border-color:#000;
可缩写为:
border:1px solid #000;
border-top:#ffe4a2 1px solid
也是缩小
2、
明确定义单位,除非值为
0
3、
当在
XHTML
中使用
CSS
,
CSS
里定义的元素名称是区分大小写的。
4、
在不同的浏览器中,
margin
与
padding
的
默认值是不一样的,所以统一成:
{
margin:0px;
padding:0px;
}
margin:0px;
padding:0px;
}
5、
在
div
中少用
padding
样式。在
FF
中的好多尺寸问题都是此属性引起的。
6、
多重样式定义
.one{width:200px;background:#666;}
.two{border:10px solid #f00;}
.two{border:10px solid #f00;}
调用:
<div class=“one two”></div>
7
、最近优先原则。如果对同一个元素的定义有多种,以最接近
(
最小一级
)
的定义为最优先,例如有这么一段代码
p {
margin:4px 0px;
font-size:10px;
color:#3333333;
}
.divTextLink {
font-weight:bold;
color:#660000;
}
margin:4px 0px;
font-size:10px;
color:#3333333;
}
.divTextLink {
font-weight:bold;
color:#660000;
}
<p>
<div class=” divTextLink”> Lorem ipsum dolor set </div>
</p>
8
、组选择器
(Group selectors)
当一些元素类型、
class
或者
id
都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和
margin
,你可以这样写:
h1,h2,h3,h4,h5,h6 {
color:#333333;
margin:1px 0px;
}
color:#333333;
margin:1px 0px;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:10px; }
h2 { font-size:11px; }
h2 { font-size:11px; }
9
、
CSS
代码书写统一样式
#hotelResultDisplay div.clearer {
clear:both; font-size:0px; line-height:0px; height:0px;
}