CSS学习(3)--class和id、span和div
来源:互联网 发布:xp打开端口 编辑:程序博客网 时间:2024/06/07 18:46
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的简单用法。
- CSS学习(3)--class和id、span和div
- css中SPAN和DIV,Class与ID的区别汇总
- SPAN和DIV Class与ID的区别汇总
- SPAN和DIV Class与ID的区别汇总
- 【CSS学习】CSS Id 和 Class
- CSS基础学习7-CSS设置组织元素(span和div)
- CSS Id和Class
- css学习之id和class选择器
- DIV+CSS布局入门教程(六) -- 关于ID和CLASS
- DIV+CSS中id和class的使用原则
- 搞定CSS SPAN和DIV的区别
- CSS SPAN和DIV的区别
- [让CSS更规范]div和span
- CSS SPAN和DIV的区别
- css( div和span)——读书笔记
- html+css span和div 布局
- CSS中的div和span标签
- DIV和ID、class是什么
- Linux pipe函数
- java反射机制
- 获取网卡信息
- jre jdk jvm
- jquery 时间封装包
- CSS学习(3)--class和id、span和div
- java io总结
- iOS 中 nil NULL, NSNULL的区别
- Java栈与堆 (原作者讲的太好了)
- NS2安装终结版
- Latex slide下载地址
- PHP 从数据库中取出数据并存为Json数据
- DOS命令之copy
- iOS绘图教程