网站用户体验整合设计-体验css+div中id和class各自的用法及区别

体验css+div中id和class各自的用法及区别

Post by 张美工, 2008-9-18, Views:

使用ID还是CLASS？既然利用class或者使用id属性能够实现同样的效果，那我们到底选择那个呢？我们利用以下几点分别说明：

写DIV部分（结构）以及CSS部分（表现），然后通过DIV的ID属性使用到了相对应的CSS样式：<div id="main"></div>
有过网页制作经验的读者可能还见过这样的应用<div class="main"></div>是的，如你所见到的，这里用的是class属性而不是id。
需要注意的是，利用id或class使用css，在定义css时候写法是不一样的。当我们用id属性时，定义的css是以“#”开头加样式表名的。而使用class时候定义的css样式是以“.”开头的。

1. 一个结构文档中可以多处使用同一个class名，而id名必须是唯一的。例如我们定义了一个描述字体的CSS。
.font {
color:#009900;
}

以下文档中将多次使用到同一个样式表“.font”
<h1 class="font">张美工体验DIV + CSS </h1>
<div class="font">网址：http://www.zhangmeigong.cn </div>

而id名在同一个文档中是需要唯一的。

2.利用class可以对于同一个标签多重定义样式。例如：
css:
.font {
color:#009900;
}
.border {
border:1px solid #000000;
}

使用以上两个CSS样式表对描述同一个DIV，多个样式表名用空格隔开：
<div class="font border">网址：http://www.zhangmeigong.cn </div>

3. ID还有更多的特殊用途
例如我们用Javascript控制某个DIV的时候我们这里就需要用到DIV的ID名。这里就不细加讨论了。

还有更多的区别，大家可以在以后实践中总结，而且很多时候可能设计到个人习惯问题。
我个人习惯将某个确定用途的非重复的板块定义为ID属性。例如页面的header部分，或者footer部分，或者logo等等。COOANT

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总