CSS代码结构初探：如何为id及class类命名？

　　在前面我们讲了《根基的建立 使有意义的html标记》http://www.fun52.com/article.asp?id=400。这些有意义并且具有良好结构的标签标记为我们提供了非常好的基础，但是这些可能元素毕竟是有限的。不可能仅用这些元素就构成完整的网页代码。至少这些标签标记，并不能区分，哪里是头部导航，哪里是侧边栏，哪里是内容区域。
　　我们现在解决办法就是使用现有的元素，通过给他们id或class而得到额外的信息。这样就使得文档具有清晰的结构。比如，我们通过一个简单的无序列表UL，可以创建出一个导航元素的信息：
<ul id="nav">
    <li><a href="http://www.fun52.com/">Div+CSS教程</a></li>
    <li><a href="http://www.fun52.com/">CSS布局实例</a></li>
    <li><a href="http://www.fun52.com/">CSS2.0教程</a></li>
    <li><a href="http://www.fun52.com/">CSS酷站欣赏</a></li>
    <li><a href="http://www.fun52.com/">CSS模板下载</a></li>
</ul>
　　我们一直强调以提醒你的注意，id是页面上单独的元素，必须是唯一的，这样的益处在于程序或脚本的控制与选择。id我们通常用来标记结构性的元素，如上面提到的头部导航、侧边栏、内容区域等。
　　一个id只能应用于同一个页面上的一个元素。从理论上说，不同的页面，完全可以使用同一个id。例如列表页面的标签与内容显示页面的标题，或者是首页的联系方式与内页的联系方式。需要你注意的是，这样确实能省事简化代码提高效率。但如果将来需要根据页面不同单独定义他们的外观，你将会遇到棘手的问题。我们建议你建立不同的id，但在CSS代码编写时，可以运用群组选择符进行外观的设置，即使有变化，也可以非常方便的区分开来。例如：
　　列表页的标题：<p id="listtitle">www.fun52.com</p>
　　内容页的标题：<p id="showtitle">www.fun52.com</p>
　　CSS则可以这样写：#listtitle,#showtitle {font-size:1.2em; color:red; ...}
　　类class是一个非常灵活的东东，你可以将它应用于页面上任意数量的元素。类class非常适合相似条目的定义。例如，我们需要在列表页标识出文章的作者，我们不必为每一个人建立id。我们只需要建立类author分配给每一位作者即可。
第 1 2 页