7.2　CSS的基本用法

CSS主要用于控制HTML文档的显示格式，当然也可以控制XML文档的显示。不管是HTML页面，还是XML页面，CSS的控制方式是完全一样的，控制语法也基本相似，因此下面先简单介绍CSS的基本语法。

7.2.1　CSS基本语法

每份样式单文件都会包含一个或多个样式定义，CSS的样式定义总有如下形式：

其中Selector是该样式定义的选择器，决定对哪些XML元素或HTML元素起作用；而花括号里的属性名、属性值则用来指定字体、大小、背景和颜色等，也就是决定对XML元素或HTML元素起怎样的作用。

每份样式单都包含多个形如Selector {…}的样式定义，每个样式定义控制文档中一部分元素的显示效果，最终形成整体的显示效果。

由此可见，定义CSS文件并不困难，但需要掌握以下两个语法：

　如何定义Selector。

　CSS支持哪些样式属性，每个样式属性支持哪些值。

关于CSS样式定义的详细语法，在后面有详细介绍，下面先了解一下如何将样式单应用到HTML页面中。

对HTML页面应用CSS，有如下3种方式：

　应用外部样式文件：这种方式将样式文件与HTML文档彻底分离，样式单文件需要额外引入。在这种方式下，多份HTML文档可以共享同一份样式单文件。

　使用内部样式定义：这种方式是在HTML文档头定义样式单。在这种方式下，每批CSS样式只对一份HTML文档有效。

　使用内联样式：这种方式将样式内联定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现。在这种方式下，每份CSS样式定义只控制单个HTML元素。

7.2.2　引入外部样式文件

HTML文档通过在<head…/>元素中增加如下<link…/>子元素来引入外部样式文件：

上面的语法格式中，type和rel属性的值表明该页面使用了CSS，对于引入CSS的情形，这两个值无须改变；href属性的值则指向CSS文件的地址，此处的地址既可以是相对地址，也可以是互联网上的绝对地址。

下面是一个简单的HTML文档的代码，该文档没有提供任何显示格式，只是简单的HTML表格，包含了3个字符串内容：

程序清单：codes\07\7.2\outer.html

上述页面中仅仅包含了一个简单的表格，并指定了表格宽度，没有其他显示格式，在浏览器中浏览该页面可看到图7.1所示的简单页面。

图7.1　没有CSS样式的HTML页面

为了让该页面更富表现力，可以为其指定外部的CSS文件，引入外部CSS文档的语法格式见上面的介绍。在该页面的<head…/>元素内插入如下<link…/>子元素：

outer.css文件的代码如下：

程序清单：codes\07\7.2\outer.css

如上所见，CSS总是由一个或多个样式定义组成，其中的table是一个选择器，该选择器将对所有<table…/>元素起作用，td也是一个选择器，该选择器将对所有<td…/>元素起作用。

在上面两个选择器后的花括号里的属性名、属性值则用来指定字体、大小、背景和颜色等，也就是用于控制对指定元素起何种显示效果。

图7.2显示了应用样式单后的页面效果。

图7.2　引入外部CSS后的效果

7.2.3　使用内部CSS样式

一般来说，不建议使用内部CSS样式，因为这种方式需要在HTML文档内嵌入CSS样式定义，而这种内部CSS样式主要有3大劣势：

　如果这些CSS样式需要被其他HTML文档使用，必须在其他HTML文档中重复定义。

　大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量重复下载，网络负载加重。

　如果需要修改整站风格，必须依次打开每个页面重复修改，不利于软件工程化管理。

但内部样式定义也并非一无是处，如果想让某些CSS样式仅对某个页面有效，而不会影响整个站点，则应该选择使用内部CSS样式定义，对于上面的HTML页面，可以使用内部CSS。

内部CSS样式需要放在<style…/>元素中定义，每个CSS样式的定义与在外部CSS样式文件中完全相同。<style…/>元素应该放在<head…/>元素内，作为它的子元素。

使用内部CSS样式定义的语法格式如下：

下面是一份使用了内部CSS的HTML文档的代码：

程序清单：codes\07\7.2\inner.html

上述页面中的粗体字代码定义了3个样式，这3个样式定义都被嵌套在该HTML页面内，因此仅对当前页面起作用，在浏览器中浏览该页面，可看到图7.3所示效果。

图7.3　使用内部样式单文件的效果

7.2.4　使用内联样式

内联CSS样式只对单个标签有效，它甚至不会影响整个文件。内联样式定义可以精确控制某个HTML元素的外观表现，并且允许在JavaScript中动态修改HTML元素的CSS样式，从而改变该元素的外观。

为了使用内联样式，CSS扩展了HTML元素，几乎所有HTML元素都增加了一个style核心属性，其值是一个或多个CSS样式定义，多个CSS样式定义之间以英文分号隔开。简单地说，使用内联样式定义时，style属性值由一个或多个property:value组成，此处的property:value与前面CSS文件中的完全相同。

定义内联CSS样式的语法格式如下：

将7.2.2中的示例该为使用内联样式定义，改后的HTML文档代码如下：

程序清单：codes\07\7.2\inline.html

上面的粗体字代码分别为不同的HTML元素指定了style属性，注意这些style属性值就是前面样式单文件里的样式定义部分。只是在使用内联样式时，已经将这些样式定义直接关联到了具体的HTML元素，因此不再需要指定Selector。

注意

读者一定要牢记：在定义一个CSS样式时，需要指定两个部分：Selector，决定对哪些HTML元素起作用；属性定义部分，如{property:value…}，决定对HTML元素起怎样的作用。在使用内联方式定义CSS样式时，CSS样式定义将直接应用到具体的HTML元素，因此无须指定Selector部分。

上述页面代码中的粗体字CSS样式定义指定到了具体的HTML元素上，故这些CSS样式只对具有style属性的HTML元素起作用。在浏览器中浏览该页面，可看到图7.4所示效果。

图7.4　内联CSS样式的效果