第09章 使用CSS样式.ppt

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

1、网页制作基础教程（DreamweaverCS3）第9章　使用CSS样式本章重点：创建、编辑CSS样式，创建、编辑、选用CSS外部样式表，常用CSS特效滤镜的使用方法。第9章　使用CSS样式9.1使用CSS样式格式化页面9.2CSS样式概述9.3【CSS样式】面板的使用9.4CSS布局9.1使用CSS样式格式化页面9.1.1案例综述为了使网页具有同一的风格，我们通常在网页中使用CSS样式美化、格式化页面。9.1使用CSS样式格式化页面9.1.2案例分析CSS样式的创建有三种方式：一、是使用【属性】检查器或菜单

2、命令创建应用于文本的样式的CSS规则；二、是在【页面属性】对话框中设置；三、是使用“CSS样式”面板创建和编辑CSS规则和属性。9.1使用CSS样式格式化页面9.1.3　实现步骤一、打开HTML网页二、设置页面属性――添加嵌入头部的CSS样式三、用【CSS样式】面板创建CSS样式四、在页面中应用CSS样式五、链接样式表，统一网站风格。9.2CSS样式概述9.2.1CSS的特点其特点可以归结为以下3点：1．控制页面中的每一个元素（精确定位）。2．对HTML语言处理样式的最好补充。3．把内容和格式处理相分离，减少

3、工作量。9.2CSS样式概述9.2.2CSS的类型自定义CSS样式自定义CSS样式（也称为类样式），可以将样式属性设置为任何文本范围或文本块。HTML标签样式HTML标签样式，用于重新定义特定标签，如H1的格式。创建或更改H1标签的CSS样式时，所有用H1标签设置了格式的文本都立即更新。CSS选择器样式CSS选择器样式重定义特定标签组合的格式（如每当H2标题出现在表格单元格内时都应用tdh2），或重定义包含特定id属性的所有标签的格式。9.2CSS样式概述9.2.3CSS的存在方式1． 外部文件方式外部CSS

4、样式文件，是一系列存储在一个单独的外部文件.css文件（并非HTML文件）中的CSS样式。CSS文件的引用是在HTML的标签之间编写下列语句：其中的Style.css文件应为已编好的样式表文件。2.内部文档头方式内部（或嵌入式）CSS样式表，是一系列包含在HTML文档head部分的style标签内的CSS样式。将风格直接定义在

5、文档头之间，如：9.2CSS样式概述3.直接插入式直接插入式很简单，只需在每个HTML标签后书写CSS属性即可。例如：规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：9.2CSS样式概述9.2.4CSS在Dreamweaver中的创建方法1、在“页面属性”中设置9.2CSS

6、样式概述切换到“代码”视图，可以看到对“页面属性”进行的设置，变成了一段CSS样式代码，嵌在文档头之间2、文本编辑DreamweaverCS3在属性检查器中增加了“样式”选项，这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，“样式”中套用样式；如果套用的CSS样式不是文字，而是表格，同样可以在属性面板中设置CSS。在属性面板中都有一个类别（Class），在这里就可以设计表格的CSS样式。9.2CSS样式概述3、CSS样式面板【CSS样式】面板集成在【CSS】面板

7、组中，在此面板中可以方便地进行CSS样式的添加、编辑、查看属性和删除等样式的管理。9.2CSS样式概述9.3　【CSS样式】面板的使用9.3.1认识CSS样式面板附加样式新建样式编辑样式删除样式样式属性样式列表2、【CSS样式】面板的结构1、打开【CSS样式】面板【窗口】｜【CSS样式】命令9.3　【CSS样式】面板的使用9.3.1认识CSS样式面板3、管理样式查看属性视图按钮管理CSS规则按钮9.3　【CSS样式】面板的使用9.3.1CSS样式面板3、管理样式查看“属性”视图的按钮：【类别】视图　将Drea

8、mweaver支持的CSS属性划分为8个类别。每个类别的属性都包含在一个列表中，您可以单击类别名称旁边的加号(+)按钮展开或折叠它。【列表】视图　按字母顺序显示Dreamweaver所支持的所有CSS属性。“设置属性”（蓝色）将出现在列表顶部【设置属性】视图　仅显示那些已设置的属性。“设置属性”视图为默认视图。9.3　【CSS样式】面板的使用9.3.1CSS样式面板3、管理样式管理CSS样式按钮：【