网页设计与制作第6章.ppt

《网页设计与制作第6章.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第6章.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、6.1CSS6.1CSS样式表概述样式表概述样式表概述样式表概述6.1.16.1.1样式表的基本操作样式表的基本操作样式表的基本操作样式表的基本操作6.1.26.1.2定义样式表选项定义样式表选项定义样式表选项定义样式表选项6.1.36.1.3使用样式使用样式使用样式使用样式6.26.2创建新样式创建新样式创建新样式创建新样式6.2.16.2.1为调用脚本创建的为调用脚本创建的为调用脚本创建的为调用脚本创建的CSSCSS规则规则规则规则 6.2.26.2.2定义指定范围内的标签定义指定范围内的标签定义指定范围内的标签定义指定范围内的标签规则规则规则规则 6.2.36.2.3同时定义多个标签同时

2、定义多个标签同时定义多个标签同时定义多个标签 6.2.46.2.4定义单个元素样式属性定义单个元素样式属性定义单个元素样式属性定义单个元素样式属性6.36.3内部内部内部内部CSSCSS样式表的应用样式表的应用样式表的应用样式表的应用 6.3.16.3.1使文字尺寸保持不变使文字尺寸保持不变使文字尺寸保持不变使文字尺寸保持不变 6.3.26.3.2设置网页行间距设置网页行间距设置网页行间距设置网页行间距 第第6章章多媒体计算机硬件多媒体计算机硬件6.3.36.3.3制作图像边框效果制作图像边框效果制作图像边框效果制作图像边框效果6.3.46.3.4控制鼠标样式控制鼠标样式控制鼠标样式控制鼠标样

3、式6.3.56.3.5修改文字链接的样式修改文字链接的样式修改文字链接的样式修改文字链接的样式6.3.66.3.6锁定背景不跟随内容滚锁定背景不跟随内容滚锁定背景不跟随内容滚锁定背景不跟随内容滚动动动动6.3.76.3.7定义项目符号和编号定义项目符号和编号定义项目符号和编号定义项目符号和编号6.3.8CSS6.3.8CSS滤镜的应用滤镜的应用滤镜的应用滤镜的应用6.46.4外部外部外部外部CSSCSS样式表的应用样式表的应用样式表的应用样式表的应用6.4.16.4.1建立文字段落的建立文字段落的建立文字段落的建立文字段落的CSSCSS样式样式样式样式 6.4.26.4.2建立表格的建立表格的

4、建立表格的建立表格的CSSCSS样式样式样式样式6.4.36.4.3建立超链接的建立超链接的建立超链接的建立超链接的CSSCSS样式样式样式样式6.4.46.4.4建立特殊段落的建立特殊段落的建立特殊段落的建立特殊段落的CSSCSS样式样式样式样式 6.4.56.4.5在网页中应用外部在网页中应用外部在网页中应用外部在网页中应用外部CSSCSS6.56.5习题与上机操作习题与上机操作习题与上机操作习题与上机操作CSS样式表简介样式表简介创建创建CSS样式表样式表内部内部CSS样式表的应用样式表的应用外部外部CSS样式表的创建及应用样式表的创建及应用使用和编辑自定义使用和编辑自定义CSS样式表样

5、式表教学进程教学进程教学进程教学进程本章要点：本章要点：概述概述利用利用CSS样式可以对网页中的文本、图像、页面背景、表单样式可以对网页中的文本、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。器的一些属性都可以通过它来调整。教学进程教学进程教学进程教学进程1 1CSS真正实现了网页内容和格式定义的分离，通过修改真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格。样式表文件就可以修改整个站点文件的风格。6.16.1CSS样式表概述样式表概述6.1.1

6、6.1.1样式表的基本操作样式表的基本操作教学进程教学进程教学进程教学进程执行执行【窗口窗口】|【CSS样式样式】命令，打开命令，打开【CSS样式样式】面板，面板，或在面板组上单击或在面板组上单击“CSS”或者相应的折叠箭头，展开或者相应的折叠箭头，展开【CSS样式样式】面板面板方法方法6.16.1CSS样式表概述样式表概述当选中一个规则后执行当选中一个规则后执行【CSS样式样式】面板右下方的面板右下方的【编辑样式编辑样式】命令，打开编辑选中规则的对话框命令，打开编辑选中规则的对话框单击【单击【CSS样式】面板右上方的属性按钮，在弹出的菜单中选择样式】面板右上方的属性按钮，在弹出的菜单中选择【

