第9章 层叠样式表的应用VIP专享VIP免费

《网页制作基础教程（Dreamweaver8.0）》电子教案葛艳玲主编葛艳玲主编ISBN7－121－02882－4第第99章章CSSCSS样式表的应用样式表的应用本章重点：创建、编辑CSS样式，创建、编辑、选用CSS外部样式表，常用CSS特效滤镜的使用方法。第第99章章CSSCSS样式表的应用样式表的应用9.1使用CSS样式格式化网页元素9.2CSS样式概述9.3【CSS样式】面板的使用9.4实战演练NoImage网页制作网页制作基础教程基础教程9.1使用CSS样式格式化网页元素9.1.1案例综述为了使网页具有同一的风格，我们通常在网页中使用CSS样式美化、格式化页面。NoImage网页制作网页制作基础教程基础教程9.1使用CSS样式格式化网页元素9.1.2案例分析CSS样式的创建有三种方式：一、是使用【属性】检查器或菜单命令创建应用于文本的样式的CSS规则；二、是在【页面属性】对话框中设置；三、是使用“CSS样式”面板创建和编辑CSS规则和属性。NoImage网页制作网页制作基础教程基础教程9.1使用CSS样式格式化网页元素9.1.3实现步骤一、打开HTML网页二、设置页面属性――添加嵌入头部的CSS样式三、用【CSS样式】面板创建CSS样式四、在页面中应用CSS样式五、链接样式表，统一网站风格。NoImage网页制作网页制作基础教程基础教程9.2CSS样式概述9.2.1CSS的特点其特点可以归结为以下3点：1．控制页面中的每一个元素（精确定位）。2．对HTML语言处理样式的最好补充。3．把内容和格式处理相分离，减少工作量。NoImage网页制作网页制作基础教程基础教程9.2CSS样式概述9.2.2CSS的类型自定义CSS样式自定义CSS样式（也称为类样式），可以将样式属性设置为任何文本范围或文本块。HTML标签样式HTML标签样式，用于重新定义特定标签，如H1的格式。创建或更改H1标签的CSS样式时，所有用H1标签设置了格式的文本都立即更新。CSS选择器样式CSS选择器样式重定义特定标签组合的格式（如每当H2标题出现在表格单元格内时都应用tdh2），或重定义包含特定id属性的所有标签的格式。NoImage网页制作网页制作基础教程基础教程9.2CSS样式概述9.2.3CSS的存在方式1．外部文件方式外部CSS样式文件，是一系列存储在一个单独的外部文件.css文件（并非HTML文件）中的CSS样式。CSS文件的引用是在HTML的标签之间编写下列语句：其中的Style.css文件应为已编好的样式表文件。NoImage网页制作网页制作基础教程基础教程2.内部文档头方式内部（或嵌入式）CSS样式表，是一系列包含在HTML文档head部分的style标签内的CSS样式。将风格直接定义在文档头之间，如：9.2CSS样式概述NoImage网页制作网页制作基础教程基础教程3.直接插入式直接插入式很简单，只需在每个HTML标签后书写CSS属性即可。例如：规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：9.2CSS样式概述NoImage网页制作网页制作基础教程基础教程9.2.4CSS在Dreamweaver中的创建方法1、在“页面属性”中设置9.2CSS样式概述切换到“代码”视图，可以看到对“页面属性”进行的设置，变成了一段CSS样式代码，嵌在文档头之间NoImage网页制作网页制作基础教程基础教程2、文本编辑Dreamweaver8在属性检查器中增加了“样式”选项，这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，“样式”中套用样式；如果套用的CSS样式不是文字，而是表格，同样可以在属性面板中设置CSS。在属性面板中都有一个类别（Class），在这里就可以设计表格的CSS样式。9.2CSS样式概述NoImage网页制作网页制作基础教程基础教程3、CSS样式面板【CSS样式】面板集成在【CSS】面板组中，在此面板中可以方便地进行CSS样式的添加、编辑、查看属性和删除等样式的管理。9.2CSS样式概述NoImage网页制作网页制作基础教程基础教程9.3【CSS样式】面板的使用9.3.1认识CSS样式面板附加样式新建样式编辑样式删除样式样式属性样式列表2、【CSS样式】面板的结构1...