2.2.1　CSS的基本语法和用法

1.CSS的基本语法格式

CSS的语法单元是样式，每个样式包含两部分内容：选择符和声明（或称为规则），其语法格式如下：

选择器 selector {属性1：值1；属性2：值2；…}

选择器selector是HTML的元素或标记，声明由一个属性和一个值组成。

【例2-5】　将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。

依题意，编写CSS的代码如下：

h1{color：red；font-size：14px；}

在本例的代码中，h1是选择器，color和font-size是属性，red和14px是值。该段代码的结构如图2.5所示。

完整代码如下：

程序运行结果如图2.6所示。

2.CSS样式属性

常用CSS样式长度单位属性如表2.1所示。

常用CSS样式颜色属性如表2.2所示。

常用CSS样式文字设置属性，如表2.3所示。

3.CSS样式的设置方法

（1）在元素标签中设置样式

在元素中使用style="…"的语法格式进行设置。例如：

＜h1 sytle="color：red；font-style：italic"＞欢迎进入本系统＜/h1＞

（2）内部样式文件，在＜style＞标记中定义样式

在HTML文件中，使用＜style＞标签设置样式，其语法格式为如下：

例2-5就是采用这种格式定义CSS样式。

（3）外部样式文件

把样式代码保存为独立的外部样式文件，以.css为文件扩展名，并在引用CSS样式的HTML文档＜head＞标签中插入link元素：

＜link rel="stylesheet"type="text/css"href="外部样式文件.css"＞

【例2-6】　把CSS代码保存为外部样式文件，并在一个HTML文件中引用该样式文件。

●　将样式设置语句

h1{color：red；font-size：48px；}

保存为ex2_6.css文件。

●　在HTML文件的头部，增加下列link标签的语句：

＜link rel="stylesheet"type="text/css"href="ex2_6.css"＞

完整程序如下：

程序运行结果如图2.7所示。