one piece

利用CLASS类选择符定义样式

class类选择符的使用语法如下

  1. <style type="text/css">
  2.  <!--
  3.  *.a1{样式属性:属性值; 样式属性:属性值;}
  4.  *.a2{样式属性:属性值; 样式属性:属性值;}
  5.  …………\r *.an{样式属性:属性值; 样式属性:属性值;}
  6.  -->
  7.  </style>

或者\r

  1. <style type="text/css">
  2.  <!--
  3.  标记1.a1{样式属性:属性值; 样式属性:属性值;}
  4.  标记2.a2{样式属性:属性值; 样式属性:属性值;}
  5.  …………\r 标记3.an{样式属性:属性值; 样式属性:属性值;}
  6.  -->
  7.  </style>

下面是语法各部分的说明。\r
*a1 ……*an
a1….an定义为类选择符名称,通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所以有class类选择符所引用的设置。*符号也可以用在HTML内的标记替换(即标记 1….标记 N),范例如:font.a1;此外*符号,在设置时也可以省略。\r 标记 1.a1…标记 N.AN
标记 1…标记 N为HTML的标记名称,即前面提国的*符号,也可以HTML内的标记代替。不同点在与,若在定义class类选择符前面加上HTML的标记时,其使用范围将只限与该标记所包含的内容。\r 样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r
下面的语句,将在HTML内引用 P 标记的A1与A2的类样式,分别定义为”楷体、红色”与”华文隶书、蓝色“。\r

  1. <style type="text/css">
  2.  <!--
  3.  p.a1 {font-family:楷体; color:red}
  4.  *.a2{font-family:华文隶书; color:blue}
  5.  -->
  6.  </style>

注意用这种方法定义样式时,要在名称前加上”.”符号;在”*”符号前则可以省略。范例1-3.htm分别说明如何定义在某一标记和整个html使用的样式的class选择符。\r 范例1-3.htm
class定义样式类的使用

图fl1-3

程序说明
在程序第6行和第7行,我们利用class类选择符定义样式,其中第6行是针对P标记,定义A1类样式;而第7行定义A2类样式,其适用范围是整个HTML文件。\r 第12行在P标记内利用class引用a1的样式,将显示为红色楷提样式;第13行虽然在H1标记中引用A1的样式,但因为A1的样式只限与P标记,所以此行文字采用默认值样式,并不会显示任何的效果;第14行在H1标记中引用A2的样式,因A2的样式使用范围在整个HTML文件,所以此行文件将显示A2所定义的蓝色华文录书样式。\r 执行结果如图fl1-3-1所示:

图fl1-3-1

Created By: sb123

Form Page: 利用CLASS类选择符定义样式


3 Responses to “利用CLASS类选择符定义样式”

  1. zithromax dosage
    四月 10th, 2007 08:40
    3

    zithromax dosage…

    news…

  2. napoli calcio
    四月 10th, 2007 07:44
    2

    napoli calcio…

    news…

  3. 4793f30c3c9e2810fbaa
    四月 10th, 2007 02:29
    1

    4793f30c3c9e2810fbaa…

    4793f30c3c9e…

Leave a Reply

You must be logged in to post a comment.