09-层叠样式表的应用教学.ppt

第9章　CSS样式表的应用 　　　本章重点：创建、编辑CSS样式，创建、编辑、选用CSS外部样式表，常用CSS特效滤镜的使用方法。 第9章　CSS样式表的应用 9.1 使用CSS样式格式化网页元素 　 9.2　CSS样式概述 9.3 【CSS样式】面板的使用 9.4 实战演练 　9.1　使用CSS样式格式化网页元素 9.1.1 案例综述 为了使网页具有同一的风格，我们通常在网页中使用CSS样式美化、格式化页面。 　9.1　使用CSS样式格式化网页元素 9.1.2 案例分析 CSS样式的创建有三种方式： 一、是使用【属性】检查器或菜单命令创建应用于文本的样式的CSS 规则； 二、是在【页面属性】对话框中设置； 三、是使用“CSS 样式”面板创建和编辑 CSS 规则和属性。 　9.1　使用CSS样式格式化网页元素 9.1.3　实现步骤 一、打开HTML网页 二、设置页面属性――添加嵌入头部的CSS样式 三、用【CSS样式】面板创建CSS样式 四、在页面中应用CSS样式 五、链接样式表，统一网站风格。 　9.2　CSS样式概述 9.2.1 CSS的特点 其特点可以归结为以下3点： 1．? 控制页面中的每一个元素（精确定位）。 2．? 对HTML语言处理样式的最好补充。 3．? 把内容和格式处理相分离，减少工作量。 9.2　CSS样式概述 9.2.2 CSS的类型 自定义CSS样式 自定义CSS样式（也称为类样式），可以将样式属性设置为任何文本范围或文本块。 HTML标签样式 HTML标签样式，用于重新定义特定标签，如H1的格式。创建或更改H1标签的CSS样式时，所有用H1标签设置了格式的文本都立即更新。 CSS选择器样式 CSS选择器样式重定义特定标签组合的格式（如每当H2标题出现在表格单元格内时都应用td h2），或重定义包含特定id属性的所有标签的格式。 9.2　CSS样式概述 9.2.3 CSS的3种存在方式 1．? 外部文件方式 外部CSS样式文件，是一系列存储在一个单独的外部文件.css文件（并非HTML文件）中的CSS样式。 CSS文件的引用是在HTML的head/head标签之间编写下列语句： head link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” /head 其中的Style.css文件应为已编好的样式表文件。 9.2　CSS样式概述 2.内部文档头方式 内部（或嵌入式）CSS样式表，是一系列包含在HTML文档head部分的style标签内的CSS样式。 将风格直接定义在文档头head/head之间 ，如： 　　　　　　　head 　　　　　　　style type=”text/css” 　　　　　　　!— 　　　　　　　样式表的具体内容 　　　　　　　-- 　　　　　　　/style 　　　　　　　/head 9.2　CSS样式概述 3.直接插入式 直接插入式很简单，只需在每个HTML标签后书写CSS属性即可。 例如：规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下： 　Table style=”color:red;font-size:10pt” 9.2　CSS样式概述 9.2.4 CSS在Dreamweaver中的创建方法 1、在“页面属性”中设置 　　 9.2　CSS样式概述 2、文本编辑 Dreamweaver 8在属性检查器中增加了“样式”选项，这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，“样式”中套用样式； 如果套用的CSS样式不是文字，而是表格，同样可以在属性面板中设置CSS。在属性面板中都有一个类别（Class），在这里就可以设计表格的CSS样式。 3、CSS样式面板 【CSS样式】面板集成在【CSS】面板组中，在此面板中可以方便地进行CSS样式的添加、编辑、查看属性和删除等样式的管理。 9.3　【CSS样式】面板的使用 9.3.1 CSS样式面板 9.3　【CSS样式】面板的使用 9.3.1 CSS样式面板 3、管理样式 9.3　【CSS样式】面板的使用 9.3.1 CSS样式面板 3、管理样式 包含三个允许在“属性”窗格中改变视图的按钮： 【类别】视图　将 Dreamweaver 支持的 CSS 属性划分为 8 个类别。每个类别的属性都包含在一个列表中，您可以单击类别名称旁边的加号 (+) 按钮展开或折叠它。 【列表】视图　按字母顺序显示 Dreamweaver 所支持的所有 CSS 属性。“设置属性”（蓝色）