论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

Css教程_详解CSS中的class与id及其区别

文章类别:div+css | 发表日期:2011-4-26 9:27:01

CSS中class和id的区别一直让很多人有疑问,什么时候用id什么时候用class呢。我们首先来看看他们的具体用法

class和id的用法


  class是类选择符,id就叫做id标签选择符,它们都可以对网页中的标签定义样式。
如果你想让段落中的内容居中显示和居右显示,可以按照下面方法定义:

p.center {text-align:center;}
p.right {text-align:right;}


它的定义方法是:指定标签.类名 {属性:属性值}
center和right就是两个类选择符,可以简称为类,我们可以引用这两个类来定义段落,如下:

<p class="center">居中显示的内容</p>
<p class="right">居右显示的内容</p>


但是这样定义的类只能针对指定的标签起作用,其它标签无法使用,比如我们想让一个div中的内容居右显示,定义如下:

<div class="right">我想要这段内容居右显示</div>


但是它却不能居右显示,因为它是按照指定标签定义的。也可以让它可以作用于任何一个标签的定义方法:

.right {text-align: right;}


它的定义方法是:.类名 {属性:属性值}
使用方法:

<div class="right">我想要这段内容居右显示</div>
<p class="right">居右显示的内容</p>


ID选择符和class选择符相似,它的定义方法也相似,区别只是将“.”改为了“#”。

p#center {text-align:center;}
p#right {text-align:right;}


它的定义方法是:指定标签#类名 {属性:属性值}
这次给指定标签<p>定义了两个ID,引用方法是:

<p id="center">居中显示的内容</p>
<p id="right">居右显示的内容</p>


和类相同,这种指定标签的定义方法只针对定义的标签显示,如果要将它定义为通用样式:

#center {text-align:center;}
#right {text-align:right;}


使用方法:

<p id="center">居中显示的内容</p>
<p id="right">居右显示的内容</p>


class和id的区别


class和id看上去区别仅仅是“.”和“#”,他们最大的区别在于:id选择符在每个页面只能使用一次,它是唯一的,而class可以随意无限次使用。

class和id的派生选择器


和基本语法一样,class和id也有派生选择器,用法也相同。

#center em {color:red;}
#right em {color:blue;;}


引用方法:

<div id="center">居中显示的文字<em>这里是红体字</em></div>
<div id="right">居右显示的文字<em>这里是蓝体字</em></div>
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058