7、编辑】命令，也可以启动编辑当前所选规则的对话框【编辑】命令，也可以启动编辑当前所选规则的对话框教学进程教学进程教学进程教学进程在在【CSS样式样式】面板上，选择面板上，选择【新建新建CSS规则规则】按钮，会打开按钮，会打开【新新建建CSS规则规则】对话框。对话框。方法方法6.1.26.1.2定义样式表选项定义样式表选项6.16.1CSS样式表概述样式表概述选择其中一个正方形的热点，在选择其中一个正方形的热点，在【属性属性】面板中修改各参数。面板中修改各参数。在在【链接链接】文本框中输入链接地址文本框中输入链接地址“http:/”，在在【目标目标】选项的下拉列表中选择选项的下拉列表中选择“_bl

8、ank”，在在【替换替换】文本框中输入文本框中输入“链接到洪恩在线链接到洪恩在线!”。举例教学进程教学进程教学进程教学进程在在【CSS样式样式】面板上，选择面板上，选择【新建新建CSS规则规则】按钮，会打开按钮，会打开【新新建建CSS规则规则】对话框。对话框。方法方法6.1.26.1.2定义样式表选项定义样式表选项6.16.1CSS样式表概述样式表概述教学进程教学进程教学进程教学进程【新建样式表文件新建样式表文件】：此选项将会把你设定的样式最终保存在一个外：此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使用，部单独的样式表文件中，这个样式表文件可

9、以被其他文件共同使用，也就是说你可以使站点内的所有页面文件使用同一个样式表文件，甚也就是说你可以使站点内的所有页面文件使用同一个样式表文件，甚至不同的站点只要是网页就可以使用。至不同的站点只要是网页就可以使用。【定义在】选项【定义在】选项各选项含义各选项含义6.1.26.1.2定义样式表选项定义样式表选项6.16.1CSS样式表概述样式表概述【仅对该文档仅对该文档】：此选项将会把你设定的规则仅仅放在当前文件的头：此选项将会把你设定的规则仅仅放在当前文件的头文件中，这些规则只能在此文件中使用。文件中，这些规则只能在此文件中使用。教学进程教学进程教学进程教学进程【类类（可可应应用用于于任任何何标标

10、签签）】：选选择择此此类类型型后后，需需要要在在上上方方的的【名名称称】文文本本框框中中填填入入一一个个规规则则名名字字，需需要要注注意意的的是是，此此类类名名称称必必须须以以“.”开开头头。这这种种方方式式定定义义的的样样式式可可以以用用来来定定义义绝绝大大多多数数的的HTML对对象象，这这样可以使这些对象有统一的外观。样可以使这些对象有统一的外观。【选择器类型选择器类型】选项选项各选项含义各选项含义6.1.26.1.2定义样式表选项定义样式表选项6.16.1CSS样式表概述样式表概述【标签（重新定义特定标签的外观）】：选择此选项后从上方的【标【标签（重新定义特定标签的外观）】：选择此选项后

11、从上方的【标签】下拉框里选择需要重新定义的签】下拉框里选择需要重新定义的HTML标识。这个选项将使得文件标识。这个选项将使得文件中具有统一标签的所有内容使用相同的外观。中具有统一标签的所有内容使用相同的外观。【高级（【高级（ID伪类选择器等）】：这个选项的功能是可以设定链接文本伪类选择器等）】：这个选项的功能是可以设定链接文本的样式。的样式。6.1.36.1.3使用样式使用样式使用样式使用样式教学进程教学进程教学进程教学进程在在在在【属性属性】面板选择样式面板选择样式打开打开【属性属性】面板，单击打开面板，单击打开【样式样式】右边的下拉列表框，右边的下拉列表框，里面列出了我们已经定义的一些里面

12、列出了我们已经定义的一些CSS规则。规则。1 1需要指出的是，这里列出的只是部分已定义的规则。使用需要指出的是，这里列出的只是部分已定义的规则。使用样式列表指定规则时，必须先选定你将要应用此规则的内样式列表指定规则时，必须先选定你将要应用此规则的内容，然后在样式列表框中选择需要的规则，即可将规则应容，然后在样式列表框中选择需要的规则，即可将规则应用于选定内容用于选定内容6.1.36.1.3使用样式使用样式使用样式使用样式教学进程教学进程教学进程教学进程利用利用【标签选择器标签选择器】选择样式选择样式2 2首先需要在首先需要在【标签选择器标签选择器】上选定一个标签，如上选定一个标签，如span.

13、标签，然后在标签，然后在span.标签上右击，在弹出的快捷菜单中标签上右击，在弹出的快捷菜单中选择选择【设置类设置类】|【wenziduanluo】，则可以快速把定义的，则可以快速把定义的【wenziduanluo】样式类指定给样式类指定给span.标签。标签。使用右键快捷菜单使用右键快捷菜单3 3我们也可以从右键快捷菜单中直接给对象指定一个样式。我们也可以从右键快捷菜单中直接给对象指定一个样式。首先选中对象，在右键快捷菜单中指定样式类。首先选中对象，在右键快捷菜单中指定样式类。清除样式清除样式4 4清除样式，首先选中对象，然后从右键快捷菜单中选择清除样式，首先选中对象，然后从右键快捷菜单中选

