工信版（中职）Web前端设计基础 项目七-2电子课件
2022-10-25
|
29页
|
135人阅读
|
5人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.50 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574062.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目七-2电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3图文混排
项目七
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
二 知识准备
CSS 3美化文本；
CSS 3美化段落；
CSS 3图文混排。
CSS 3美化图片；
CSS 3美化段落
1.设置词间距
在网页设计中，如果单词之间的间隔设置合理，将给人赏心悦目的感觉。在CSS 3中使用word-spacing属性定义增加或者减少词与词之间的间隔。格式如下：
{word-spacing: normal | length;}
word-spacing属性值如表所示。
属性值 说 明
normal 默认值，定义单词之间的标准间隔
length 定义单词之间的固定宽度，可取正负值，单位为像素
CSS 3美化段落
2.设置字间距
在CSS 3中使用letter-spacing来定义文本之间的距离，格式如下：
{letter-spacing: normal | length;}
letter-spacing属性值如表所示。
属性值 说 明
normal 默认间隔，以标准间隔显示
length 由浮点数和单位标识符组成的长度值，可取正负值，单位为像素
CSS 3美化段落
3.设置文本修饰效果
在CSS 3中，使用text-decoration属性可以为文本设置多种修饰效果，如下划线、删除线等，格式如下：
{ text-decoration:属性值; }
text-decoration属性值如表所示。
属性值 说 明
none 默认值，对文本不进行任何修饰，用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
overline 上划线
underline 下划线
line-through 删除线
blink 闪烁
CSS 3美化段落
3.设置文本修饰效果
【例7-4】CSS 3美化段落实例一，代码如下所示（示例文件7-4.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3美化段落例1</title>
<style>
p{line-height: 10px;}
</style>
</head>
<body>
<p style="text-decoration: underline;">始信泥土有芬芳</p>
<p style="text-decoration: overline;">转眼捏成这般模样</p>
<p style="text-decoration: line-through;">你是女娲托生的精灵</p>
<p style="text-decoration: blink;">你是夸父追日的梦想</p>
<p style="word-spacing: normal;">Let me gently walk past you.</p>
<p style="word-spacing: 15px;">Bathed in your childlike eyes.</p>
<p style="letter-spacing: normal;">Let me walk through your eyes.</p>
<p style="letter-spacing: -1px">Small feet running in the field of hope.</p>
<p style="letter-spacing: 5px">Well, China</p>
<p style="letter-spacing: 1em">My dream!</p>
<p style="letter-spacing: 1ex">The dream is fragrant.</p>
</body>
</html>
在chrome浏览器中预览
CSS 3美化段落
4.设置文本的垂直对齐方式
在CSS 3中，使用vertical-align属性设置垂直对齐方式，此属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值。在表单元格中，此属性可设置单元格内容的对齐方式。格式如下：
{vertical-align:属性值;}
vertical-align属性值如表所示。
属性值 说 明
baseli
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。