3.1 创建和应用CSS
CSS是一种用于控制网页样式的标记性语言，通过CSS不仅可以将样式信息与页面内容分离，还可以控制许多仅使用HTML无法控制的属性。下面介绍如何创建CSS样式并将其应用于页面元素。
3.1.1 层叠样式表概述
层叠样式表（CSS）是一组格式设置规则，用于控制网页内容的外观。通过使用CSS样式设置页面的格式，可以把页面的内容与表示形式分离开。页面内容（即HTML代码）存放在HTML文件中，而用于定义代码表示形式的CSS规则存放在另一个文件（外部样式表）或HTML文档的另一部分（通常为网页首部）中。将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时无须对每个页面上的每个属性都进行更新。将内容与表示形式分离还可以得到更加简练的HTML代码，这样将缩短浏览器加载时间。
使用CSS可以非常灵活地控制页面的确切外观，控制许多文本属性，包括特定字体和字号，粗体、斜体、下画线、文本阴影、文本颜色和背景颜色，以及链接颜色和链接下画线等，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。
除设置文本格式外，还可以使用CSS控制网页中块级元素的格式和定位。块级元素是一段独立的内容，在HTML中通常由一个新行分隔，并在视觉上设置为块的格式。例如，h1标记、p标记和div标记都在网页上生成块级元素。对块级元素可以执行以下操作：为它们设置边距和边框，将它们放置在特定位置，向它们添加背景颜色，在它们周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。
术语“层叠”表示对同一个页面元素应用多种样式的能力。例如，可以创建一个CSS规则来应用颜色，创建另一个CSS规则来应用边距，然后将两者应用于页面上的同一个文本。所定义的样式向下“层叠”到页面元素，并最终实现想要的设计。
CSS的主要优点在于它提供了便利的更新功能。设计网站时，可以创建一些CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样很容易为网站内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。
CSS在Ajax开发中的作用是创建风格相同的页面布局，并提供随时修改部分页面元素样式的能力。Ajax网页的局部刷新功能，既包括通过DOM元素实现局部元素的内容更新，也包括通过CSS实现局部元素的样式更新。
3.1.2 定义CSS规则
CSS样式表由一些规则组成，每个规则由选择符和属性声明两个部分组成，其中选择符用于标识格式元素（如p、h3、类名或id），属性声明则用于定义元素的样式。
定义CSS规则的语法如下：
选择符{属性:值;属性:值;...}
属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分隔，不同属性-值对用分号（;）分隔。
当在HTML网页中定义CSS规则时，应把规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。
例如，下面的CSS规则用于定义div元素的样式：
div{font-family:"华文行楷";font-size:16px;color:#FF0000;}
在这个例子中，使用div标记作为选择符，位于花括号中的内容都是CSS规则声明。上述CSS规则为<div>标记创建了一个特定的样式，应用此样式的所有div元素的文本都将使用华文行楷字体显示，字号为16像素，文本颜色为红色。
图3-1 创建和应用CSS样式示例
例3-1 创建一个CSS样式，用于设置标题3（h3）的格式，网页效果如图3-1所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，然后在本地根文件夹下创建一个子文件夹并命名为chap03。
2 在文件夹chap03中创建一个HTML网页并保存为page3-01.html，把网页标题设置为“创建和应用CSS规则示例”。
3 切换到代码视图，在</head>标记之前定义一个CSS样式，源代码如下：
<style type="text/css">
<!--
h3{ /＊ 对h3标记进行重新定义 ＊/
font-family:"方正静蕾简体"; /＊ 设置字体 ＊/
font-size:36px; /＊ 设置字号 ＊/
color:#0066FF; /＊ 设置文本颜色 ＊/
}
-->
</style>
说明 在CSS样式规则定义中可以使用类似C语言的注释形式，即“/*......*/”。
4 切换到设计视图，在页面上输入一段文字并设置为“标题3”格式。
5 按F12键，在浏览器中查看网页效果。
3.1.3 选择符的类型
定义CSS样式时，可以使用各种类型的选择符。选择符主要有以下几种类型。
1.类型选择符
类型选择符用于选择以特定HTML标记定义的页面元素。使用HTML标记定义CSS规则时，语法如下：
tagName{属性:值;属性:值;...}
其中tagName表示某个HTML标记的名称。使用特定的HTML标记作为选择符，可以对这个HTML标记的外观样式进行重新定义，由此定义的CSS样式将自动应用于页面中所有通过该标记定义的元素。
下面的例子通过创建CSS规则对input标记的外观样式进行重新定义，网页中所有用input标记定义的表单控件都将被自动更新。
input{font-family:"宋体";font-size:9pt;}
2.类选择符
类选择符用于选择具有特定class属性的页面元素。使用类选择符定义CSS规则时，语法如下：
＊.className{属性:值;属性:值;...}
tagName.className{属性:值;属性:值;...}
其中className指定类选择符的名称，tagName表示某个HTML标记名称。
使用“*”作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可。此类样式可以应用于所有页面元素。此处的星号也可以省略。
使用某个HTML标记作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可；不过，此类样式只能应用于页面上的特定HTML元素（由tagName指定）。
例如，在CSS样式表中定义以下两个类：
.style1{color:#FF0000;}
div.style2{color:#0000FF;}
样式style1可以应用于所有HTML元素，样式style2则只能应用于div元素。
<h3 class="style1">应用style1样式的标题文字</h3>
<div class="style2">应用style2样式的文字</div>
3.id选择符
id选择符用于选择具有特定id属性的元素。用id选择符定义CSS规则时，语法如下：
#className{属性:值;属性:值;...}
tagName#className{属性:值;属性:值;...}
其中className指定id选择符的名称，tagName表示某个HTML标记名称。
若要应用第一种语法格式所定义的样式，把页面元素的id属性设置为此选择符名称即可；对于第二种语法格式所定义的样式，也是通过id属性应用于页面元素，但此样式只能应用于特定标记定义的元素（由tagName指定）。
例如，在CSS样式表中定义以下两个类：
#style1{font-size:12px;}
p#style2{font-family:"华文行楷";}
样式style1可以应用于所有HTML元素，样式style2则只能应用于div元素。
<span id="style1">应用style1样式的文字</span>
<p id="style2">应用style2样式的文字</p>
4.包含选择符
包含选择符由E1和E2两个选择符组成，用于选择所有被E1包含的E2。使用包含选择符定义CSS规则时，语法如下：
E1 E2{属性:值;属性:值;...}
其中E1和E2可以是HTML标记名称、类选择符或id选择符。
例如，若只想让h1元素中的斜体文字变成蓝色，可以在CSS样式表中定义以下规则：
h1 em{color:blue;}
在这个例子中，包含选择符由h1和em两个HTML标记组成，此选择符用于包含在h1标题中的em元素，而不是h1元素本身。
下面给出使用包含选择符的另一些例子。
div p{font-family:"Courier New";font-size:small;}
.reddish h3{color:red;}
#style1 span{background:blue;}
div.side h1{font-size:large;}
5.选择符分组
定义CSS规则时，可以把同样的定义应用于多个选择符，此时应以逗号分隔的方式把这些选择符合并为组，语法如下：
E1, E2, E3{属性:值;属性:值;...}
例如，在Dreamweaver中，利用【页面属性】对话框设置页面字体为宋体，把字号设置为9磅，此时将生成以下CSS规则：
body, td, th{font-family:"宋体";font-size:9pt;}
如果希望页面上的表单控件也以9磅宋体字显示，可以把input、textarea、select添加到上述规则的选择符列表中并以逗号分隔。
6.伪类选择符
为了延伸CSS样式的表现形式，在CSS中引入了伪类的概念。伪类与其他选择符一起构成CSS选择符，称为伪类选择符。下面介绍一组由a标记和伪类组成的伪类选择符。
a:link{属性:值;属性:值;...} /＊ 设置a元素在未被访问前的CSS属性 ＊/
a:hover{属性:值;属性:值;...} /＊ 设置a元素在其鼠标指针悬停时的CSS属性 ＊/
a:active{属性:值;属性:值;...} /＊ 设置a元素在被激活时的CSS属性 ＊/
a:visited{属性:值;属性:值;...} /＊ 设置a元素在其链接地址被访问过时的CSS属性 ＊/
注意 所谓激活，是指在鼠标单击与释放之间发生的事件。
例如，为了设置超链接的外观，可以在网页首部定义下面的伪类样式。
<style type="text/css">
<!--
/＊ 链接未访问前，其文本不带下画线＊/
a:link{text-decoration:none;}
/＊ 用鼠标指针指向链接时，其文本呈蓝色，带下画线 ＊/
a:hover{text-decoration:underline;color:blue;}
/＊ 用鼠标单击链接但未释放鼠标时，其文本呈红色 ＊/
a:active{color:red;}
/＊ 对于已访问过的链接，其文本不带下画线，呈深灰色 ＊/
a:visited{text-decoration:none;color:#666666;}
-->
</style>
例3-2 定义和应用CSS规则，网页效果如图3-2所示。
图3-2 定义和应用CSS规则
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-02.html，把文档标题设置为“定义和应用CSS规则”。
2 切换到代码视图，在</head>标记之前创建一些CSS规则，源代码如下：
<style type="text/css">
<!--
body{text-align:center;}
.style1{
font-family:"方正黄草简体";
font-size:26px;
font-weight:normal;
}
span{
font-family:"Rosewood Std Regular", "Times New Roman";
color:#FF9900;
}
div.style2{
font-family:"华文彩云";
font-size:20px;
color:#0000FF;
} div.style2 span{
font-family:"Brush Script Std", "Times New Roman";
font-size:24px;
color:#FF0000;
} #style3{
font-family:"方正静蕾简体";
font-size:x-large;
color:#003366;
font-weight:bold;
}
-->
</style>
3 在<body>标记之后创建一些html元素并应用CSS规则，源代码如下：
<h1 class="style1">在h1元素中应用样式规则<span>style1</span></h1>
<div class="style2">在div元素中应用样式规则<span>style2</span></div>
<p id="style3">在p元素中应用样式规则<span>style3</span></p>
4 按F12键，在浏览器中查看网页效果。
3.1.4 创建和管理CSS样式
在Dreamweaver CS3中，利用【页面属性】对话框或属性检查器设置页面或页面元素属性时，将会自动在页面首部生成一些CSS规则，所用的选择符可能是HTML标记名称或类名称。若要创建更多的CSS规则并对现有CSS规则进行管理，可以通过【CSS样式】面板来实现。
1.创建CSS规则
在Dreamweaver CS3中，可以利用【CSS样式】面板创建CSS规则，操作方法如下。
1 选择【窗口】→【CSS样式】命令，或者按Shift+F11组合键，以打开【CSS样式】面板。
2 单击【CSS样式】面板右下角的【新建CSS规则】按钮，如图3-3所示。
3 在【新建CSS规则】对话框中，设置选择符的类型，如图3-4所示。
图3-3 新建CSS规则
图3-4 设置选择符和存储位置
● 若要使用类选择符，可单击【类（可应用于任何标签）】选项，并在【名称】框中指定选择符的名称。此名称应以句点“.”开头，若未输入句点，则Dreamweaver会自动添加上句点。
● 若要使用HTML标记作为选择符，可单击【标签（重新定义特定标签的外观）】选项，并从【标签】列表框中选择一个HTML标记。
● 若要使用id选择符、包含选择符、选择符分组、伪类选择符，以及要对选择符使用前缀（如p.style1），则单击【高级（ID、伪类选择器等）】选项，并在【选择器】框中输入选择符或从列表中选择伪类选择符。
4 设置CSS规则的存储位置，可以选择下列选项之一：
● 若要把CSS规则存储在单独的CSS样式表文件中，可单击【定义在】右边的单选按钮，并在旁边的列表框中选择【（新建样式表文件）】或选择一个已经存在的CSS样式表文件。
● 若要把CSS规则存储在当前页面的首部，可选择【仅对该文档】选项。
5 若在上一步选择把CSS规则存储在新建的样式表文件中，则会弹出【保存样式表文件为】对话框，在这里指定目标文件夹和样式表文件名。
6 设置选择符类型和CSS规则存储位置后，单击【确定】按钮。
7 此时将打开CSS规则定义对话框，该对话框由【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】及【扩展】等类别组成，可以用来对大多数CSS属性进行设置，而不必手工输入CSS代码，如图3-5所示。
图3-5 CSS规则定义对话框
2.管理CSS规则
在Dreamweaver CS3中，可以利用【CSS样式】面板对样式表进行管理。这个面板有两种工作模式，即“当前”模式和“全部”模式。在“当前”模式下，可以跟踪影响当前所选页面元素的CSS规则和属性，在“全部”模式下可以跟踪影响整个文档的规则和属性。使用【CSS样式】面板顶部的切换按钮可以在两种模式之间切换，并在两种模式下对CSS属性进行修改，如图3-6所示。
A-显示类别视图 B-显示列表视图 C-显示设置属性
D-附加样式表 E-新建CSS规则 F-编辑样式 G-删除CSS样式
图3-6 利用CSS样式面板管理CSS规则
使用【CSS样式】面板可以查看、创建、编辑和删除CSS样式。
● 若要对CSS规则定义进行修改，可选择该规则并单击【编辑样式】按钮
，然后利用CSS规则定义对话框对CSS属性进行修改。如果了解CSS属性的含义，也可以在【CSS样式】面板下方的属性列表中对CSS属性进行修改。
● 若要把当前页面链接到外部样式表文件，可单击【附加样式表】按钮
。
● 若要创建新的CSS规则，可单击【新建CSS规则】按钮
。
● 若要删除CSS规则，可选择该样式并单击【删除CSS样式】按钮
。
● 若要对CSS规则进行重命名，可用鼠标右键单击该规则并从弹出菜单中选择【重命名】命令。
3.1.5 CSS样式应用
按照存储位置，CSS样式表分为内嵌样式表和外部样式表，前者包含在网页首部，后者存储在单独的样式表文件中，此外还可以在HTML元素中通过style属性直接设置各种CSS属性。
1.内嵌CSS样式表
内嵌CSS样式表是一系列包含在HTML文档首部的<style>与</style>标记之间的CSS规则。<style>标记用于指定页面的样式表，语法如下：
<style type="text/css">
<!--
样式表内容
-->
</style>
style元素只能在HTML文档的首部使用。Internet Explorer 4.0及以后版本允许多个样式块。在一个网页中定义的样式表，只能应用于当前网页内的元素。
2.外部CSS样式表
CSS样式表的内容也可以存储在独立的文件中，其文件扩展名为.css。在Dreamweaver CS3中，可以利用【CSS样式】面板创建新的CSS规则并保存在样式表文件中，也可以创建CSS样式文件。对于嵌入网页中的样式表或独立文件中的样式表，都可以利用CSS规则定义对话框或【CSS样式】面板进行编辑和管理，并通过属性检查器应用于页面元素。
使用外部样式表文件的最大优点在于可以把CSS规则应用于站点内的多个网页，从而确保站点网页外观的一致性。当编辑外部样式表时，链接到该样式表的所有文档会全部更新以反映所做的更改。
若要在一个网页中应用外部样式表，可以通过以下两种方式实现。
● 在页面首部使用<link>标记链接到外部样式表，语法如下：
<link href="URL" rel="stylesheet" type="text/css" />
其中href属性指定要链接的外部样式表文件的路径。
● 在页面首部使用导入指令@import导入外部样式表，语法如下：
<style type="text/css">
<!--
@import url("URL");
-->
</style>
其中URL参数指定要导入的外部样式表文件的路径。
在Dreamweaver CS3中，通过以下操作链接或导入外部样式表。
1 打开或创建一个HTML文档。
2 选择【窗口】→【CSS样式】命令，以打开CSS样式面板。
3 在CSS样式面板中，单击【附加样式表】按钮，如图3-7所示。
4 当出现如图3-8所示的【链接外部样式表】对话框后，执行下列操作之一。
图3-7 附加外部样式表文件
图3-8 指定样式表文件和添加方式
● 单击【浏览】按钮，查找并选择CSS样式表文件。
● 在【文件/URL】框中，输入CSS样式表文件的路径。
5 对于【添加为】，选择下列选项之一。
● 若要创建当前网页与外部样式表之间的链接，可选择【链接】。
● 若要在当前网页中导入外部样式表，可选择【导入】。
6 单击【预览】按钮，确认样式表是否将所需的样式应用于当前页面。如果应用的样式没有达到预期效果，可单击【取消】按钮删除该样式表，使页面回复到原来的外观。
7 单击【确定】按钮。
3.对页面元素应用CSS规则
不论是内嵌样式表还是附加到网页上的外部样式表，对页面元素应用CSS规则的方法都是一样的。
（1）若以HTML标记作为选择符定义CSS规则，则该规则自动应用于所有通过此标记定义的元素。
（2）若以类选择符定义CSS规则，则该规则通过设置class属性应用于页面元素。在Dreamweaver CS3中，可以从属性检查器的【类】列表框中选择类样式；若要清除先前应用的类，从该列表框中选择【无】即可。
图3-9 通过设置ID应用CSS规则
（3）若以id选择符定义CSS规则，则该规则通过设置id标识符应用于页面元素。在Dreamweaver CS3中，可在标签选择器上用鼠标右键单击页面元素，并从弹出菜单中选择所需要的选择符，如图3-9所示。
4.内联CSS样式
内联CSS样式是通过style属性在HTML标记的特定实例中定义的，可以出现在整个HTML文档内。语法如下：
<tagName style="属性:值;属性:值;..."></tagName>
<tagName style="属性:值;属性:值;..." />
例如，下面的<input>标记通过style属性设置了提交按钮的字体、字号和文字颜色：
<input type="submit" name="btnSubmit"
value="提交" style="font-family:宋体;font-size:9pt;color:#0000FF" />
对于同一个页面元素，如果同时通过设置id、class和style属性应用了不同的CSS样式规则，则作用的优先顺序是：style属性最高，id属性次之，class属性更次之。