1.2 在动态网站中使用CSS概述
body {
font-size:12px;
color:#333;
}
上面就是一个样式，它定义网页内字体大小为12像素，字体颜色为深灰色。这犹如贴在网页对象上的标签，负责告诉浏览器该如何显示网页的外观。从这点来看，可以把CSS看作是一种简单的标记语言，与HTML语言类似，都属于一种高级语言。但是它们在网页中分工不同，HTML负责网页结构的构建，而CSS负责网页对象的样式呈现，说通俗点就是如何修饰网页的结构和内容。CSS的最终目的就是如何把网页设计得更好看，更易于阅读。
CSS在Web应用和开发中属于一种轻量级的语言，比HTML还要简单。但是由于浏览器兼容问题、CSS编辑工具和支持技术的欠缺，以及传统网页设计习惯等因素无形中加大了CSS技术的学习和应用速度。
学习CSS时，你首先应该明确两个基本概念：层叠和样式。
l 层叠（Cascading）：这是CSS的核心概念之一。也就是说多个CSS样式可以作用于同一个对象，形成样式的层叠现象，CSS能够根据一套规则来决定对象应该继承哪些样式以及显示为什么样的效果。没有层叠这个核心规则，你会发现使用CSS会非常麻烦，似乎又要回到传统的使用HTML的属性来设置网页样式的老路。
l 样式（Style）：这是CSS的基础。CSS就是通过一个个样式来作用于网页对象，并规定它们呈现为不同的外观。网页的外观正是通过无数个大大小小的样式来描绘的。一个网页内部可能包含无数个CSS样式，同时每个CSS样式内部也包含无数个规则。我们可以看到上面为body对象定义的样式中就包含了两条规则，它们分别定义网页字体的大小和颜色。
1.2.1 认识CSS基本语法
CSS样式可以由三部分构成：选择器、属性和属性值（如图1-11所示）。而其中的每一个属性/属性值对又构成了一条规则，也称为一个声明。多个样式便构成了一张CSS样式表，CSS样式表可以保存在单独的文件中，这样就形成样式表文件（扩展名为.css），也可以保存在HTML文档中。
图 1-11
选择器有多种类型，灵活使用选择器可以设计出精妙的网页样式。这犹如Photoshop中的选取工具，Photoshop的所有编辑和操作都建立在选取区域基础之上，如何精确选取、如何快速选取决定了你的图像编辑和处理效果。同理，在CSS中如何巧妙结合不同类型的选择器来设置网页样式是一个很关键的操作。
常用选择器有三种：标签选择器、类选择器和ID选择器。
标签选择器一般用来定义HTML标签的样式，选择器的名称就是这些HTML标签名称。也许你对HTML提供的标签默认样式不满意。例如，你可能对于HTML默认8像素左右的的页边距非常不感冒，则可以定义下面样式清除这个默认值：
body {
margin:0;
padding:0;
}
或者对于段落默认的前后一个字距的段距不满意，则可以定义下面样式清除这个默认值：
p {
margin:0;
}
也许你还希望取消项目列表前面的项目符号，则可以使用下面样式：
ul,ol {
list-style-type:none;
}
也许你还不明白上面样式的具体含义，但是不要紧，只要你明白它们的结果，以及标签选择器有何作用就行了，不影响你的继续学习。因此，我们可以下一个这样的结论：
标签选择器用来修改HTML标签的默认样式，或者定义HTML标签的默认显示样式。
类选择器是另一种使用率比较高的选择器。所谓类，就是把网页内不同对象的相同样式集聚在一起定义，这样能够减轻CSS样式定义的工作量和降低代码容积。例如，网页中很多对象内字体颜色都显示为红色，则我们可以使用类选择器定义一个样式：
.red {
color:red;
}
其中“.red”就是一个类选择器，red就表示一个类（注意，类选择器前面要增加点号（.）前缀。这样我们就可以在网页中不同对象中调用该对象，例如，<div class="red">我显示为红色</div>。
如果网页中很多对象都显示为相同样式，适合使用类选择器来定义样式。因此，我们可以下一个这样的结论：
类选择器用来概括不同对象的相同样式。
一个类可以在不同对象中反复调用，同样一个对象也可以调用多个类样式。例如：
<style type="text/css">
.red {
color:red;
}
.bold {
font-weight:bold;
}
</style>
<div class="red bold">我显示为红色，同时还加粗显示</div>
ID选择器是与类选择器相对立的一种类型。类选择器倾向于并购，而ID选择器钟情于细分市场。当你把所有字体都定义12像素显示时，未免显得单一和武断，也许你希望脚本文本显示为10像素，或者标题文本显示为14像素，如此等等。这时我们就可以利用ID选择器具体勾勒每个对象的不同样式。例如：
<style type="text/css">
#red {
color:red;
}
#blue {
color:blue;
}
</style>
<p id="red ">本段显示为红色</p>
<p id="blue">本段显示为蓝色</p>
类选择器前面必须跟井号（#）前缀。因此，我们可以下一个这样的结论：
类选择器适合，且只能为某一个对象定义样式。
选择器的类型还很多，限于篇幅就不再详细叙述了，不过如果你掌握了上面三种选择器也就基本上够用了。另外，你还可以把多个选择器分成一组来定义相同的样式，这样就避免重复为不同选择器书写相同的样式，分组的方法是把多个选择器用逗号写在一起。例如：
h1, h2, h3, h4, h5, h6 {
color:blue;
}
在上面的样式中，把所有标题元素分为一组，并定义每个标题元素的文字都为绿色。
浅显认识了CSS选择器之后，下面我们再来了解CSS包含的属性。CSS包含150多个属性，这些属性又被分成很多种类，例如，字体属性、文本属性、背景属性、列表属性、布局属性、边框属性、定位属性等（详细说明可以参阅本书光盘中附赠的CSS参考手册），我们将在第5章中还将详细讲解。
1.2.2 应用CSS样式
定义完毕CSS样式之后，又如何将样式表加入到网页中呢？你可以采用以下三种方式将样式表加入网页中。
第一种方法是把样式表保存在外部文件中，然后把该样式表文件链接或导入到网页中。一般网站都采用这种方式，它能够实现在多个网页中重复利用同一张样式表文件定义的样式。链接的语法如下：
<link rel=stylesheet href="样式表文件URL" type="text/css">
导入样式表文件的语法如下：
<style type="text/css">
@import url("样式表文件URL ");
</style>
第二种方法是定义内部样式表，也就是在网页内部（一般位于头部）利用<style>标签来定义。例如：
<style type="text/css">
body {font: 10pt "Arial"}
p{font: 10pt/12pt "Arial"; color: black}
</style>
在<style>标签中需要定义type属性，设置为"text/css"，它表示该标签中包含的代码为CSS样式，以便于浏览器进行解析。这种方法适合在单独网页中定义样式，以便于管理。
第三种方法是定义内联样式，内联定义就是在标签内部使用style属性定义适用该标签的样式表属性。例如：
<p style="margin: 0.5in;">该段落四周被增加了半个字体高度左右的外补丁<p>
这种方式适合仅为单独的标签定义样式。这种方法设计比较方便，但是不便于管理，仅适合个别应用，不适合普遍使用。
1.2.3 Dreamweaver CS3对CSS的支持
Dreamweaver CS3对于CSS技术的支持主要集中在【CSS样式】面板中（如图1-12所示）。在该面板中你可以定义样式，导入或链接外部样式，并为网页中的对象应用样式，所有操作都是一站式完成。这对于初学者来说绝对是一个福音，想到要熟悉并记忆一百多个CSS属性，这对于任何一位设计师来说都不是件简单的事，而使用【CSS样式】面板提供的【CSS规则定义】对话框讲帮助你轻松完成所有样式的定义（如图1-13所示）。
除了【CSS样式】面板提供的便利的可视化CSS样式定义操作之后。Dreamweaver CS3还重新设计了新建项目的模板布局样式。这些模板全部采用CSS布局。在每个模板中都有大量的注释解释CSS布局，这非常适合广大初学者快速学习CSS布局技巧。
另外，Dreamweaver CS3支持了在网页中可视化操作和管理CSS代码。你可以使用鼠标轻松移动 CSS代码。例如，从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。所有操作都变得异常方便（详细讲解请参阅第5章内容。使用Device Central CS3工具还可以设计、预览和测试移动设备的CSS布局效果。
|
|
|
|
图 1-12 |
图 1-13 |
1.2.4 分析CSS在动态网站中的角色
把CSS和动态网站扯在一起，似乎有点风马牛不相及了。但是在开发动态网站中，CSS的作用不容忽视，虽然离开CSS，你依然可以开发出功能强大的动态网站，但是当Web 2.0风潮汹涌互联网时，你会发现CSS的作用愈加重要和关键。很多时候，我们需要结合CSS来动态控制网页的布局，以及利用CSS来设计动态网页的显示效果。
例如，在如图1-14所示的Google新闻咨询中文主页中，你可以动态定制网页的显示内容和方式。实际上它正是通过脚本动态控制CSS来实现的。
图 1-14
实际上，如果缺少了CSS技术的支持，设计类似的网页动态效果是非常困难的。CSS虽然不是动态网站的核心技术，但是绝对是一个不可或缺的配角。随着Ajax技术的广泛应用，这种趋势更为明显。当你在开发Web 2.0项目时，绝对不能够离开CSS的技术支持。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
