Dreamweaver中CSS样式.ppt

《Dreamweaver中CSS样式.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第6章CSS样式本章主要内容是CSS样式的创建方法和它的应用，并就如何编辑CSS样式中的文字格式、背景格式、文本块格式、方框格式、边框格式、列表格式、定位格式、扩展格式等作了详细的讲解，最后以一个实例说明了如何应用CSS样式对网页进行编辑。6.1CSS样式概述CSS是层叠样式表（CascadingStyleSheets）的简称，利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式不仅能够控制一篇文档中的文本样式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。CSS样式通常用名称或是

2、HTML标记来表示，HTML文档中的CSS样式不仅可以控制大多数传统的文本格式属性，如字体、字号和对齐方式等，还可以定义一些特殊的HTML属性，例如定位、特效和鼠标轮替等。CSS样式的定义代码一般书写在HTML文档的头部，通常由一系列样式的定义组成。它可以应用到使用标注HTML标记所格式化的文本上，可以定义到通过class属性所定义范围的文本上，也可以应用到其他的那些符合CSS标准规范的文本上。6.2创建CSS样式CSS样式最大的优点是它具有自动更新功能，当应用了CSS格式之后，如果不满意，仅需要修改CSS样式就可以更新所有的应用，而不用像设置HTML样式那样一个一个地修改。6

3、.2.1创建新CSS样式其操作步骤如下：1)在Dreamweaver中，单击“窗口”→“CSS样式”，打开CSS样式面板如图6-1所示。图6-1CSS样式面板2)CSS样式面板显示在设计浮动面板组，单击面板组右上角的“显示菜单”按钮，弹出下拉菜单如图6-2所示。图6-2CSS样式的下拉菜单3)从其中选择“新建”选项卡。或者单击CSS样式面板右下角的【新建CSS样式】按钮，打开如图6-3所示的新建样式对话框。图6-3新建样式对话框4)选择CSS样式类型：“类（可应用于任何标签）”，可以生成一个新的样式表，制作完毕后可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面选中对

4、象，然后选择样式即可。该类型样式名称必须以英文句点“.”开头，如果没有输入句点，Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被应用于文档中任何文本的样式类型，而不用考虑控制文本的标签。所以可用于类样式的名称都将显示在样式工具栏中。选择“标签（重新定义特定标签的外观）”，可以将现有的标签赋上样式，制作完毕以后不需要选中对象就可以直接应用到页面上去。5)定义一个外部连接的CSS还是定义一个仅应用于当前文档的CSS。“自定义”：定义一个外部连接的CSS。“仅仅对该文档”：定义的CSS样式只能在当前文档中使用。6)单击【确定】按钮，出现保存样式表对话框，如图6-4所

5、示。图6-4保存样式表7)选择样式表所保存的位置，单击【保存】按钮，出现CSS设置对话框如图6-5所示，进行相应的属性设置，单击【确定】，一个CSS样式创建成功。图6-5CSS设置对话框6.2.2应用CSS样式1.如果要在文档中应用样式操作方法如下：1)将插入点放置在段落之中，即选择了整个段落，可以对其设置格式；也可以选中多个段落，对多个段落设置格式；选择某些字符还可以对这些字符设置格式。2)在CSS样式面板中，用鼠标点击某个定义好的样式，则该CSS样式就会应用在这些文档上。2.应用外部链接式CSS样式1)打开CSS样式面板。2)单击CSS样式面板右下角的【附加样式表】按钮，出

6、现如图6-6所示“链接外部样式表”对话框。3)单击【浏览】按钮，从所保存的CSS文件中选取一个，即可应用。图6-6“链接外部样式表”对话框3.在现有样式的基础上创建新样式1)在CSS样式面板上，选中作为基础的样式。2)单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，如图6-7所示。图6-7CSS样式的快捷菜单3)选择“重制”命令，系统弹出如图6-8所示对话框，并显示该样式的设置。4)在对话框中选择新样式的类型和定义，输入新的名称。5)单击【确定】按钮，确定操作。图6-8“重制CSS样式”对话框4.删除某个样式在CSS样式面板上，

7、选中要删除的样式。单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，选择“删除”命令。或者单击面板菜单右下角的“删除CSS样式”命令按钮。将删除被选择样式，同时该样式从样式列表中消失。6.3设置CSS样式格式在Dreamweaver中，通过CSS样式定义对话框可以对CSS样式格式进行精确定制，在CSS面板上新建CSS样式时可以进行设置，或者通过可以打开如图6-5所示CSS样式定义对话框，从中可以看出，CSS共有8个选项。6.3.1编辑文字格式在