第5章 使用CSS样式 实战Dreamweaver8网页制作教程电子教案.ppt

5.1.1 案例制作：书法背后的人生 5.* 第5章　使用CSS样式 学习目标 能够创建、编辑、删除CSS样式 能够创建自定义样式、重定义HTML标签、CSS选择器 能够应用CSS样式 5.1　CSS样式的建立与编辑 5.2　CSS样式的应用 本章内容 5.1　CSS样式的建立与编辑 　　通过本案例的操作，你将学会创建CSS样式的一般方法、如何创建自定义CSS样式、如何创建重定义HTML标签样式、如何创建CSS选择器、如何编辑CSS样式。 5.1　CSS样式的建立与编辑 5.1.2 新知解析 1. CSS样式的作用 　　CSS样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主要作用如下： 实现了网页中内容与形式的分离，便于网站的管理与维护。 创建一个样式可以在多个网页中多次使用，提高了工作效率。 使网站中各网页风格统一。 5.1　CSS样式的建立与编辑 2. CSS样式的组织形式 　　Dreamweaver 8.0中CSS样式有三种组织方式分别为 内嵌CSS样式 文档内部CSS样式 外部文件CSS样式 5.1　CSS样式的建立与编辑 3. CSS样式的类型 　　在Dreamweaver 8.0中CSS样式根据作用的不同可以分为以下几种类型： 自定义CSS样式 　　自定义CSS样也称为类样式，由用户命名，可以用于任何标签。 重定义HTML标签 　　重定义HTML标签是将原有的HTML标签重新定义，给原有的标签赋予新的样式。 CSS选择器 　　CSS选择器允许用户创建用于指定标签组合的样式，常用于设置超链接，也可创建ID，但ID在网页中只能使用一次，由于具有惟一的特性，常用于脚本，由符号“＃”表示。 5.1　CSS样式的建立与编辑 4. CSS样式面板 　　通过“CSS样式”面板，可以方便的创建、删除、编辑CSS样式等，也可以附加已有的CSS样式。 打开“CSS样式”面板的方法。 按Shift＋F11键。 选择主菜单“窗口”｜“CSS样式”命令。 “CSS样式”面板的结构共分为两个部分，上半部分显示CSS样式，下半部分则显示所选定的CSS样式的属性。CSS样式根据所显示内容的不同分两种显示方式，若单击“全部”按钮，则显示该所有的CSS样式；若选择“正在”按钮，则显示所选中内容的CSS样式，在CSS样式属性中可以方便地修改某一属性。 5.1　CSS样式的建立与编辑 5. 创建CSS样式方法 创建CSS样式的方法如下： 1）打开新建CSS规则对话框,新建CSS样式 2）定义要创建的CSS样式类型 　　自定义类型、重定义HTML标签样式、创建CSS选择器样式 3）选择定义CSS样式的位置 4）设置和应用CSS样式的属性 5.1　CSS样式的建立与编辑 6.创建自定义CSS样式 　　在此创建一个用于修饰文本的自定义样式，字体为宋体，大小为9pt，颜色代码为#666666，行高140%，来介绍自定义样式的操作方法。操作步骤如下： 　　1）打开“CSS样式”面板。 　　2）单击“CSS样式”面板右下角的新建CSS规则按钮，打开新建CSS规则对话框。 　　3）“选择器类型”项选择“类”，“名称”文本框中输入.content，“定义在”选择“仅对该文档”。 　　4）单击“确定”按钮，打开“CSS规则定义”对话框，在“分类”列表中选择“类型”。设置字体为宋体，大小为9pt，行高140%，颜色为#666666，设置自定义样式content属性的对话框。如图所示。 　　5）设置完成后单击“确定”按钮，在“属性”面板和“CSS样式”面板中会显示新建的样式。 5.1　CSS样式的建立与编辑 5.1　CSS样式的建立与编辑 7. 创建重定义HTML标签样式 　　重定义HTML标签样式用于重新定义HTML中的某一标签，被重定义过的HTML标签具有新的格式。在此将表示单元格的标签td重定义。操作步骤如下： 　　1）打开“CSS样式”面板。单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。 　　2）“选择器类型”选择“标签”，标签下拉列表框中选择td，“定义在”选择“新建样式表文件”。 　　3）单击“确定”按钮，打开“保存样式表文件”对话框，输入文件名td_css，并选择保存文件的位置。 　　4）单击“确定”按钮，打开“CSS规则定义”对话框，在“分类”列表中选择“类型”，右侧字体设置为宋体，大小为12px，行高150%，颜色为#333333。 5.1　CSS样式的建立与编辑 8.创建CSS选择器 　　CSS选择器很重要的一个应用是对超链接进行设置，超链接分为四种状态。 　　a:link：初始状态的超链接。 　　a:visited：超链接被访问过后的状态 　　a:hover：光