14、择【无无】，即可清除原有的样式。，即可清除原有的样式。6.26.2创建新样式创建新样式创建新样式创建新样式教学进程教学进程教学进程教学进程【id】属属性性是是使使用用【CSS选选择择器器】样样式式的的常常用用功功能能之之一一，这这种种方方式式定定义的义的CSS规则，与自定义规则，与自定义CSS规则相似。规则相似。在在文文档档中中，可可以以通通过过【id】属属性性来来识识别别标标记记和和定定位位文文档档的的位位置置，这这在在调用脚本时会经常用到的。调用脚本时会经常用到的。方法方法6.2.16.2.1为调用脚本创建的为调用脚本创建的CSS规则规则6.26.2创建新样式创建新样式创建新样式创建新样式

15、教学进程教学进程教学进程教学进程6.2.2定义指定范围内的标签规则定义指定范围内的标签规则新建新建CSS规则规则在在【CSS样式样式】面板上单击面板上单击【新建新建CSS规则规则】按钮按钮，打开，打开【新建新建CSS规则规则】对话框，在对话框，在【选择器类型选择器类型】中选择中选择【高高级（级（ID伪类选择器等）伪类选择器等）】，在，在【选择器选择器】参数项中输入参数项中输入“tdhr”，td是单元格的标签，是单元格的标签，hr是水平条的标签。是水平条的标签。1 1单击单击【确定确定】按钮后，开始定义规则，我们只需要定义按钮后，开始定义规则，我们只需要定义【类型类型】面板中的面板中的【颜色颜色

16、】项为红色就可以了。项为红色就可以了。定义定义tdhr的的CSS规则规则2 2按按F12键，在浏览器中可以看到，单元格中的水平条变成了键，在浏览器中可以看到，单元格中的水平条变成了红色，而单元格之外的水平条却保持不变。红色，而单元格之外的水平条却保持不变。预览效果预览效果3 36.26.2创建新样式创建新样式创建新样式创建新样式教学进程教学进程教学进程教学进程6.2.3同时定义多个标签同时定义多个标签创建含有正文文字、单元格、文本字段表单的网页创建含有正文文字、单元格、文本字段表单的网页创建一个创建一个HTML页面，在正文（页面，在正文（body）里输入）里输入“CSS测试测试”这几个字，在文

17、字的下面插入一个两行一列的表格（这几个字，在文字的下面插入一个两行一列的表格（td），），然后在上面的单元格里面输入然后在上面的单元格里面输入“Dreanweaver教程教程”几个字，几个字，在下面的单元格中插入一个表单文本区域（在下面的单元格中插入一个表单文本区域（textarea）1 16.26.2创建新样式创建新样式创建新样式创建新样式教学进程教学进程教学进程教学进程6.2.3同时定义多个标签同时定义多个标签打开打开【新建新建CSS规则规则】对话框后，在对话框后，在【选择器类型选择器类型】中选中选择择【高级（高级（ID伪类选择器等）伪类选择器等）】，在，在【选择器选择器】参数项中参数项中

18、输入输入“body,td,textarea”，这些标签要用英文状态的，这些标签要用英文状态的“,”分开。分开。新建新建CSS规则规则2 26.26.2创建新样式创建新样式创建新样式创建新样式教学进程教学进程教学进程教学进程6.2.3同时定义多个标签同时定义多个标签单击单击【确定确定】按钮后，开始定义规则，在按钮后，开始定义规则，在【类型类型】面板里面板里定义字体、颜色等。定义字体、颜色等。定义完以后，单击定义完以后，单击【应用应用】按钮。在按钮。在Dreamweaver的的【文文档档】窗口中文字都变成了红色，大小也成了窗口中文字都变成了红色，大小也成了14像素。接着像素。接着我们在表单文本区域

19、里输入文字，保存在我们在表单文本区域里输入文字，保存在css目录下。目录下。定义定义body,td,textarea的的CSS规则规则3 36.26.2创建新样式创建新样式创建新样式创建新样式教学进程教学进程教学进程教学进程6.2.4定义单个元素的样式属性定义单个元素的样式属性如如果果要要对对网网页页中中的的某某单单个个元元素素定定义义样样式式属属性性，那那么么可可以以在在该元素中直接使用该元素中直接使用“style=”来定义。来定义。如如：style样样 式式，在在Dreamweaver8中中，使使用用这这种种类类型型只只能能在在Dreamweaver的的【代码代码】视图中手工输入代码视图中

