6.4设置CSS样式属性 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第六章 CSS样式表 样式表的应用非常广泛，通过定义样式表，可以对页面中的元素进行美化，是美化网页的重要手段之一。Dreamweaver CS5.5支持强大的样式表定义，通过样式表的编辑功能，可以方便快捷地为网页定义各种各样的样式。 6.4设置CSS样式属性 6.4.1设置CSS【类型】分类属性 使用【CSS规则定义】对话框中的【类型】分类，可以定义CSS样式的基本字体和字号等。 在【CSS样式】面板中选取要编辑的样式，单击面板底部的【编辑样式】按钮，打开CSS【规则定义】对话框，在该对话框的【分类】列表框中选择【类型】选项，然后在右侧设置属性参数值，设置完成后单击【确定】按钮即可。 6.4设置CSS样式属性 6.4.2设置CSS【背景】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【背景】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.3设置CSS【区块】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【区块】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.4设置CSS【方框】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【方框】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.5设置CSS【边框】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【边框】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.6设置CSS【列表】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【列表】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.7设置CSS【定位】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【定位】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.4设置CSS样式属性 6.4.8设置CSS【扩展】分类属性 在【CSS规则定义】对话框的【分类】列表框中选择【扩展】选项，然后在右侧可以设置相关的属性，设置完成后单击确定按钮即可。 6.5使用CSS对页面进行布局 在使用CSS布局页面时，网页内容会被添加到<div>标签中，然后将<div>标签放在不同的位置上，它与表格单元格（被限制在表格行和列中的某个现有位置）不同，<div>标签可以出现在Web页上的任何位置，并且可以用绝对方式（指定X和Y坐标）或相对方式（指定与其他页面元素的距离）来定位<div>标签。 当使用Dreamweaver创建新页面时，可以创建一个已包含CSS布局的页面。Dreamweaver向用户提供了多种不同的CSS布局样式。另个，用户还可以创建自己的CSS布局，并将它们添加到配置文件中，以便使它们在【新建文档】对话框中显示为布局选项。 6.5使用CSS对页面进行布局 使用CSS布局创建页面的具体操作如下： ①执行【文件】→【新建】菜单命令，打开【新建文档】对话框。 ②选择【空白页】选项卡（默认选择），在【页面类型】列表框中选择【HTML】选项。 ③在右侧的布局列表框中选择要创建的布局类型，用户可以在最右侧的预览栏中看到该布局样式和该布局的简单说明。 ④在【文档类型】下拉列表中选择文档的类型，一般保持默认设置。 ⑤在【布局CSS位置】下拉列表中选择布局CSS的位置，如选择【添加到文档头】选项。 ⑥完成设置后，单击【创建】按钮即可。 6.5使用CSS对页面进行布局 在Dreamweaver CS5.5中，CSS布局提供了以下几种类型的列： (1)固定 (2)弹性 (3)液态 (4)混合 6.5项目实战一：图文列表 图文列表在网页中的使用十分广泛，它是网页的基本组成部分，也是对前面章节知识的综合应用，本节通过一个实例详细介绍图文列表的使用方法。步骤如下： （1）设置新闻标题 （2）设置左侧的图文部分 （3）设置右侧文字列表 （4）设置下方文字列表 6.5项目实战二：竖排导航 做一个简单的竖直导航菜单，步骤如下： （1）通过ul和li制作一个竖排列表 （2）消除重合 （3）增加特效 6.5项目实战三：水平导航 做一个简单的水平导航菜单，步骤如下： （1）设置整个菜单的宽度与字体样式 （2）设置ul的样式 （3）设置li左浮动，使菜单项水平平铺 （4）设置a为块级元素，响应整个矩形的单击事件 （5）设置鼠标经过事件 小结 本章主要介绍了CSS基本语法，详细地演示了创建与编辑CSS样式的方法及如何在网页中应用CSS样式，并通过案例来加以具体应用，使读者进一步巩固和掌握CSS样式在网页中的应用技巧。 Thank You !