• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

2.1 元素的id和class

id和class是HTML元素中两个最基本的公共属性。

一、元素的id属性

id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值,CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="first">绿叶学习网</div>
    <p id="first">绿叶学习网</p>
</body>
</html>

说明:

上面HTML代码是错误的,因为在同一个HTML页面中,不允许出现两个相同的id。不过要注意一下,在不同页面是可以出现相同id的元素。

二、元素的class属性

class,顾名思义,就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同的class具有相同的CSS样式。

如果你要为两个元素或者两个以上元素定义相同的样式,建议使用class属性。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="first">绿叶学习网</div>
    <p class="first">绿叶学习网</p>
</body>
</html>

说明:

这段HTML代码是正确的,因为在同一个HTML页面中,允许相同的元素或者不同的元素设置相同的class属性,以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。

id和class就像你的身份证号和姓名,身份证号是全国唯一的,id号也就是唯一的,class(类名)就是姓名,两个人的姓名就有可能一样。

此外,需要注意一下:

  • (1)一个标签可以同时定义多个class;
  • (2)id也可以写成name,区别在于name是HTML中的标准,而id是XHTML中的标准,现在网页的标准都是使用id,所以大家尽量不要用name属性;
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部