20、手工输入代码.新建新建新建新建CSSCSS样式样式样式样式单击单击【CSS样式样式】面板中的面板中的【新建新建CSS规则规则】按钮，弹出按钮，弹出【新建新建CSS规则规则】对话框。对话框。1 1教学进程教学进程教学进程教学进程6.36.3内部内部CSS样式表的应用样式表的应用6.3.16.3.1使文字尺寸保持不变使文字尺寸保持不变在在【名称名称】文字框里输入要定义的文字框里输入要定义的CSS规则的名称，本例规则的名称，本例定义的是字体，为了方便记忆，可以设置样式的名称为定义的是字体，为了方便记忆，可以设置样式的名称为“.ziti”，在，在【选择器类型选择器类型】中选择中选择【类（可应用于任类（

21、可应用于任何标签）何标签）】，在，在【定义在定义在】中选择中选择【仅对该文档仅对该文档】，单击，单击【确定确定】按钮。按钮。设置设置CSS样式的类型、区块标签样式的类型、区块标签在在【.ziti的的CSS规则定义规则定义】的对话框中，选择左边的对话框中，选择左边【分类分类】中的中的【类型类型】标签，把标签，把【大小大小】设为设为12像素。像素。2 2教学进程教学进程教学进程教学进程6.36.3内部内部CSS样式表的应用样式表的应用6.3.16.3.1使文字尺寸保持不变使文字尺寸保持不变如果想让每一段落的行首自动空两个汉字，可以选择如果想让每一段落的行首自动空两个汉字，可以选择【分分类类】中的中

22、的【区块区块】标签，把标签，把【文字缩进文字缩进】设为个字体高，设为个字体高，即即2个汉字。个汉字。预览效果预览效果另存网页在另存网页在css目录下，文件名为：目录下，文件名为：wenxue_ziti_css.html，用浏览器预览一下，网页的字体看起来就像专业网站的字用浏览器预览一下，网页的字体看起来就像专业网站的字体了，并且字体尺寸也不会随浏览器字体大小设置而改变，体了，并且字体尺寸也不会随浏览器字体大小设置而改变，每段的首位自动空了两个汉字的距离，每段的首位自动空了两个汉字的距离，3 3教学进程教学进程教学进程教学进程6.36.3内部内部CSS样式表的应用样式表的应用6.3.16.3.1

23、使文字尺寸保持不变使文字尺寸保持不变6.6.3 3.2.2设置网页行间距设置网页行间距编辑编辑CSS样式样式1 1在在【CSS样式样式】面板中，选择面板中，选择.ziti规则，单击规则，单击【编辑样式编辑样式】按钮，弹按钮，弹出出【.ziti的的CSS规则定义规则定义】对话框，在对话框，在【行高行高】右边的两个下拉框中右边的两个下拉框中分别选择分别选择【值值】、【】，然后，再在，然后，再在【值值】框中输入数值，在这框中输入数值，在这里输入里输入150%，作为我们网页文字的行间距，作为我们网页文字的行间距教学进程教学进程教学进程教学进程6.6.3 3.2.2设置网页行间距设置网页行间距应用应用C

24、SS样式样式2 2单击单击【确定确定】按钮。此时网页中的文字行间距会自动地调整为已经按钮。此时网页中的文字行间距会自动地调整为已经设定的规则。保存网页，用浏览器预览一下。设定的规则。保存网页，用浏览器预览一下。教学进程教学进程教学进程教学进程教学进程教学进程教学进程教学进程6.3.3制作图像边框图像制作图像边框图像创建为图片定义的创建为图片定义的CSS样式样式在在【CSS样式样式】面板上单击面板上单击【新建新建CSS规则规则】按钮，弹出按钮，弹出【新建新建CSS规则规则】对话框，在对话框，在【选择器类型选择器类型】中选择中选择【标标签（重新定义特定标签的外观）签（重新定义特定标签的外观）】，再

25、在，再在【标签标签】下拉框下拉框中选择中选择【img】标记。标记。1 1教学进程教学进程教学进程教学进程6.3.3制作图像边框图像制作图像边框图像图片边框的参数意义图片边框的参数意义单击单击【确定确定】按钮，弹出按钮，弹出【img的的CSS规则定义规则定义】对话框，对话框，在在【分类分类】项中选择项中选择【边框边框】，设置，设置【img的的CSS规则定义规则定义】标记的边框属性。边框可设定的属性很多，包括样式、标记的边框属性。边框可设定的属性很多，包括样式、宽度和颜色，关键是指定每个边的宽度和每个边的颜色。宽度和颜色，关键是指定每个边的宽度和每个边的颜色。2 2【宽度宽度】：可以是细、中、粗等

