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

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

例：

有下面两个列表

<p>列表一</p>
<ul>
 <li>11</li>
 <li>12</li>
</ul>

<p>列表二</p>
<ul>
 <li>21</li>
 <li>22</li>
</ul>

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

<p>列表一</p>
<ul>
 <li class="redcolor">11</li>
 <li class="redcolor">12</li>
</ul>

<p>列表二</p>
<ul>
 <li class="orangecolor">21</li>
 <li class="orangecolor">22</li>
</ul>

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

li.redcolor{

color:red;}

li.orangecolor{

color:orange;}

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

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

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

例：

有如下代码：

<p>111</p>

<p>222</p>

<p>333</p>

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

<p id="p1">111</p>

<p id="p2">222</p>

<p id="p3">333</p>

在css中设置如下：

#p1{

color:red;}

#p2{

color:orange;}

#p3{

yellow;}

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

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

例：

<p>早睡早起，使人健康、富裕又聪颖。</p>

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

<p>早睡早起，使人<span class="sp">健康</span>、<span class="sp">富裕</span>又<span class="sp">聪颖</span>。</p>

在css样式表中如下设置：

span.sp{

color:red;}

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

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

例：

<ul>
<li>div11</li>
<li>div12</li>
<li>div13</li>
</ul>

<ul>
<li>div21</li>
<li>div22</li>
<li>div23</li>
</ul>
有两个列表，需要将第一个列表字体设置为红色，第二个列表设置为黄色

需要为代码添加div ，如下

<div id="div1">
<ul>
<li>div11</li>
<li>div12</li>
<li>div13</li>
</ul>
</div>

<div id="div2">
<ul>
<li>div21</li>
<li>div22</li>
<li>div23</li>
</ul>
</div>

在css样式表中如下设置：

#div1{

color:red;}

#div2{

color:yellow;}

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