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

HTML/XHTML教程
网页页面 自动刷新的3种代码
网页制作 TD也可以溢出隐藏显示
网页设计 TabIndex元素
HTML非常用标签 optgroup、sub、sup和bdo示例代码
html超级链接标记A的TARGET属性详解
语义化的网页 XHTML语义化标记
各种MOUSE鼠标形状的表示方法
左右移动转换文字特效HTML代码解析
IE6的BUG及修复 谓防患于未然的策略
编写email邮件的HTML页面原则小结
熟手的html编写风格与原因分析
常见的HTML标记错误写法
html 块级标签与内联标签的区别
IE6的BUG及修复:谓防患于未然的策略
制作编写HTML邮件的编写原则
HTML Symbol Entities美化网页小图标
HTML代码编写的常用5个原则以及原因
HTML基础教程:常见的HTML标记错误写法
经验分享:淘宝网店网页标题优化和宝贝橱窗推荐
W3C验证XHTML常见的5个错误

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


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