《网页制作》模块4网页的样式设计

1、目录目录模块模块4 网页的样式设计网页的样式设计目录目录模块模块4 网页的样式设计网页的样式设计认识CSS样式表。掌握引用CSS样式表的方法。掌握CSS样式表的应用方法。知识目标知识目标目录目录模块模块4 网页的样式设计网页的样式设计能理解CSS的作用。能恰当地应用CSS样式表修饰页面。能力目标能力目标目录目录模块模块4 网页的样式设计网页的样式设计任务1：认识CSS样式表。任务2：使用CSS修饰页面。具体任务具体任务目录目录CSS基础(1)(2)(3)(4)引用CSS样式表CSS规则CSS样式的类型4.1.1任务分析任务分析任务任务1 认识认识CSS样式表样式表目录目录4.1.2相关知识相关

2、知识1.CSS基础基础通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离。除设置HTML元素样式外，还可以使用CSS控制Web页面中块级元素的格式和定位。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。任务任务1 认识认识CSS样式表样式表目录目录2.CSS规则规则CSS规则由两个主要部分构成，即选择器和一条或多条声明。选择器是需要改变样式的元素，每条声明由一个属性和一个值组成，属性和值之间用冒号分开。任务任务1 认识认识CSS样式表样式表目录目录3.CSS样式的类型样式的类型在Dreamweaver中可以定义以下样式类型任务任务1 认识认识CSS样式表样式表

3、(1) (2) (3)类样式类样式HTML标签标签样式样式高级样式高级样式目录目录4.引用引用CSS样式表样式表CSS规则可以位于以下位置任务任务1 认识认识CSS样式表样式表 (1) (2) (3)外部外部CSS样式表样式表内部或嵌入式内部或嵌入式CSS样式表样式表内联样式内联样式目录目录任务任务1 认识认识CSS样式表样式表4.1.3任务小结任务小结CSS是网页设计中一项很重要的技术，了解CSS的特性、掌握CSS的类型和引用方式是正确使用CSS的基本要求。目录目录任务任务2 使用使用CSS修饰页面修饰页面4.2.1任务分析任务分析要能正确、恰当地在页面中运用CSS样式，需要掌握以下内容(2

4、)掌握掌握以下内容以下内容(1)(3)创建和管理CSS样式编辑CSS样式应用和删除CSS样式目录目录4.2.2相关知识相关知识1.创建和管理CSS样式任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录2.编辑CSS样式Dreamweaver中提供了8种CSS样式类别，即类型、背景、区块、方框、边框、列表、定位和扩展。类型背景区块方框边框列表定位扩展CSS样式任务任务2 使用使用CSS修饰页面修饰页面目录目录1）“类型”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“类型”样式下的各

5、个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面“类型”样式Font-familyLine-heightFont-sizeText-decorationFont-styleColorFont-weightFont-variantText-transform目录目录2）“背景”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“背景”样式下的各个选项进行详细介绍。任务任务2 使用使用CSS修饰页面修饰页面Background-color（背景颜色)Background-image（背景图像）Background-repeatBackground-position（X）和Ba

6、ckground-position（Y）Background-attachment目录目录3）“区块”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“区块”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Word-spacing（单词间距）Letter-spacing（字母间距）Vertical-align（垂直对齐）Text-align（文本对齐）Text-indent（文字缩进）White-space（空格）Display（显示）区块样式目录目录4）“方框”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“方框”样式下的各个选项进行详细介绍任

7、务任务2 使用使用CSS修饰页面修饰页面Width（宽）和Height（高）Float（浮动）Clear（清除）Margin（边距）Padding（填充）目录目录5）“边框”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“边框”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)Style（类型）（类型）Width（宽度）（宽度）Color（颜色）（颜色）目录目录6）“列表”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“列表”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)Li

8、st-style-typeList-style-imageList-style-Position目录目录7）“定位”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“定位”样式下的主要选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Placement（放置）Position（位置）Clip（剪辑）Z-Index（Z轴）Overflow（溢出）Visibility（可见性）“定位定位”样式样式目录目录8）“扩展”样式任务任务2 使用使用CSS修饰页面修饰页面目录目录下面对“扩展”样式下的主要选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)分

9、页分页Cursor（光标）（光标）Filter（过滤器）（过滤器）目录目录任务任务2 使用使用CSS修饰页面修饰页面3.应用和删除应用和删除CSS样式样式应用应用CSS样式样式删除删除CSS样式样式目录目录4.2.3任务实施任务实施任务任务2 使用使用CSS修饰页面修饰页面1.具体任务目录目录任务任务2 使用使用CSS修饰页面修饰页面2.实现步骤目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面目录目录任务任务2 使用使用CSS修饰页面修饰页面4.2.4任务小结任务小结通过本任务可以练习创建、应用样式规则，创建、链接外部样式表等操作，CSS样式文件作用强大，是网页设计中必不可少的知识，使用外部样式表文件可以极大地提高网页制作效率和质量，应熟练掌握。目录目录思考与练习思考与练习1.如果要使一个网站的风格统一并便于更新，在使用CSS时最好使用（）样式。A.内部B.外部C.相对D.嵌入2.下列（）是定义样式表的正确