Dreamweaver课件：第8章 样式表.ppt

《Dreamweaver课件：第8章 样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第8章使用CSS样式表内容提要CSS样式表概述层叠样式应用技巧附加外部样式表的方法CSS滤镜效果应用学习目标学会使用CSS进行简单的页面布局了解CSS面板各功能区的使用方法，掌握附加或新建CSS样式的方法CSS样式表概述CSS（CascadingStyleSheet，级联样式表）样式是网页元素外观属性的集合，是一系列的格式规则，它允许网页设计者定义文本、表格、图像、表单等网页元素的样式。层叠样式应用技巧创建CSS样式样式的定义管理CSS样式应用CSS样式表创建CSS样式CSS样式的新建、应用及编辑等操

2、作都是在“CSS样式”面板中完成的。认识“CSS”样式面板创建CSS样式认识“CSS”样式面板“CSS样式”面板在“设计”面板组中，如果面板组中没有“CSS样式”面板，选择[窗口]中[CSS样式]菜单命令，或按【Shift+F11】键即可打开“CSS样式”面板，如图8-1所示。面板中各按钮的功能如下。：单击该按钮可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。：单击该按钮可新建CSS样式。：单击该按钮可打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行

3、编辑。：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何元素中的设置。：单击该按钮，可以打开“CSS样式”菜单，如图8-2所示，通过该菜单可以编辑、复制、删除或应用所选中的CSS样式，也可以新建CSS样式。图8-1图8-2创建CSS样式创建CSS样式的具体操作如下。（1）执行下列3种方法之一打开如图7-3所示的“新建CSS样式”对话框。图8-3在“CSS样式”面板中单击按钮。在“CSS样式”窗口中单击鼠标右键，在弹出的快捷菜单中选择“新建”命令。单击按钮，在弹出的“CSS样式”菜

4、单中选择“新建”命令。（2）在“名称”下拉列表框中输入新建CSS样式的文件名。（3）在“选择器类型”栏中选择所定义的样式类型，CSS样式的创建类型有以下3种。：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框，如图8-4所示。

5、在该下拉列表框中可选择重新定义的标签，如图8-5所示。：使用CSS选择器，表示要对特定的HTML标签组合或含有某个ID属性的所有标签进行重新定义。选中该单选项后“名称”下拉列表框变为“选择器”下拉列表框，如图8-6所示，可在该下拉列表框中选择需要使用的选择器类型，如图8-7所示。（4）在“定义在”栏中选择样式的种类。：选中该单选项，可以定义一个外部链接的CSS样式。：选中该单选项，定义一个仅应用于当前页面的CSS样式。图8-4图8-5图8-6图8-7如果在“定义在”栏中选中了单选项，则会打开“保存样式

6、表文件为”对话框，在该对话框中保存新建的样式表文件，如图8-8所示。若选中单选项，则直接打开如图8-9所示的对话框。（5）在“分类”列表中选择要定义的样式类型，再在右侧设置相应参数，具体的定义方法将在下一节讲解。（6）设置完后单击按钮，完成CSS样式的创建。图8-8图8-9创建了新的样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式有8种，下面分别介绍其设置方法。设置CSS样式类型格式设置CSS样式背景格式设置CSS样式区块格式设置CSS样式方框格式设置CSS样式边框格式设置CSS样式列表格

7、式设置CSS样式定位格式设置CSS样式扩展格式样式的定义设置CSS样式的类型格式可以为页面中的文本加入字体、大小、风格等类型格式，具体操作如下。（1）在“分类”列表中选择“类型”选项，列表右侧就会显示出“类型”选项的参数设置，如图8-10所示。其中各参数含义如下。字体：在该下拉列表框中可以输入字体类型，也可以单击按钮，从下拉列表中选择需要的字体。设置CSS样式类型格式大小：在该下拉列表框中可以直接输入样式文本的字号，或从下拉列表中选择需要的字号，当选择字号后，可以在其右侧的下拉列表框中选择字号的单位。

8、粗细：在该下拉列表框中可输入字体的粗细程度，也可从下拉列表中选择需要的粗细程度。样式：在该下拉列表框中可输入字体的特殊格式，也可以从下拉列表中选择字体的特殊格式。变量：在该下拉列表中可选择字体的变形方式。行高：在该下拉列表中可选择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。大小写：在该下拉列表框中可以输入文本的大小写方式，也可以在下拉列表中选择文本的大小写方式。修饰：在该栏中设置文本的修饰效果，包括、、、、等复选框。颜色