26、值。：可以是细、中、粗等值。【颜颜色色】：定定义义方方法法与与宽宽度度定定义义相相似似，颜颜色色值值也也可可以以用用RGB值（如值（如#ff00ff）。）。【样式】：用【样式】：用9个关键字来描述个关键字来描述。教学进程教学进程教学进程教学进程6.3.3制作图像边框图像制作图像边框图像设置边框参数设置边框参数我们可以设定我们可以设定【样式样式】为脊状，为脊状，【宽度宽度】为中，为中，【颜色颜色】为红色。为红色。3 3浏览器中的效果浏览器中的效果单击单击【确定确定】按钮，定义的规则已经应用到网页的图片上按钮，定义的规则已经应用到网页的图片上了。在浏览器中是什么效果呢？保存网页文件，了。在浏览器中

27、是什么效果呢？保存网页文件，4 4教学进程教学进程教学进程教学进程6.3.4控制鼠标样式控制鼠标样式一一般般情情况况下下，鼠鼠标标在在浏浏览览器器中中以以“箭箭头头”的的样样式式出出现现。我我们们想想在在网网页页的的不不同同位位置置让让鼠鼠标标显显示示不不同同形形状状，以以体体现现不不同同的的功功能能区区，如如果果想想让让自自己己的的网网站站体体现现与与众众不不同同的的风风格格，可可以把鼠标样式更改为自己喜欢的其他样式类型。以把鼠标样式更改为自己喜欢的其他样式类型。教学进程教学进程教学进程教学进程6.3.4控制鼠标样式控制鼠标样式新建新建CSS规则规则新建一个新建一个CSS规则，本例定义的是鼠

28、标，为了方便记忆，规则，本例定义的是鼠标，为了方便记忆，可以设置规则的名称为可以设置规则的名称为“.shubiao”，在，在【选择器类型选择器类型】中选择中选择【类（可应用于类（可应用于任何标签）任何标签）】，在，在【定义在定义在】中选择中选择【仅对该文档仅对该文档】。1 1教学进程教学进程教学进程教学进程6.3.4控制鼠标样式控制鼠标样式修改光标效果修改光标效果单击单击【确定确定】按钮。在弹出的按钮。在弹出的【.shubiao的的CSS规则定义规则定义】的对话框中，选择左边的对话框中，选择左边【分类分类】中的中的【扩展扩展】标签。标签。2 2教学进程教学进程教学进程教学进程6.3.4控制鼠标

29、样式控制鼠标样式光标样式的含义光标样式的含义右边右边【视觉效果视觉效果】中的中的【光标光标】项，这就是设置鼠标样式项，这就是设置鼠标样式的关键项。打开右边的下拉菜单，选择所需要的鼠标样式，的关键项。打开右边的下拉菜单，选择所需要的鼠标样式，单击单击【确定确定】按钮。按钮。3 3crosshair：十字型。：十字型。text：平时鼠标移动到文本上：平时鼠标移动到文本上的样式。的样式。wait：等待的效果。：等待的效果。default：默认的效果。：默认的效果。help：带问号的鼠标样式。：带问号的鼠标样式。e-resize：向右的箭头。：向右的箭头。ne-resize：向右上方的箭头。：向右上方

30、的箭头。n-resize：向上的箭头。：向上的箭头。nw-resize：向左上方的箭头。：向左上方的箭头。w-resize：向左的箭关。：向左的箭关。sw-resize：向左下的箭头。：向左下的箭头。s-resize：向下的箭头。：向下的箭头。se-resize：向右下方的箭头。：向右下方的箭头。auto：系统自动的效果。：系统自动的效果。新建高新建高级级CSS规则规则 教学进程教学进程教学进程教学进程6.3.5修改文字链接的样式修改文字链接的样式建立第二个高建立第二个高级级CSS样样式式 去掉超级链接的下划线去掉超级链接的下划线 定定义义超超级链级链接的接的颜颜色色 链链接接可可以以说说是是

31、网网页页中中常常见见的的页页面面元元素素了了，默默认认的的文文字字链链接接规规则则都都是是带带下下划划线线的的效效果果，完完全全可可以以改改变变这这种种一一成成不不变变的的外外观观，以使之更符合页面的整体效果。以使之更符合页面的整体效果。教学进程教学进程教学进程教学进程6.3.6锁定背景不跟随内容滚动锁定背景不跟随内容滚动打开文学页面：打开文学页面：wenxue_ziti_css.html，执行，执行【修改修改】|【页面属页面属性性】命令，弹出命令，弹出【页面属性页面属性】对话框，在对话框，在【页面属性页面属性】对话框中对话框中设置背景图像，单击设置背景图像，单击【背景图像背景图像】选项右边的

