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

HTML/XHTML教程
HTML表格标记教程(45):表格的表主体标记<TBODY>
HTML表格标记教程(46):表格的表尾标记<TFOOT>
XHTML入门学习教程:XHTML超级链接<A>
HTML表单标记教程(1):<FORM>标记概述
HTML表单标记教程(2):<FORM>的属性应用
HTML表单标记教程(3):输入标记<INPUT>
HTML表单标记教程(4):<SELECT>标记
HTML表单标记教程(5):文字域标记<TEXTAREA>
HTML网页超链接标记<A>学习教程
HTML网页图片标记<IMG>学习教程
标记语言:标题
HTML标记语言:表格标记
HTML标记语言:引用
HTML标记语言:表单
标记语言:短语元素
标记语言:锚点
标记语言:再谈清单
标记语言:精简标签
标记语言:为文字指定CSS样式
标记语言:图片替换

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 114 ::
收藏到网摘: 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”的段落上。