《Dreamweaver 8案例教程》课件第8章_第1页
《Dreamweaver 8案例教程》课件第8章_第2页
《Dreamweaver 8案例教程》课件第8章_第3页
《Dreamweaver 8案例教程》课件第8章_第4页
《Dreamweaver 8案例教程》课件第8章_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章学习目标CSS样式简介8.1

创建CSS样式8.2编辑CSS样式8.3设置CSS样式参数8.6链接到CSS样式表8.4导出CSS样式表8.58.1

CSS样式简介

CSS是CascadingStyleSheets（层叠样式表）的简称。更多的人把它称为样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在我们丰富的想象力下千变万化。层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML代码）位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件（外部样式表）或HTML文档的另一部分（通常为<head>部分）中。使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。8.1

CSS样式简介术语“层叠”是指对同一个元素或Web页面应用多个样式的能力。例如，可以创建一个CSS规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的Web页面上的元素，并最终创建出我们想要的设计。8.2创建CSS样式使用CSS样式可以使网页的风格协调统一。在本节中，我们将介绍CSS样式的创建和应用方法。返回8.2.1打开CSS样式面板

单击“窗口”|“CSS样式”命令或按Shift+F11快捷键，即可打开CSS样式面板，如图8-1所示。图8-1CSS样式面板8.2.2创建新的CSS样式（1）单击“窗口”|“CSS样式”，打开CSS样式面板。如图8-1所示。（2）单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框，如图8-2所示。图8-2新建CSS规则对话框8.2.2创建新的CSS样式（3）为新建的CSS样式输入或选择名称、标签或选择器。（4）在“定义在”区域中选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。设置完毕，单击“确定”按钮即可。

（5）“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以做不同方面的定义，可以根据需要进行设定。定义完毕后，单击“确定”按钮，完成创建CSS样式。8.2.3应用自定义的CSS样式创建了CSS样式后，在文档窗口中选中将要应用该样式的文本，然后再启动CSS样式面板，选择要应用的样式即可，如图8-3所示。图8-3应用自定义的CSS样式

8.3编辑CSS样式

保存了新的CSS样式后，即可打开CSS编辑器，如图8-8所示。在该对话框中我们可以详细定制样式的格式。CSS样式表可以定义包括许多类型的格式，如文本，背景，边框等，下面我们将一一进行介绍。返回8.3.1文本的定义面板从“CSS规则定义”对话框的左边目录列表中选择“类型”，则在右边的区域可以设置有关的格式。如字体、大小、样式、行高、修饰、粗细、变体、大小写、颜色等。8.3.2背景的定义面板从“CSS规则定义”对话框的左边目录列表中选择“背景”，则在右边的区域可以设置CSS样式的背景格式，如图8-4所示。图8-4背景的定义面板

8.3.3区块的定义面板从“CSS规则定义”对话框的左边目录列表中选择“区块”，则在右边的区域可以设置有关CSS样式的块格式，如图8-5所示。图8-5区块的定义面板

8.3.4方框的定义面板从“CSS规则定义”对话框的左边目录列表中选择“方块”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-6所示。图8-6方框的定义面板

8.3.5边框的定义面板从“CSS规则定义”对话框的左边目录列表中选择“边框”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-7所示。图8-7边框的定义面板

8.3.6列表的定义面板从“CSS规则定义”对话框的左边目录列表中选择“列表”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-8所示。图8-8列表的定义面板

8.3.7位置的定义面板从“CSS规则定义”对话框的左边目录列表中选择“位置”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-9所示。图8-9位置的定义面板

8.3.8CSS的扩展面板从“CSS规则定义”对话框的左边目录列表中选择“扩展”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-10所示。图8-10CSS的扩展面板

8.4链接到CSS样式表方法一：在CSS样式面板中单击“附加样式表”按钮，打开“链接外部样式表”对话框，如图8-11所示。方法二：单击“文本”|“CSS样式”|“附加样式表”菜单项，也可以打开“链接外部样式表”对话框。返回图8-11链接外部样式表对话框

8.5导出CSS样式表方法一：单击“文件”|“导出”|“CSS样式”菜单项，打开“导出样式为CSS文件”对话框，如图8-12所示。返回图8-12导出CSS样式对话框

8.5导出CSS样式表方法二：单击“文本”|“CSS样式”|“导出”菜单项，也可以打开“导出样式为CSS文件“对话框。在该对话框中，我们可以设定CSS文件的名称和保存路径，设置完毕，单击“保存”按钮即可。8.6设置CSS样式参数1.设置CSS样式参数：（1）单击“编辑”|“首选参数”命令，打开Dreamweaver首选参数设置对话框。（2）从左边选择“CSS样式”选项卡，切换到CSS样式表参数设置面板，即可在对话框的右边区域设置CSS样式代码的速记形式，如图8-13所示。（3）在“当创建CSS规则时：使用速记”区域中，允许设置在创建CSS样式时要对哪些样式格式使用速记形式。选中相应的复选框，即可在创建相应的样式格式时，使用速记形式。

返回8.6设置CSS样式参数（4）在“当编辑CSS规则时：使用速记”区域中，可以选择在什

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论