32、选项右边的【浏览浏览】按钮，选按钮，选择自己喜欢的图像作为背景择自己喜欢的图像作为背景。设置网页背景设置网页背景设置网页背景设置网页背景 1 1新建背景的新建背景的新建背景的新建背景的CSSCSS规则规则规则规则 2 2新建一个新建一个CSS规则。本例定义的是背景，为了方便记忆，可以设规则。本例定义的是背景，为了方便记忆，可以设置规则的名称为：置规则的名称为：.beijing，在，在【选择器类型选择器类型】中选择中选择【类（可应用于任何标签）类（可应用于任何标签）】，在，在【定义在定义在】中选择中选择【仅对该文档仅对该文档】。教学进程教学进程教学进程教学进程6.3.6锁定背景不跟随内容滚动锁定

33、背景不跟随内容滚动单击单击【确定确定】按钮。在弹出的按钮。在弹出的【.beijing的的CSS规则定义规则定义】对话框对话框中，选择左边中，选择左边【分类分类】中的中的【背景背景】标签，其中标签，其中【附件附件】有两个有两个选择项，分别为选择项，分别为【固定固定】和和【滚动滚动】，设置，设置【附件附件】为为【固定固定】。设置固定背景设置固定背景设置固定背景设置固定背景 3 3教学进程教学进程教学进程教学进程6.3.7定义项目符号和编号定义项目符号和编号（1）新建）新建.xmfh的的CSS规则规则（2）定义规则的）定义规则的【列表列表】属属性性（3）将项目符号应用到网页）将项目符号应用到网页中中

34、（4）应用项目符号后的效果）应用项目符号后的效果利用利用CSS定义定义“项目符号和编号项目符号和编号”1 1教学进程教学进程教学进程教学进程6.3.7定义项目符号和编号定义项目符号和编号（1）准备作为项目符号的图片）准备作为项目符号的图片自定义项目图片符号自定义项目图片符号2 2（2）标记）标记.xmfhCSS规则规则 打开我们网站的打开我们网站的打开我们网站的打开我们网站的wenxue_ziti_css.htmwenxue_ziti_css.htm网页，在右边的表格中插网页，在右边的表格中插网页，在右边的表格中插网页，在右边的表格中插入一个入一个入一个入一个1111的表格，然后把标题的表格，

35、然后把标题的表格，然后把标题的表格，然后把标题“想飞想飞想飞想飞”放在表格中。放在表格中。放在表格中。放在表格中。教学进程教学进程教学进程教学进程6.3.8CSS滤镜的应用滤镜的应用打开网页打开网页打开网页打开网页1 1编辑编辑编辑编辑CSSCSS样式样式样式样式2 2 将将将将.style1.style1的的的的CSSCSS规则定义给标题，首先在规则定义给标题，首先在规则定义给标题，首先在规则定义给标题，首先在【CSSCSS规则规则规则规则】面板里面板里面板里面板里选择选择选择选择.style1.style1自定义自定义自定义自定义CSSCSS规则，然后单击规则，然后单击规则，然后单击规则，

36、然后单击【编辑规则编辑规则编辑规则编辑规则】按钮，弹出按钮，弹出按钮，弹出按钮，弹出【.style1.style1的的的的CSSCSS规则定义规则定义规则定义规则定义】对话框。在此对话框的对话框。在此对话框的对话框。在此对话框的对话框。在此对话框的【分类分类分类分类】中选中选中选中选择择择择【扩展扩展扩展扩展】，打开，打开，打开，打开【滤镜滤镜滤镜滤镜】下拉列表，可以看到下拉列表，可以看到下拉列表，可以看到下拉列表，可以看到CSSCSS样式表滤镜样式表滤镜样式表滤镜样式表滤镜的多种属性。的多种属性。的多种属性。的多种属性。可以使用可以使用可以使用可以使用BlurBlur滤镜为标题建立模糊效果，

37、使用滤镜为标题建立模糊效果，使用滤镜为标题建立模糊效果，使用滤镜为标题建立模糊效果，使用GlowGlow滤镜为图滤镜为图滤镜为图滤镜为图片边界增加光效。片边界增加光效。片边界增加光效。片边界增加光效。BlurBlur的语法是：的语法是：的语法是：的语法是：Blur(Add=?,Direction=?,Strength=?)Blur(Add=?,Direction=?,Strength=?)，其中有，其中有，其中有，其中有3 3个参数个参数个参数个参数AddAdd、DirectionDirection、StrengthStrength。教学进程教学进程教学进程教学进程6.3.8CSS滤镜的应用滤

