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的简单用法。