当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > [css]简明教程 样式表中的类

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 [css]简明教程 样式表中的类


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



  为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下:

  选择符.类别名 {属性:值}

  类别名将可以在HTML的标识符里引用:

  <标识符 class=类别名>网页内容

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    p.English{font-family:"Courier New"}
    p.Chinese{font-family:幼圆}
  -->
  </style>
  </head>
  <body>
  <p id=English>5dMedia Studio</p>
  <p id=Chinese>原创的魅力!</p>
  </body>
  </html>


  ID

  ID,就是给HTML文挡中的样式发“身份证”,保证其在一个HTML文挡中具有唯一可用的值,这种唯一性也给JavaScript等脚本语言的使用带来了方便。

  ID的用法和Class差不多,只是定义的时候用#号开头而不是点号。

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    #English{font-family:"Courier New"}
    #Chinese{font-family:幼圆}
  -->
  </style>
  </head>
  <body>
  <h1 id=English>5dMedia Studio</h1>
  <h2 id=Chinese>原创多媒体的魅力!</h2>
  </body>
  </html>



  伪类

  除了上述的分类方式外,为了使分类的使用更灵活多样,又产生了伪类的概念。类和伪类有什么样的区别呢?

  一般地说,选择符可以和多个类采用捆绑的形式来设定,这样虽然能够为同一个选择符创建多种不同的样式,但捆绑的形式同时也限制了设定的类为其它的选择符所使用。伪类的产生就是为了解决这个问题,每个预声明的伪类都可以被所有的HTML标识符引用,当然有些块级内容的设置除外。

  这里仅以伪类中最常见的锚伪类为例,锚伪类可以指定a元素以不同的方式显示链接(link),当鼠标碰到时的链接、已访问过的链接和正被激活的链接,一个已访问的链接可以定义为不同颜色的显示、字体大小和风格。

  基本格式如下:

  .伪类名 {属性:值}

  伪类可以被任何标识符在HTML里引用。

  <标识符 class=伪类名>网页内容

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    a:hover{font-size:18pt}/*当鼠标碰到时的链接*/
  -->
  </style>
  </head>
  <body>
  <a href="#">5dMedia Studio</h1>
  </body>
  </html>