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

,第7章样式表,制作人：王飞,重点和难点,CSS样式的概念创建CSS样式管理CSS样式CSS样式控制面板CSS样式在网页中的使用,层叠样式表(CSS)是用于控制Web页面内容的外观的一系列格式设置规则。样式可以让用户更加方便、有效的对网页元素进行控制，大大提高网页排版的效率，并且样式可以一次创建，多次使用，从而方便网页统一网站的整体风格。,7.1CSS概述,7.1.1CSS样式的概念,CSS是“CascadingStyleSheet”的缩写，常被译作“级联样式表”或“层叠样式表”，一般简称为“样式表”。CSS是由W3C（万维网，WorldWideWebConsortium）组织定义的一系列格式设置规则。主要用来指定文字、段落、版面等网页素材的格式。,7.1CSS概述,7.1.2CSS样式的类型,在DreamweaverCS4中可以定义以下样式类型。自定义CSS样式：用户自己定义的样式规则，可以将样式属性应用于任何文本范围或文本块。HTML样式：该样式实际上是对现有HTML标签的一种重新定义。当用户创建或改变一个CSS样式时，所有使用该标签的文本格式也将被自动更新。CSS选择器样式：该样式用于重新定义一些特定的标签组合或包含了特定ID属性的标签。,7.1CSS概述,7.1.3CSS样式面板,在DreamweaverCS4主窗口中，单击菜单“窗口”“CSS样式”，即可打开如图7-1所示的“样式”面板。,图7-1“样式”面板,7.2典例剖析网上求职简历制作,本节将通过建立一个网上求职简历网页的实例来讲解使用样式美化页面。本节操作任务如下：在“Mystuhome”下建立文件夹“CSS样式”，在“CSS样式”文件夹下建立网页“resume.html”和文件夹“image”。创建样式。定义背景规则。定义区块规则。定义边框规则。定义列表规则。定义定位规则。定义扩展规则。,7.2典例剖析网上求职简历制作,7.2.1创建样式,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样式面板分为两种模式：正在和全部。切换到全部，便可以添加当前站点的CSS样式，单击“新建CSS规则”按钮，弹出如图7-3所示的“新建CSS规则”对话框。,图7-2“样式”面板,图7-3“新建CSS规则”对话框,演示讲解,7.2典例剖析网上求职简历制作,7.2.1创建样式,（3）在“选择器类型”选项中选择CSS规则上下文选择器的类型。由于要定义的是整个页面的文本，因此选择“标签”类型。（4）在“选择器名称”下拉列表中选择选择器名称。这里因为页面是使用表格排版的。所以页面中所有的文字都是在td标签中的，所以要在“选择器名称”下拉列表中选择td，此选择器名称将规则应用于所有元素。（5）在“规则定义”下拉列表选择定义规则的位置。这里选择“新建样式表文件”。（6）设置完成后，单击“确定”按钮，此时会弹出如图7-4所示的保存文件对话框，提示用户保存新建的样式文件。这里将新的样式表文件重命名为“style.css”，保存在和网页文件同级的目录里。（7）单击“保存”按钮关闭对话框，就会打开如图7-5所示的“CSS规则定义”对话框。在“CSS规则定义”对话框中包含许多类型的格式，如类型、背景、边框等，定义这些类型的格式都有相应的设置，下面将一一介绍。,7.2典例剖析网上求职简历制作,7.2.2“类型”规则的定义,在如图7-5所示的“CSS规则定义”对话框里左边的“分类”列表框中选择“类型”选项卡，右边就可以看到与之相关的属性设置，这里的属性是文字样式最常用的一些参数。,图7-5“CSS规则定义”对话框。,设置完成后“CSS规则定义”对话框如图7-6所示。单击“应用”按钮将CSS样式应用到页面，单击“确定”按钮关闭“CSS规则定义”对话框。,演示讲解,7.2典例剖析网上求职简历制作,7.2.3“背景”规则的定义,背景样式可以对页面的背景格式进行设置，下面将介绍“背景”样式规则的定义。（1）在“样式”面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。（2）在“选择器类型”选项中选择“标签”类型。（3）因为页面背景是由body标签决定的,所以在“选择器名称”下拉列表中选择“body”，将规则应用于所有元素。（4）在“规则定义”下拉列表中选择“仅限该文档”。（5）设置完成后，单击“确定”按钮，弹出“CSS规则定义”对话框。（6）在“CSS规则定义”对话框左边的“分类”列表框中选择“背景”选项卡，如图7-7所示。,7.2典例剖析网上求职简历制作,7.2.3“背景”规则的定义,图7-7“背景”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.4“区块”规则的定义,区块样式用于精确定义整段文本中文字的字距、对齐方式等属性。下面将介绍“区块”样式规则的定义。（1）在“样式”面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。（2）在“选择器类型”选项中选择“类（可用于任何HTML元素）”类型。（3）在“选择器名称”中定义名称为“.a”(“.”后的字母可任意)。（4）在“规则定义”下拉列表中选择“仅限该文档”。（5）设置完成后，单击“确定”按钮，弹出“CSS规则定义”对话框。（6）在“CSS规则定义”对话框左边的“分类”列表框中选择“区块”选项卡，如图7-9所示。,7.2典例剖析网上求职简历制作,7.2.4“区块”规则的定义,图7-9“区块”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.5“方框”规则的定义,方框样式用于定义特定元素的大小及其周围元素的间距等属性。下面将介绍“方框”样式规则的定义。（1）在“样式”面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。（2）在“选择器类型”选项中选择“类（可用于任何HTML元素）”类型。（3）在“选择器名称”中定义名称为“.box”(“.”后的字母可任意)。（4）在“规则定义”下拉列表中选择“仅限该文档”。（5）设置完成后，单击“确定”按钮，弹出“CSS规则定义”对话框。（6）在“CSS规则定义”对话框左边的“分类”列表框中选择“方框”选项卡，如图7-10所示。,7.2典例剖析网上求职简历制作,7.2.5“方框”规则的定义,图7-10“方框”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.6“边框”规则的定义,边框样式用于定义表格的边框属性。下面将介绍“边框”样式规则的定义。（1）在“样式”面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。（2）在“选择器类型”选项中选择“类（可用于任何HTML元素）”类型。（3）在“选择器名称”中定义名称为“.border”(“.”后的字母可任意)。（4）在“规则定义”下拉列表中选择“仅限该文档”。（5）设置完成后，单击“确定”按钮，弹出“CSS规则定义”对话框。（6）在“CSS规则定义”对话框左边的“分类”列表框中选择“边框”选项卡，如图7-13所示。,7.2典例剖析网上求职简历制作,7.2.6“边框”规则的定义,图7-13“边框”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.7“列表”规则的定义,下面将介绍“列表”样式规则的定义。在“CSS规则定义”对话框左边的“分类”列表框中选择“列表”选项卡，就可以设置列表格式，如图7-15所示。,图7-15“列表”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.8“定位”规则的定义,定位样式主要用于定义层在页面中的排布相关属性。下面将介绍“定位”样式规则的定义。在“CSS规则定义”对话框左边的“分类”列表框中选择“定位”选项卡，就可以设置定位格式，如图7-16所示。,图7-16“定位”样式参数,演示讲解,7.2典例剖析网上求职简历制作,7.2.9“扩展”规则的定义,CSS的扩展样式中主要包含三方面的CSS支持，分别为CSS鼠标指针、CSS分页及CSS滤镜。在“CSS规则定义”对话框左边的“分类”列表框中选择“扩展”选项卡，就可以设置扩展格式，如图7-17所示。,图7-17“扩展”样式参数,演示讲解,7.3习题,一、选择题（1）样式定义类型中的（）主要用来进行背景色或背景图片的各项设置。A、背景B、区块C、列表D、扩展（2）主要用来进行页面上的文字段落或图片的放置位置的设置。A、盒子B、边框C、区块D、定位（3）CSS样式表只能工作在（）及以上版本的浏览器中。A、3.0B、4.0C、3.5D、2.0（4）（）几乎可以控制所有文字的属性，它也可以套用到多个网页，甚至整个网站的网页上。A、CSS样式B、HTML样式C、页面属性D、文本属性面板,7.3习题,（5）几种CSS方式各有用途，在统一整个站点风格上，用（）方式。A、外部文件式B、内嵌入式C、独立式（6）外部CSS样式文件的引用是通过（）来实现的。A、新建CSS样式B、附加样式C、编辑样式D、自动应用（7）CSS样式表存在于文档的（）区域中。A、HTMLB、BODYC、H