HTML与CSS在应用中的一些规范

 

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、 尽量少用 &nbsp; 来产生间距。可用 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;
}

 

5、   在 div 中少用 padding 样式。在 FF 中的好多尺寸问题都是此属性引起的。

 

6、   多重样式定义

 

.one{width:200px;background:#666;}
.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;
}

 

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

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:10px; }
h2 { font-size:11px; }

 

 

9 、 CSS 代码书写统一样式

#hotelResultDisplay div.clearer {

              clear:both; font-size:0px; line-height:0px; height:0px;

}