38、镜的应用定义定义定义定义.style1.style1的的的的BlurBlur滤镜滤镜滤镜滤镜3 3把把把把BlurBlur滤镜应用到标题上滤镜应用到标题上滤镜应用到标题上滤镜应用到标题上4 4单击单击单击单击【确定确定确定确定】按钮，按钮，按钮，按钮，.style1.style1规则已经被重新定义了，将规则已经被重新定义了，将规则已经被重新定义了，将规则已经被重新定义了，将.style1.style1规则应用于标题所在的规则应用于标题所在的规则应用于标题所在的规则应用于标题所在的1111表格上，这样表格上，这样表格上，这样表格上，这样BlurBlur的的的的CSSCSS滤镜就已经滤镜就已经滤镜

39、就已经滤镜就已经应用到标题上了。应用到标题上了。应用到标题上了。应用到标题上了。教学进程教学进程教学进程教学进程6.3.8CSS滤镜的应用滤镜的应用把滤镜应用到网页后的效果把滤镜应用到网页后的效果把滤镜应用到网页后的效果把滤镜应用到网页后的效果5 5 新建一个新建一个CSS规则，由于要建立的是有关文字、段落的规则，规则，由于要建立的是有关文字、段落的规则，所以可以建立一个统一的所以可以建立一个统一的【类类】，在，在【名称名称】框中输入框中输入CSS规则规则的名称，在的名称，在【定义在定义在】中选择中选择【新建样式表文件新建样式表文件】。教学进程教学进程教学进程教学进程6.4外部外部CSS样式表

40、的应用样式表的应用6.4.1建立文字段落的建立文字段落的CSS样式样式建立外部样式表建立外部样式表建立外部样式表建立外部样式表 1 1保存样式表保存样式表保存样式表保存样式表2 2 单击单击【确定确定】按钮，在弹出的按钮，在弹出的【保存样式表文件为保存样式表文件为】对话框对话框内，我们要确定以下内容：内，我们要确定以下内容：【保存在保存在】要保存文件的位置，要保存文件的位置，【文件名文件名】要保存文件的名字。保存文件的时候，要尽可能要保存文件的名字。保存文件的时候，要尽可能地保存在站点内，命名也要尽量做到见名知意。地保存在站点内，命名也要尽量做到见名知意。单击单击【保存保存】按钮后，计算机中就

41、生成了按钮后，计算机中就生成了xinde.css这个外部这个外部样式表文件，同时弹出样式表文件，同时弹出【.wenziduanluo的的CSS规则定义（在规则定义（在xinde.css中）中）】对话框。对话框。我们就开始定义这个外部我们就开始定义这个外部CSS样式表了。可以这样定义文字和段样式表了。可以这样定义文字和段落，在落，在【分类分类】的的【类型类型】面板中定义面板中定义【字体字体】、【大小大小】、【行高行高】分别为：宋体、分别为：宋体、12像素、像素、150%；【区块区块】面板中定义对面板中定义对齐方式为：顶部、左对齐，文字缩进为：齐方式为：顶部、左对齐，文字缩进为：2字体高。字体高。

42、教学进程教学进程教学进程教学进程6.4外部外部CSS样式表的应用样式表的应用6.4.1建立文字段落的建立文字段落的CSS样式样式定义样式表的文字和段落定义样式表的文字和段落3 3 在在【CSS样式样式】面板上单击面板上单击【新建新建CSS规则规则】按钮，新建一按钮，新建一个个CSS规则。规则。可以把表格作为一个可以把表格作为一个【类类】来定义，同时也可以作为来定义，同时也可以作为【标签标签】来来定义。所以在弹出的定义。所以在弹出的【新建新建CSS规则规则】对话框中，我们把表格作对话框中，我们把表格作为一个为一个【标签标签】来定义，表格的标签为：来定义，表格的标签为：table。教学进程教学进程

43、教学进程教学进程6.4.2建立表格的建立表格的CSS样式样式新建表格的新建表格的CSS样式样式1 1定义表格的定义表格的定义表格的定义表格的CSSCSS样式样式样式样式2 2 单击单击【确定确定】按钮，就可以定义表格的样式了。本例中，我按钮，就可以定义表格的样式了。本例中，我们可以把表格定义为边框宽度为们可以把表格定义为边框宽度为“1”、样式为点划线的彩色表、样式为点划线的彩色表格。格。新建一个新建一个CSS规则。在规则。在【新建新建CSS规则规则】对话框中仍然把超对话框中仍然把超级链接作为级链接作为【标签标签】来定义，把它放到前面已经建立的外部来定义，把它放到前面已经建立的外部CSS样式表文

