第6章 应用样式表.ppt

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

1、第6章应用样式表认识样式表定义样式表样式表的高级应用6.1认识样式表6.1.1熟悉“CSS样式”面板在Dreamweaver8中，我们可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。6.1.2CSS样式的存在方式CSS样式以两种方式存在于网页中：外部CSS样式表：为增强CSS样式的通用性，我们可以创建扩展名为.css的样式表文件。利用“CSS样式”面板可将该文件链接到站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。内部（或嵌入式）CSS样式表：是一系列包含在HTML文档head部分style标签内的CSS样

2、式。6.2定义样式表6.2.1CSS样式的分类根据应用对象的不同，CSS样式被分成了以下三类。（1）类样式（2）标签样式（3）选择器样式6.2.2定义样式的步骤对于类样式而言，当我们修改了所选文本的字体、大小、颜色等属性后，系统会自动创建相应的样式。此外，也可以在“CSS样式”面板中单击“新建CSS规则”按钮，直接创建类样式和其他两种样式。课堂练习1为“火百合”网页中的表格定义边线样式在了解了定义样式的步骤后，本节通过一个实例来学习一下类样式的定义和应用方法。课堂练习2为“火百合”网页定义“body”样式在样式类型中，最常用的就是标签样式，本节通过为“

3、火百合”网页定义“body”样式，来看看标签样式的定义和应用。课堂练习3为“火百合”网页定义链接样式“链接”是网站中不可缺少的组成元素，本节通过为“pro_b.html”网页中的链接文本定义样式，来看看高级样式的设置方法。6.2.3链接外部样式我们在“课堂练习2”中曾创建了一个名为“s2.css”的样式文件，下面来看看如何将其链接到网站中的其他页面。6.3样式表的高级应用6.3.1在同一个网页中设置两种链接样式有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两个不同样式的链接，那么如何设

4、置呢？本节通过给LZG站点中的“index_a.html”网页添加一个链接样式来讲解此类样式的设置方法。课堂练习4为“火百合”网页设置列表样式所谓列表样式，就是为网页中的列表文本设置的样式。本节通过为“火百合”网页左侧的链接文本设置列表样式，来看一下此类样式的设置方法。课堂练习5为“火百合”网页中的图片设置阴影很多人都知道Photoshop拥有强大的滤镜功能，但很少有人知道Dreamweaver中的CSS滤镜。应用CSS滤镜可设置渐变、透明、阴影等效果。本例使用CSS滤镜中的“Shadow”属性来给图像添加阴影。