网页教学网
 当前位置: 网页教学网 >> 网页制作 >> CSS技术应用 >> 阅读:CSS中如何正确的使用 id 和 class?
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

CSS中如何正确的使用 id 和 class?

http://www.webjx.com  更新日期:2007-07-27 21:57  出处:蓝色理想  作者:wheatlee 收藏本文

今天有点闲,想向大家请教一下id和class的使用。

按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。

但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单:

那些只会在页面中出现一次的元素应该用id来表示。比如页头(header) 页尾(footer),导航菜单(main-menu)等。但是真的这么简单么?

我先举几个例子来说明我所遇到的尴尬:

  1. 大多数的页面都是两栏布局的:一个主栏(main column),一个侧栏(side column)。就像这样:

    CSS中如何正确的使用 id 和 class?

    OK,我们会用两个div来表示它们。问题来了,应该使用id还是class?按照常规的理解,一个页面只会有一个主栏,一个侧栏咯,所以当然应该用id。文档写成这:

    <div id="main-col"></div>
    <div id="side-col"></div>

    #main-col { float: left; width: 700px;}
    #side-col { float: right; width: 200px; }

    也是很赏心悦目的,不是么?所以我决定用id。

    于是页面做好了,网站做好了,上线了,运营了,访问量大了。这时候公司决定,嗯,我们应该在一些页面中加几个通栏广告。“通栏”哦!这就意味着它必须横跨主栏和侧栏,把它们俩拦腰截断。于是我们重新“发明”一个样式:banner,让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图:

    CSS中如何正确的使用 id 和 class?

    所以HTML应该是这样:

    <div id="main-col"></div>
    <div id="side-col"></div>

    <div class="banner></div>

    <div id="main-col"></div>
    <div id="side-col"></div>

    问题轻松解决(多亏偶经验丰富啊,表扬一下自己,咔咔。)。唯独只有一个问题:main-col和side-col这两个id重复了。这个问题其实也不麻烦,把它们全部改成class不就好啦(甚至,不去改它,我就不信浏览器会给我报错,哼)。

    1. 但是,我这不是自己给了自己一个嘴巴么?当初还信誓旦旦的说,main-col只会出现一次,所以用id……。所以教训就是,main-col和side-col,或是left-col, right-col ,extra-col, xxx-col,这些用来分栏布局的样式,都给我用class。嗯,记在本本上。
    2. 设计页面的时候,在页头和主菜单之间放了一个搜索框(search-box)。既然我们的页头(header),导航栏(main-menu),登录框(login-box)都用的是id,和它们在一起的search-box也应该用id咯?呃,小心啊,老板很可能会让你在页尾也放一个搜索框的,你用id你就死定了。所以search-box应该用class。不过这样怪怪的,凭什么login-box用id,而search-box却用class呢?
    3. 慢着,你以为导航栏就可以保证唯一了么?我来讲一个例子:

      CSS中如何正确的使用 id 和 class?

      喏,老板要来一点不同的,让把导航栏放在左侧。这个没问题,用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿,他说,嗯,为了可用性(咳咳。。),我们需要把菜单分成两部分。就像:

      CSS中如何正确的使用 id 和 class?

      呃。。好说,分成两个ul就好了。但是,它们的id都叫main-menu么??哎,老问题又来了。

关键词:网页制作,CSS教程
推荐给好友】【关闭
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为