在上一节里，提到利用class类选择符定义样式的方法；这一节，还要教你如何利用ID指定选择符定义样式，其中，两者最大的差别在与定义样式名称前的符号，用class定义为”*.样式名称”; 若用ID定义样式时为”#样式名称”。以下是ID选择符定义样式的语法

或者\r

下面是语法各部分的说明。\r #a1…#an
a1…an是定义ID选择符名称，通常在定义样式时，指定给样式的名称。其使用范围，是整个html文件中所有由ID选择符所引用的设置。\r 标记 1#a1…标记 N#an
标记1…标记N为HTML的标记名称，不同点在与，若在ID选择符前面加上HTML的标记时，其使用范围将只限于该标记所包含的内容。\r 样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r
下面的语句，将在HTML内引用P标记的a1与a2的定义样式，分别定义为楷体，红色和华文隶书蓝色。\r

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

或者\r

下面是语法各部分的说明。\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-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

除了在style元素内，分别定义歌种选择符的样式外，您还可以一次完成在不同的选择符内定义相同的样式，好处在与减少样式表的空间和重复设置的麻烦。语法如下：

下面是语法各部分的说明.
选择符 1….选择符 N
定义样式的选择符(Selector)
样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r 范例1-21.htm将把html的h1与h2选择符的样式，定义为相同的”楷体、红色“。\r

范例1-21.htm：组合选择符的使用

图fl1-21
程序说明
整个程序的重点在于第6行利用组合选择符的方法，将H1与H2定义成相同的样式。\r 执行结果如图fl1-21-1

图fl1-21-1

在HTML文件内定义样式表
在标记中，用设置STYLE属性的方法，只能控制一个标记的样式，实在让人看不出CSS对网页设计有什么特别的效果，在这一节，将告诉您如何在

元素(Element)中定义样式，在整个html文件中，要使用该样式的标记可以直接调用。下面是

元素的定义语法:

（更多…）

直接在html标记内，插入style属性,定义要显示的样式，这是最简单的样式定义方法，不过，利用这种方法定义样式时，效果只可以控制该标记，其语法如下：<标记名称 style="样式属性:属性值; 样式属性:属性值;>
范例1-1.htm设置

标记除了本身所具有的特性外，也将具有蓝色楷体字体。\r

范例1-1.htm:使用时直接定义style属性\r

图fl1-1
程序说明
在程序第6行，直接在

标记内定义为style属性，此航海文字将显示红色楷体的字体;而第8行，虽然也是

标记，但因为没有任何定义，所以只显示原来在HTML内定义的H1标题的大小。\r 执行结果如图fl1-1-1所示:

图fl1-1-1

在CSS里可以使用四中不同的方法，将样式表的功能加到网爷里，让网页显得更多采多姿。\r 方法如下：\r 直接定义标记的STYLE属性
定义内部样式表
嵌入外部样式表
连接外部样式表
上面四种方法，可分成内部样式表。

1-2-2CSS文件的应用
CSS所编辑出的文件与HTML相同，都属于纯文本文件，差别在于扩展格式的不同，HTML文件的扩展名为(.htm和.html）；而CSS文件的开展名则为(.css)，不过若您是在HTML中编辑CSS的话，存盘格式依然是(.htm 或.html)。本教材后半段内容所要介绍的CSS用法，并不需要利用特别的编辑工具来编写源代码，仅需利用像HTML的Notepad文件编辑器即可。图1-3是利用Notepad文件编辑器来,所编写的.htm或.html源代码,热而黑色框线的部分即是在.htm或.html文件中所定义的CSS源代码。\r
图1-3

图1-4是利用Notepad文件编辑妻，所编写的CSS源代码。通常CSS的文件，都是利用连接或者插入的方式，应用到html文件里。\r
图1-4

CSS不只可以使用在HTML上，还可以用在别的文件上，如XML或者 JacaScript。\r 若你想了解CSS的发展和近况，或者更多关于CSS的内容时，可以参考W3C(World Wide Wed Consortium)，网址是//www.w3.org/TR/REC-CSS1以及//www.w3.org/TR/REC-CSS1审核通过并推荐使用的规格书。

1-2-1支持CSS的浏览器
IE（Internet Explorer)与NC(Netscape)浏览器等..对CSS所支持的样式并不完全相同。所以对与设计好的样式表，浏览器通常仅会读区其看得懂的部分，对与那些看不懂的语法，将略国不显示效果。范例如:要设定样式层次(Layer)的效果时，若利用(LaYER)标记引用样式时，就仅能被NC所支持，在IE中就显示不出效果;但若利用

标记引用时则两者均支持此样式。\r 吸早您或许会有疑问，两者所支持的样式并不相同，那我们该选哪一种来使用呢？我建议您，使用IE会比较得心应手。为什么呢？这个问题可以从两个方面来讨论:哪一种浏览器支持的功能比较多？哪一种浏览器比较多人使用？\r 基本上。IE支持CSS的功能比NC还有丰富，而且也陆陆续续地新增其他功能；再者，日前大部分的计算机用户，使用IE的比率比NC还多，所以使用IE较能避免与使用者浏览器不兼容的情况发生。这就是为什么建议您使用IE的原因了。

1-1-3CSS的优点
下面就是我们学习CSS所整理出来的三个优点。当然！在CSS里也不只有这几项优点，相信您学完后，一定也会深有感受，或者发掘出更多CSS的好处。\r 一组样式可以调用在多个对象上
CSS强大的功能，就是您只要定义一组样式后，就可以随心所欲地调用在与任一段，或者任何文件中。相当的使用方式。\r 语法易学易懂
基本上CSS的语法比HTML的语法还容易学，所以一旦您已学会HTML后，接下来的CSS对你而言就不是什么难题。除此之外，因为CSS还可以简单地设定并存成格式为.css的文件，所以鱼肚程序时，也比HTML来得方便。\r 丰富的样式效果
CSS的样式设定功能，比HTML还来得多，且几呼所以HTML文件中可以看到的样式，CSS都有提供。不仅如此，它还提供一些HTML没有的网页效果，范例如：第4章的滚动条效果。结合HTML与CSS的应用，真是让您的网页增色不少呢！

1-1-2为什么要有CSS
若利用html语法编写网页,你会发现编写网页并不难。而对与一个网站经营者来说，困难的地方在于怎样管理。打个比方，如果有一天我们希望将网页中所有的标题都改成红色。这时学过HTML的您，觉得改怎么办呢？二话不说，马上利用Notepad调出所有的HTML文件，一个一个地改，没错这的确是您目前所能想到的唯一办法，但这不是很累人吗？难道没有更简单的方式吗？有！答案就是CSS。\r 而CSS的概念，就是将样式的定义与HTML文件中分离出来，只要建立一个定义样式的CSS文件，并让所有HTML调用这个CSS文件所定义的样式，以后要更改HTML中某段落的样式时，只要到CSS文件中，更改样式的定义即可。如图1-2所示：

图1-2