第5章CSS样式及应用主要内容CSS样式的概念与作用CSS样式的格式规则及样式类型CSS样式设置与管理在网页设计与维护中应用CSS样式5.1CSS样式概述5.1.1CSS样式概念及作用CSS：CascadingStyleSheets，层叠样式表CSS是页面格式设置的一项技术，CSS包括一系列格式设置规则。利用CSS样式不仅可以对网页中的文本进行精确的格式化控制，设置字体、字号、颜色、背景、字符间距、行距、段落缩进等，还可以为网页设置背景色或背景图片，设置各种链接动态效果等。把CSS样式保存为外部文件，可以控制多个网页。对CSS样式进行修改时，应用该样式的文档格式会自动发生改变。CSS最主要的目的是使页面格式设置与页面内容独立开来，可以单独设置样式然后应用到页面中，提高网页设计和管理维护的效率。5.1.2CSS格式设置规则CSS格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如P、H1、类名或ID），声明用于定义元素样式。H1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}其中，H1是选择器，介于花括号“{}”之间的所有内容都是声明。5.1.3CSS样式的存在形式及样式类型⑴外部CSS样式表外部样式就是按照CSS的语法规则编写的文本文件，利用HTML文档的link标签，将外部CSS文件连接到文档中，实现对文档的格式控制。⑵内部CSS样式内部CSS样式也称嵌入式样式，它保存于HTML文档中，样式代码直接出现在HTML文档的-标签内，具体包括在style标签中。内部CSS样式仅作用与它所在的HTML文档。⑶内联样式内联样式是直接在标签内使用的样式。如：
内联样式主要用于对特定的标签作具体的调整，内联样式的作用范围仅限于该特定标签。5.1.3CSS样式的存在形式及样式类型2．样式类型⑴类样式类样式可以将样式属性应用于任何文本范围或文本块。⑵HTML标签样式HTML标签样式用于重定义特定标签的格式。创建或改变这类样式时，所有应用该标记的文本会自动更新。例如重定义h1标签，当创建或更改h1标签的CSS样式时，所有用h1标签设置了格式的文本都会立即更新。⑶CSS选择器样式CSS选择器样式（高级样式）用于重新定义特定元素组合的格式设置，或重新定义CSS允许的其他选择器表单的格式设置。5.2CSS样式的设置与管理5.2.1样式面板CSS样式面板提供了对样式表设置和管理的全部功能。打开文档后，通过“窗口/CSS样式”菜单即可启用样式面板。未定义和使用样式时，样式面板不显示任何样式内容；定义了样式后，样式面板将显示已有的样式和使用中的样式信息。5.2.1样式面板1．“全部”视图和“正在”视图样式面板有两个视图，即“全部”视图和“正在”视图。“全部”视图显示当前文档中定义的样式和附加到当前文档中的样式，“正在”视图只显示活动文档的选定项目中使用的样式。2．“全部”视图结构由所有规则”窗格和“属性”窗格构成。3．“正在”视图结构由“所选内容的摘要”窗格、“规则”窗格和“属性”窗格构成。4．“属性”窗格的三种显示视图“类别”视图、“列表”视图和“只显示设置属性”视图。5.2.2创建CSS样式的一般过程创建CSS样式的主要环节有三个：选择CSS样式类型、确定CSS样式的形式、设置CSS样式的格式。一般过程：⑴打开“新建CSS规则”对话框。⑵确定CSS样式类型。创建可作为class属性应用于文本范围或文本块的自定义样式重定义特定HTML标签的默认格式设置为具体某个标签组合或所有包含特定Id属性的标签定义格式设置⑶确定CSS样式的形式。⑷在“CSS规则定义”对话框中进行格式定义，设置CSS样式的格式。5.2.2创建CSS样式的一般过程“CSS规则定义”对话框中的主要项目CSS类型属性CSS样式背景属性CSS样式区块属性CSS样式方框属性CSS样式边框属性CSS样式列表属性CSS样式定位属性CSS样式扩展属性5.2.3创建内部样式示例1．示例在当前文档中创建一个内部样式，样式名为Inside,样式内容如下：字体格式：华文行楷，大小12像素，行高16像素，颜色码006600，细体显示；段落格式：首行左缩进20像素，字间距5像素，居中对齐。5.2.3创建内部样式示例2．操作步骤⑴将插入点放在文档中，打开“新建CS...
