第6章应用样式表.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,6,章 应用,样式表,认识样式表,定义样式表,样式表的高级应用,6.1,认识样式表,6.1.1,熟悉“,CSS,样式”面板,在,Dreamweaver,8,中，我们可以借助,“,CSS,样式,”,面板来新建、删除、编辑和应用样式，以及附加外部样式表等。,6.1.2 CSS,样式的存在方式,CSS,样式以两种方式存在于网页中：,外部,CSS,样式表：为增强,CSS,样式的通用性，我们可以创建扩展名为,.,css,的样式表文件。利用“,CSS,样式”面板可将该文件链接到站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。,内部（或嵌入式）,CSS,样式表：是一系列包含在,HTML,文档,head,部分,style,标签内的,CSS,样式。,6.2,定义样式表,6.2.1 CSS,样式的分类,根据应用对象的不同，,CSS,样式被分成了以下三类。,（,1,）类样式,（,2,）标签样式,（,3,）选择器样式,6.2.2,定义样式的步骤,对于类样式而言，当我们修改了所选文本的字体、大小、颜色等属性后，系统会自动创建相应的样式。此外，也可以在“,CSS,样式”面板中单击“新建,CSS,规则”按钮 ，直接创建类样式和其他两种样式。,课堂练习,1,为“火百合”网页中的表格定义边线样式,在了解了定义样式的步骤后，本节通过一个实例来学习一下类样式的定义和应用方法。,课堂练习,2,为“火百合”网页定义“,body”,样式,在样式类型中，最常用的就是标签样式，本节通过为“火百合”网页定义“,body”,样式，来看看标签样式的定义和应用。,课堂练习,3,为“火百合”网页定义链接样式,“,链接,”,是网站中不可缺少的组成元素，本节通过为,“,pro_b.html,”,网页中的链接文本定义样式，来看看高级样式的设置方法。,6.2.3,链接外部样式,我们在“课堂练习,2”,中曾创建了一个名为“,s2.css”,的样式文件，下面来看看如何将其链接到网站中的其他页面。,6.3,样式表的高级应用,63.1,在同一个网页中设置两种链接样式,有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两个不同样式的链接，那么如何设置呢？本节通过给,LZG,站点中的,“,index_a.html,”,网页添加一个链接样式来讲解此类样式的设置方法。,课堂练习,4,为“火百合”网页设置列表样式,所谓列表样式，就是为网页中的列表文本设置的样式。本节通过为“火百合”网页左侧的链接文本设置列表样式，来看一下此类样式的设置方法。,课堂练习,5,为“火百合”网页中的图片设置阴影,很多人都知道,Photoshop,拥有强大的滤镜功能，但很少有人知道,Dreamweaver,中的,CSS,滤镜。应用,CSS,滤镜可设置渐变、透明、阴影等效果。本例使用,CSS,滤镜中的,“,Shadow,”,属性来给图像添加阴影。,