第5章
CSS基础
在早期的Web设计中，网页完全由一些简单排版的文本和图像组成，HTML语言允许使用一些描述性的标签来对网页进行美化设计。然而随着网页技术的发展，简单的HTML标签已不能满足人们对网页美观的要求。于是，W3C制订了CSS的技术规范，希望通过CSS来帮助网页设计师们设计出各种精美的网页。
CSS技术在网页中主要用于布局和美化，与XHTML的有机结合可以使Web更加结构化、标准化。作为最重要的网页布局与美化工具之一，CSS在近年普及得非常迅速。国内几乎所有的大型商业网站都在使用CSS来为网页布局，并对网页的各种对象进行美化设计。
本章学习要点：
> 了解CSS样式简介及分类
> 掌握CSS样式表语法
> 掌握添加CSS样式
> 了解CSS选择
> 掌握CSS属性
5.1 CSS样式表基础
CSS（Cascading Style Sheet，层叠样式表）是一种用于网页设计、无需编译、由网页浏览器直接解析的标记语言。在网页中，CSS的作用是对XHTML中的对象进行描述和定义，并通过这些描述和定义控制网页中的对象以及网页整体样式。
5.1.1 CSS样式简介
Dreamweaver拥有强大的CSS编辑功能。在Dreamweaver中编辑CSS，需要使用到CSS面板。通过CSS面板，可以为网页添加、删除、编辑CSS样式代码。
在Dreamweaver中执行【窗口】|【CSS样式】命令（或按Shift+F11组合键），即可打开CSS面板。该面板分为两个部分，即所有规则部分和样式属性部分。所有规则部分显示当前网页中的所有CSS样式，而样式属性部分则列出当前选择的CSS样式定义了哪些属性，如图5-1所示。
在CSS面板中，可以通过一些按钮来对网页的CSS规则进行操作，见表5-1。
CSS面板的按钮
按钮
名称
功能
按钮
名称
功能
切换到所有（文档）模式
显示当前网页中所有的CSS规则
附加样式表
为网页添加外部CSS样式链接
切换到当前选择模式
显示当前选择的网页对象拥有的CSS规则
新建CSS规则
为网页创建CSS 样式
显示类别视图
显示所有CSS样式的 属性
编辑样式
编辑当前选择的CSS样式
显示列表视图
显示当前选择的网页对象可使用的CSS规则
删除CSS规则
删除当前选择的CSS样式
只显示设置 属性
显示当前选择的网页对象已使用的CSS规则
使用Dreamweaver为网页创建CSS规则，可以单击【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中设置新CSS规则的基本参数，如图5-2所示。
在该对话框中，可以创建不同类型的CSS样式。其中，对话框中详细参数内容见表5-2。
新建CSS规则的参数
选 项
作 用
选择器类型
类
创建可作为class属性应用于文本范围或文本块的自定义样式，然后在【名称】文本框中输入样式名称
标签
重定义特定 HTML 标签的默认格式设置，然后在【标签】文本框中输入一个HTML标签，或从下拉式菜单中选择一个标签
高级
为具体某个标签组合或所有包含特定ID属性的标签定义格式设置，然后在【选择器】文本框中输入一个或多个HTML标签，或从下拉式菜单中选择一个标签。下拉式菜单中提供的选择器（称作伪类选择器）包括 a:link、a:visited、a:hover和a:active
定义在
新建样式表文件
创建外部CSS样式时选择此选项
仅对该文档
在当前文档中内部CSS样式时选择此选项
如果使用【新建CSS规则】对话框创建外部CSS样式，Dreamweaver将提示保存外部CSS链接文件。并在保存该文件后使其自动打开，以提供给网页设计者进行编辑。
CSS是一种非常重要的网页设计工具。目前，几乎所有的网页设计都离不开CSS。因此，在设计网页前有必要了解CSS的基本语法及其结构。
CSS的语句结构非常简单，每段CSS代码由两个部分组成，即选择器（Selector）和声明（Declaration）。声明又包括属性以及属性值两部分，这两部分必须写在大括号“{}”内。CSS代码书写格式如下所示。
Selector {
/*选择器*/
Property：value }
/*属性：属性值*/
一段CSS代码可包含多个声明。声明之间用分号“；”隔开。为使代码更加规范整齐，通常在每条声明后都加上分号（即使该段CSS代码仅有一条声明）。一条声明的CSS代码：
img {
border:0;
}
多条声明的CSS代码：
body {
margin:0;
width:1003px; }
上面两段CSS代码的作用分别是定义网页主体元素（body标签）的边距、宽度，以及定义网页中图像对象（img标签）的边框。
5.1.2 CSS样式分类
CSS代码在网页中主要有3种存在的方式，即外部CSS、内部CSS和内联CSS，详细介绍如下。
1．外部CSS
外部CSS是一种独立的CSS样式，其一般将CSS代码存放在一个独立的文本文件中，扩展名为“.css”。
这种外部的CSS文件与网页文档并没有什么直接的关系，如果需要通过这些文件控制网页文档，则需要在网页文档中使用link标签导入。例如，使用CSS文档来定义一个网页的大小和边距。
……
