当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 认清CSS的类class和标识id选择符

HTML/XHTML教程
CSS基础:设计网页常用规范详解
CSS教程:十步学会用css建站
CSS基础:24条网页布局开发小技巧
CSS教程:在网页布局中简单实现垂直居中的办法
css基础教程:颜色和文本属性的控制
专家总结:网页设计师必须遵守的十条守则
html技巧:超级链接a的提示和打开方式
css教程:学习背景图像属性background
例说网页Semantics:Html/Xhtml是否真正符合标准
IE7与web标准设计系列教程:前言
IE7与web标准设计系列教程:更丰富的CSS选择符
IE7与web标准设计系列教程:修正引起页面布局混乱的祸首
web标准教程:IE6和IE7的共存
web标准:IE多版本共存的解决方案:IETester
CSS基础教程:认识CSS选择符
web标准:比较IE6与IE7,放纵的孩子与严厉的父亲
学好标准CSS的模型是否必须放弃IE?
CSS教程:如何处理有冲突的CSS规则
教你用html和css写出漂亮正规的Blog
CSS基础:如何避免table强迫症

HTML/XHTML教程 中的 认清CSS的类class和标识id选择符


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 73 ::
收藏到网摘: n/a

  在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素。

  在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前。

  看起来像这样:

  #top { background-color: #ccc; padding: 1em }

  .intro { color: red; font-weight: bold; }

  HTML与CSS的连接用属性id和class。像这样:

以下是引用片段:
#top { background-color: #ccc; padding: 1em }  //id
.intro { color: red; font-weight: bold; }//class


  应用如下:


以下是引用片段:
<div id="top"> 
<h1>Chocolate curry</h1>
<p class="intro">网页制作爱好者-www.devdao.com</p> 
<p class="intro">http://www.devdao.com/</p> 
</div>

  id和class不同之处在于,id用在唯一的元素上,而class则用在不止一个的元素上。

  你也可以为一个指定的HTML元素应用选择符,把HTML选择符放置在前面就可以了,所以, p.jam { whatever }会应用在有类“jam”的段落上。