Dreamweaver中CSS样式.pptVIP

第6章 CSS样式 本章主要内容是CSS样式的创建方法和它的应用，并就如何编辑CSS样式中的文字格式、背景格式、文本块格式、方框格式、边框格式、列表格式、定位格式、扩展格式等作了详细的讲解，最后以一个实例说明了如何应用CSS样式对网页进行编辑。 6.1 CSS样式概述 CSS是层叠样式表（Cascading Style Sheets）的简称，利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式不仅能够控制一篇文档中的文本样式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。 CSS样式通常用名称或是HTML标记来表示，HTML文档中的CSS样式不仅可以控制大多数传统的文本格式属性，如字体、字号和对齐方式等，还可以定义一些特殊的HTML属性，例如定位、特效和鼠标轮替等。 CSS样式的定义代码一般书写在HTML文档的头部，通常由一系列样式的定义组成。它可以应用到使用标注HTML标记所格式化的文本上，可以定义到通过class属性所定义范围的文本上，也可以应用到其他的那些符合CSS标准规范的文本上。 6.2 创建CSS样式 CSS样式最大的优点是它具有自动更新功能，当应用了CSS格式之后，如果不满意，仅需要修改CSS样式就可以更新所有的应用，而不用像设置HTML样式那样一个一个地修改。 6.2.1 创建新CSS样式 其操作步骤如下： 1) 在Dreamweaver中，单击“窗口”→“CSS样式”，打开CSS 样式面板如图6-1所示。 2) CSS样式面板显示在设计浮动面板组，单击面板组右上角的“显示菜单”按钮 ，弹出下拉菜单如图6-2所示。 3) 从其中选择“新建”选项卡。或者单击CSS样式面板右下角的【新建CSS样式】按钮 ，打开如图6-3所示的新建样式对话框。 4) 选择CSS样式类型： “类（可应用于任何标签）”，可以生成一个新的样式表，制作完毕后可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面选中对象，然后选择样式即可。该类型样式名称必须以英文句点“.”开头，如果没有输入句点，Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被应用于文档中任何文本的样式类型，而不用考虑控制文本的标签。所以可用于类样式的名称都将显示在样式工具栏中。 选择“标签（重新定义特定标签的外观）”，可以将现有的标签赋上样式，制作完毕以后不需要选中对象就可以直接应用到页面上去。 5) 定义一个外部连接的CSS还是定义一个仅应用于当前文档的CSS。 “自定义”：定义一个外部连接的CSS。 “仅仅对该文档”：定义的CSS样式只能在当前文档中使用。 6) 单击【确定】按钮，出现保存样式表对话框，如图6-4所示。 7) 选择样式表所保存的位置，单击【保存】按钮，出现CSS设置对话框如图6-5所示，进行相应的属性设置，单击【确定】，一个CSS样式创建成功。 6.2.2 应用CSS样式 1. 如果要在文档中应用样式 操作方法如下： 1) 将插入点放置在段落之中，即选择了整个段落，可以对其设置格式；也可以选中多个段落，对多个段落设置格式；选择某些字符还可以对这些字符设置格式。 2) 在CSS样式面板中，用鼠标点击某个定义好的样式，则该CSS样式就会应用在这些文档上。 2. 应用外部链接式CSS样式 1) 打开CSS样式面板。 2) 单击CSS样式面板右下角的【附加样式表】按钮，出现如图6-6所示“链接外部样式表”对话框。 3) 单击【浏览】按钮，从所保存的CSS文件中选取一个，即可应用。 3. 在现有样式的基础上创建新样式 1) 在CSS样式面板上，选中作为基础的样式。 2) 单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，如图6-7所示。 3) 选择“重制”命令，系统弹出如图6-8所示对话框，并显示该样式的设置。 4) 在对话框中选择新样式的类型和定义，输入新的名称。 5) 单击【确定】按钮，确定操作。 4. 删除某个样式 在CSS样式面板上，选中要删除的样式。单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，选择“删除”命令。或者单击面板菜单右下角的“删除CSS样式”命令按钮。将删除被选择样式，同时该样式从样式列表中消失。 6.3 设置CSS样式格式 在Dreamweaver中，通过CSS样式定义对话框可以对CSS样式格式进行精确定制，在CSS面板上新建CSS样式时可以进行设置，或者