44、件中，超级链接的标签为样式表文件中，超级链接的标签为a。教学进程教学进程教学进程教学进程6.4.3建立超链接的建立超链接的CSS样式样式新建超链接的新建超链接的CSS样式样式1 1定义超链接的定义超链接的定义超链接的定义超链接的CSSCSS样式样式样式样式2 2 单击单击【确定确定】按钮，在弹出的按钮，在弹出的【a的的CSS规则定义（在规则定义（在xinde.css中）中）】对话框中，可以定义网页中超级链接的样式。比如在对话框中，可以定义网页中超级链接的样式。比如在【分分类类】的的【类型类型】中定义中定义【字体字体】、【大小大小】、【颜色颜色】、【修饰修饰】分别为：宋体、分别为：宋体、12像素

45、、像素、#FFFFFF、无；、无；【背景背景】中定义背中定义背景颜色为景颜色为#FFFF00。再建立一个再建立一个CSS规则，在规则，在【新建新建CSS规则规则】对话框中这样定对话框中这样定义：在义：在【选择器类型选择器类型】中选择中选择【高级（高级（ID、伪类选择器等）、伪类选择器等）】，在在【选择器选择器】中选择中选择【a:hover】，定义在，定义在xinde.css的外部样式的外部样式表文件中，表文件中，教学进程教学进程教学进程教学进程6.4.3建立超链接的建立超链接的CSS样式样式新建鼠标悬停时超链接的新建鼠标悬停时超链接的CSS规则规则3 3定义鼠标悬停时超链接的定义鼠标悬停时超链

46、接的定义鼠标悬停时超链接的定义鼠标悬停时超链接的CSSCSS规则规则规则规则4 4 单击单击【确定确定】按钮后，就可以添加超级链接的样式了。在本按钮后，就可以添加超级链接的样式了。在本例中，我们在例中，我们在【分类分类】的的【类型类型】中定义中定义【颜色颜色】为为#000000；在在【背景背景】中定义背景颜色为中定义背景颜色为#00FF00。新建一个类，把它定义在外部新建一个类，把它定义在外部CSS样式表中，命名为样式表中，命名为.teshuduanluo，教学进程教学进程教学进程教学进程6.4.4建立特殊段落的建立特殊段落的CSS样式样式新建特殊段落的新建特殊段落的CSS样式样式1 1定义特

47、殊段落的定义特殊段落的CSS规则规则2 2 单单单单击击【确定确定】按钮，在弹出的按钮，在弹出的【.teshuduanluo的的CSS规则定规则定义（在义（在xinde.css中）中）】对话框中分别对对话框中分别对【类型类型】、【背景背景】、【区块区块】进行定义：字体为楷体进行定义：字体为楷体_GB2312，大小为，大小为10像素，行高为像素，行高为120%；背景颜色为；背景颜色为#FFFF66；文字缩进为；文字缩进为2字体高。字体高。6.4.5在网页中应用外部在网页中应用外部CSS样式样式用用Dreamweaver打开网站的打开网站的xinde.htm文件。文件。（1 1）编辑文件编辑文件教

48、学进程教学进程教学进程教学进程在在【CSS样样式式】面面板板上上单单击击【附附加加样样式式表表】按按钮钮，弹弹出出【链链接接外外部部样样式式表表】对对话话框框，在在【添添加加为为】中中选选择择【链链接接】，单单击击浏浏览览按按钮钮，选选择择前前面面我我们们创创建建的的外外部部样样式式表表文文件件xinde.css，单单击击【确确定定】按钮，外部样式按钮，外部样式xinde.css就会自动链接到网页中。就会自动链接到网页中。（2 2）链接外部样式表文件链接外部样式表文件教学进程教学进程教学进程教学进程6.4.5在网页中应用外部在网页中应用外部CSS样式样式将将CSS样式应用到网页的对象中。样式应

49、用到网页的对象中。（3 3）应用样式应用样式应用样式应用样式上机操作题上机操作题教学进程教学进程教学进程教学进程6.5习题与上机操作习题与上机操作(1)打开前面制作好的包含文字的网页，利用内部打开前面制作好的包含文字的网页，利用内部CSS样式表，让文样式表，让文字大小不随浏览器字体大小设置而改变。字大小不随浏览器字体大小设置而改变。(2)打开任意一个包含背景图片的页面，利用打开任意一个包含背景图片的页面，利用CSS样式表让背景图片样式表让背景图片不跟随内容一起不跟随内容一起滚动。滚动。(3)利用利用CSS样式表，制作如下图所示的页面效果。样式表，制作如下图所示的页面效果。要求要求教学进程教学进程教学进程教学进程6.5习题与上机操作习题与上机操作效果效果