当前位置:文档之家› 网页制作模块网页的样式设计

网页制作模块网页的样式设计

目录
任务2 使用CSS修饰页面
下面对“背景”样式下的各个选项进行详细介绍。 Background-image (背景图像)
B
Background-color A
(背景颜色)
背景样式
C Background-repeat
Background-position(X)和 E
Background-position(Y)
下面对“类型”样式下的各个选项进行详细介绍
Font-family Font-size Font-style Line-height
Text-decoration
目录
“类型”样式
Font-weight Font-variant Text-transform
Color
任务2 使用CSS修饰页面
2)“背景”样式
目录
任务1 认识CSS样式表
2.CSS规则 CSS规则由两个主要部分构成,即选择器和一条 或多条声明。 选择器是需要改变样式的元素,每条声明由一 个属性和一个值组成,属性和值之间用冒号分开。
目录
任务1 认识CSS样式表
3.CSS样式的类型 在Dreamweaver中可以定义以下样式类型
(1) 类样式
Position(位置)
“定位”样式
Z-Index(Z轴)
Clip(剪辑) Placement(放置)
Overflow(溢出)
目录
任务2 使用CSS修饰页面
8)“扩展”样式
目录
任务2 使用CSS修饰页面
下面对“扩展”样式下的主要选项进行详细介绍
分页
(1)
(2)
Cursor(光标)
(3)
Filter(过滤器)
Margin(边距) E
目录
D Padding(填充)
任务2 使用CSS修饰页面
5)“边框”样式
目录
任务2 使用CSS修饰页面
下面对“边框”样式下的各个选项进行详细介绍
Style(类型)
(1)
(2)
Width(宽度)
(3) Color(颜色)
目录
任务2 使用CSS修饰页面
6)“列表”样式
目录
任务2 使用CSS修饰页面
下面对“列表”样式下的各个选项进行详细介绍
List-style-type
(1)
(2)
List-style-image
(3) List-style-Position
目录
任务2 使用CSS修饰页面
7)“定位”样式
目录
任务2 使用CSS修饰页面
下面对“定位”样式下的主要选项进行详细介绍
Visibility(可见性)
4.1.1任务分析
▪CSS规则
▪引用CSS样式表
(1)
(2)
(3)
(4)
▪CSS基础
▪CSS样式的类型
目录
任务1 认识CSS样式表
4.1.2相关知识
1.CSS基础 通过使用CSS样式设置页面的格式,可将页面的 内容与表示形式分离。 除设置HTML元素样式外,还可以使用CSS控制 Web页面中块级元素的格式和定位。对块级元素进 行操作的方法实际上就是使用CSS进行页面布局设 置的方法。
A.内部B.外部C.相对D.嵌入 2.下列()是定义样式表的正确格式。 A.{body:color=black(body)} B.body:color=black C.body{color:black} D.{body;color:black}
(2)
HTML标签 样式
(3) 高级样式
目录
任务1 认识CSS样式表
4.引用CSS样式表 CSS规则可以位于以下位置
(1) 外部CSSቤተ መጻሕፍቲ ባይዱ式表
(2)
内部或嵌入式 CSS样式表
(3) 内联样式
目录
任务1 认识CSS样式表
4.1.3任务小结
CSS是网页设计中一项很重要的技术,了解CSS 的特性、掌握CSS的类型和引用方式是正确使用CSS 的基本要求。
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
4.2.4任务小结
通过本任务可以练习创建、应用样式规则,创 建、链接外部样式表等操作,CSS样式文件作用强 大,是网页设计中必不可少的知识,使用外部样式 表文件可以极大地提高网页制作效率和质量,应熟 练掌握。
目录
思考与练习
1.如果要使一个网站的风格统一并便于更新, 在使用CSS时最好使用()样式。
目录
任务2 使用CSS修饰页面
3.应用和删除CSS样式
应用CSS样式
删除CSS样式
目录
任务2 使用CSS修饰页面
4.2.3任务实施
1.具体任务
目录
任务2 使用CSS修饰页面
2.实现步骤
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
模块4 网页的样式设计
知识目标
认识CSS样式表。 掌握引用CSS样式表的方法。 掌握CSS样式表的应用方法。
目录
模块4 网页的样式设计
能力目标
能理解CSS的作用。 能恰当地应用CSS样式表修饰页面。
目录
模块4 网页的样式设计
具体任务
任务1:认识CSS样式表。 任务2:使用CSS修饰页面。
目录
任务1 认识CSS样式表
目录
区块样式
Text-indent(文 字缩进)
White-space (空格)
Display(显示)
任务2 使用CSS修饰页面
4)“方框”样式
目录
任务2 使用CSS修饰页面
下面对“方框”样式下的各个选项进行详细介绍 Float(浮动)
B
Width(宽)和 A
Height(高)
方框样式
C Clear(清除)
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
2.编辑CSS样式 Dreamweaver中提供了8种CSS样式类别,即类型、背景、区块、方 框、边框、列表、定位和扩展。
类型
边框
背景
列表
CSS样式
区块
定位
方框
扩展
目录
任务2 使用CSS修饰页面
1)“类型”样式
目录
任务2 使用CSS修饰页面
目录
任务2 使用CSS修饰页面
4.2.1任务分析
要能正确、恰当地在页面中运用CSS样式,需要 掌握以下内容
(1)
创建和
管理CSS样式
掌握 以下内容
(2) 编辑CSS样式
(3)
应用和
删除CSS样式
目录
任务2 使用CSS修饰页面
4.2.2相关知识
1.创建和管理CSS样式
目录
任务2 使用CSS修饰页面
目录
D Background-attachment
任务2 使用CSS修饰页面
3)“区块”样式
目录
任务2 使用CSS修饰页面
下面对“区块”样式下的各个选项进行详细介绍
Word-spacing (单词间距)
Letter-spacing (字母间距)
Vertical-align (垂直对齐)
Text-align(文 本对齐)
相关主题