网页设计实用教程 第7章 样式表.ppt

《网页设计实用教程 第7章 样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第7章样式表制作人：王飞重点和难点CSS样式的概念创建CSS样式管理CSS样式CSS样式控制面板CSS样式在网页中的使用层叠样式表(CSS)是用于控制Web页面内容的外观的一系列格式设置规则。样式可以让用户更加方便、有效的对网页元素进行控制，大大提高网页排版的效率，并且样式可以一次创建，多次使用，从而方便网页统一网站的整体风格。7.1CSS概述7.1.1CSS样式的概念CSS是“CascadingStyleSheet”的缩写，常被译作“级联样式表”或“层叠样式表”，一般简称为“样式表”。CSS是由W3C（万维网，WorldWid

2、eWebConsortium）组织定义的一系列格式设置规则。主要用来指定文字、段落、版面等网页素材的格式。7.1CSS概述7.1.2CSS样式的类型在DreamweaverCS4中可以定义以下样式类型。自定义CSS样式：用户自己定义的样式规则，可以将样式属性应用于任何文本范围或文本块。HTML样式：该样式实际上是对现有HTML标签的一种重新定义。当用户创建或改变一个CSS样式时，所有使用该标签的文本格式也将被自动更新。CSS选择器样式：该样式用于重新定义一些特定的标签组合或包含了特定ID属性的标签。7.1CSS概述7.1.3CS

3、S样式面板在DreamweaverCS4主窗口中，单击菜单“窗口”→“CSS样式”，即可打开如图7-1所示的“样式”面板。图7-1“样式”面板7.2典例剖析——网上求职简历制作本节将通过建立一个网上求职简历网页的实例来讲解使用样式美化页面。本节操作任务如下：在“Mystuhome”下建立文件夹“CSS样式”，在“CSS样式”文件夹下建立网页“resume.html”和文件夹“image”。创建样式。定义背景规则。定义区块规则。定义边框规则。定义列表规则。定义定位规则。定义扩展规则。7.2典例剖析——网上求职简历制作7.2.1创建

4、样式1.新建网页（1）在“Mystuhome”下建立文件夹“CSS样式”，在“CSS样式”文件夹下建立文件夹“image”和网页“resume.html”，保存网页文档。（2）设置网页标题为“个人简历”。（3）对网页按本节操作任务要求定义CSS样式，且应用样式对网页进行美化。7.2典例剖析——网上求职简历制作7.2.1创建样式2.创建新样式创建CSS样式的步骤如下：（1）在站点下打开需要美化的页面。（2）在DreamweaverCS4主窗口中，单击菜单【窗口】→【CSS样式】，打开如图7-2所示的“样式”面板。CSS样式面板分为

5、两种模式：正在和全部。切换到全部，便可以添加当前站点的CSS样式，单击“新建CSS规则”按钮，弹出如图7-3所示的“新建CSS规则”对话框。图7-2“样式”面板图7-3“新建CSS规则”对话框演示讲解7.2典例剖析——网上求职简历制作7.2.1创建样式（3）在“选择器类型”选项中选择CSS规则上下文选择器的类型。由于要定义的是整个页面的文本，因此选择“标签”类型。（4）在“选择器名称”下拉列表中选择选择器名称。这里因为页面是使用表格排版的。所以页面中所有的文字都是在td标签中的，所以要在“选择器名称”下拉列表中选择td，此选择器

6、名称将规则应用于所有元素。（5）在“规则定义”下拉列表选择定义规则的位置。这里选择“新建样式表文件”。（6）设置完成后，单击“确定”按钮，此时会弹出如图7-4所示的保存文件对话框，提示用户保存新建的样式文件。这里将新的样式表文件重命名为“style.css”，保存在和网页文件同级的目录里。（7）单击“保存”按钮关闭对话框，就会打开如图7-5所示的“CSS规则定义”对话框。在“CSS规则定义”对话框中包含许多类型的格式，如类型、背景、边框等，定义这些类型的格式都有相应的设置，下面将一一介绍。7.2典例剖析——网上求职简历制

7、作7.2.2“类型”规则的定义在如图7-5所示的“CSS规则定义”对话框里左边的“分类”列表框中选择“类型”选项卡，右边就可以看到与之相关的属性设置，这里的属性是文字样式最常用的一些参数。图7-5“CSS规则定义”对话框。设置完成后“CSS规则定义”对话框如图7-6所示。单击“应用”按钮将CSS样式应用到页面，单击“确定”按钮关闭“CSS规则定义”对话框。演示讲解7.2典例剖析——网上求职简历制作7.2.3“背景”规则的定义背景样式可以对页面的背景格式进行设置，下面将介绍“背景”样式规则的定义。（1）在“样式”面板中单击“新建C

8、SS规则”按钮，弹出“新建CSS规则”对话框。（2）在“选择器类型”选项中选择“标签”类型。（3）因为页面背景是由body标签决定的,所以在“选择器名称”下拉列表中选择“body”，将规则应用于所有元素。（4）在“规则定义”下拉列表中选择“仅限该文档