CSS 的 ID 和 Class 有什么区别?如何正确使用它们

html-css09

CSS 的 ID 和 Class 有什么区别?如何正确使用它们,第1张

ID 和 Class的区别和使用:

1.ID是页面中唯一的,而class可以多个,(如下图),1位置引号中只有2个,css5和css5_class,而2位置引号中就只能有一个 css5_id

2.ID要设置样式时用“#”号定义,而class用“.” 号定义。

3.ID的优先级大于class

比如说在同一个标签中,id样式中定义了文字颜色为红色,class文字颜色为绿色。结果显示是id的红色。(如下图)

这个问题好比人的名字有什么用?比如一个班级有50个同学,其中一个同学的名字叫张三,那么我们可以这么认为:张三就是这个同学的ID

我们再换个角度想:假如网页里有50个<div>,高度和宽度全部都是50像素,但其中一个要求背景颜色为红色,这时我们就可以为那个背景为红色的div定义一个id。然后css通过id识别出要加背景色的div。

id的作用就是这样,便于识别特殊的div。就像人的名字一样,喊名字才知道是叫谁。

说明:在同一个页面中,id是唯一的,不要重复指定相同的id,否则会导致不可预知的错误哦。

写一段代码加深一下楼主的印象:

CSS部分 css里指定id时前面加#,后面接着id的名称。如:#dif

div{ width:50px height:50px}

#dif{ background:#F00}

html部分:这里就不写50个div了,只写5个。

<div></div>

<div id="dif"></div>

<div></div>

<div></div>

<div></div>

后面添加你想定义的名字,例如页面分成三部分:头,中,脚。则可分别定义head,middle,foot.这样页面中的大体是这样写的,你应该看看就懂了~!

<html>

<head>

<title></title>

<style type="css/text">

#head{width:1000pxheight:20pxbackground-color:red}

#middle{width:1000pxheight:400px}

#foot{width:1000pxheight:200pxbackground-color:green}

</style>

</head>

<body>

<div id="head"></div>

<div id="middle"></div>

<div id="foot"></div>

</body>

</html>

上述代码大体的意思就是使用id获取元素,并对其进行样式的设定。希望采纳,手打不易啊