专注优质Wordpress企业网站搭建与优化

开宗明义:《CSS权威指南第三版》精髓中文学习笔记【4.8】CSS中的类选择符



SEO优化,CSS教程,Wordpress博客 - 来自西米CC(http://ximicc.com)最通常的方式就是使用类选择符。但在使用它之前得对实际文档作标记,这样才能使这个选择符发挥作用。为什么呢?既然我们不打算根据HTML元素来作选择,那么就需借助其他的手段。下面来看一下类属性:

  1. <style type="text/css">
  2. <!--
  3. .warning {font-weight:bold;}
  4. body {
  5. font-family: Verdana, Arial, Helvetica, sans-serif;
  6. font-size: 12px;
  7. line-height: 18px;
  8. }
  9. -->
  10. </style>
  11. <P CLASS="warning">ximicc is a website about CSS design ,include examples in CSS gallery, CSS beauty, CSS tutorials, CSS news, jobs and the latest from the web design standards community. Welcome to ximicc.com .</P>
  12.  
  13. <P>Learn the basics of CSS design in ximicc.com . Positioning and the formatting of link text is covered.<SPAN CLASS="warning">You also can download free Website templates, CSS Templates, Blogger Templates .</SPAN></P>

为了将类选择符的样式关联到一个元素,那个元素必须要设置合适的类属性值。在上面的代码中,我们已经将一个类值[color=Maroon]warning分配给了两个元素:第一段和第二段中的SPAN元素。现在所有要做的就是对这些标记了的元素应用样式。如下:

  1. .warning {font-weight:bold;}

将它同前面的实例标记结合起来,这条简单的规则就会有如图2-8所示的效果。实际上,给定上面这样一个样式表后,font-weight:bold这个样式就会应用于任何类属性值为warning的元素。

CSS中的类选择符 - 西米CC

正如所看到的,类选择符通过直接引用元素中类属性的值而产生效果。在这个引用前面总是一个句点(.),用它来标识一个类选择符。这个句点是必要的,因为它可以帮助类选择符与其他元素相分离,这些元素也可能和它组合在一起——像元素选择符一样。或许我们只想当整个段落都是警告文本时才使其为粗体。这样:

  1. P.warning {font-weight:bold;}

如下图所示,只有第一段是粗体,然而第二段种的文本就不再是粗体,因为它不再匹配SPAN元素。而选择符P.warning表明“任何类属性的值为warning的段落都将采取统一的样式。”既然SPAN元素不是个段落,这条规则就与它无关,因此它的文本就不会变为粗体:

CSS中的类选择符

当然,也可以使州SPAN.warning选择符来分配不同的样式。参见下图中这些样式的结果:

  1. P.warning {font-weight:bold;}
  2. SPAN.warning {font-style:italic;color:red;}

《CSS权威指南第三版》精髓中文学习笔记

在这种情况下,警告段落将以粗体显示,然而警告SPAN为红色斜体。每条规则只能应用于一个特定类型的类组合元素,而且不会影响到其他的元素。另外,还可以使用一般类选择符或者特定元素的类选择符来使样式的效果更佳,如图所示:

  1. .warning {font-style:italic;color:red;}
  2. SPAN.warning {font-weight:bold;}

《CSS权威指南第三版》精髓中文学习笔记

现在所有警告文本都将是红色斜体,只有类为warning的SPAN元素内的文本才是粗体字。

[ 以下内容您也可能感兴趣 ]

Add a Comment