CSS学习（3）--class和id、span和div

1 class，用于对同一类型html元素进行分类

例：

有下面两个列表

列表一

 
• 11

 
• 12

列表二

 
• 21

 
• 22

现在要让列表一中的条目都显示为红色，列表二中的条目都显示为橙色，需要通过class将li分类，代码如下

列表一

 
• 11

 
• 12

列表二

 
• 21

 
• 22

在css文件中如下设置样式：

li.redcolor{

color:red;}

li.orangecolor{

color:orange;}

如上例所示，可以通过元素.classname 为属于某一类的元素定义css属性。

2 id，用于对同一类型元素的具体某个元素定义css属性

html属性id在html中必须是唯一的，不能有两个元素的id值一样，需要具有相同值的时候应该使用class

例：

有如下代码：

111

222

333

需要为每个元素设置不同的颜色，可以在html中添加id属性，如下

111

222

333

在css中设置如下：

#p1{

color:red;}

#p2{

color:orange;}

#p3{

yellow;}

可以在样式表里通过#id为某个元素定义样式，id的值不能为数字开头

3 span，可以与css结合使用，对文档中的部分文本增添视觉效果

例：

早睡早起，使人健康、富裕又聪颖。

我们需要将 健康、富裕、聪颖三个词用红色显示，需要如下修改代码

早睡早起，使人健康、富裕又聪颖。

在css样式表中如下设置：

span.sp{

color:red;}

也可以采用id来为这三个词设置样式，但是每个span的id需要设置为不同的id

4 div，用来组织一个或多个块元素，与span类似，但span限制使用在一个块元素中

例：

• div11


• div12


• div13

• div21


• div22


• div23

有两个列表，需要将第一个列表字体设置为红色，第二个列表设置为黄色

需要为代码添加div ，如下

• div11


• div12


• div13

• div21


• div22


• div23

在css样式表中如下设置：

#div1{

color:red;}

#div2{

color:yellow;}

上述只是span和div的简单用法。