《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第4课 CSS3的使用-美化文本

第课CSS3第课CSS3的使用-美化文本的基基本本PAGE164342144CSS3的使用-美化文本第课PAGE154CSS3的使用-美化文本第4CSS3的使用-美化文本第课PAGE1

课题CSS3的使用-美化文本课时2课时（90min）教学目标知识技能目标：（1）掌握使用CSS3美化文本样式和段落样式的方法（2）学习CSS3制作特殊文本样式的方法思政育人目标：（1）培养学生的逻辑思维、辩证思维和创新思维能力（2）培养学生的探索精神和一丝不苟的工作态度教学重难点教学重点：CSS3美化文本样式和段落样式的流程教学难点：使用CSS3样式制作特殊字符教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→活动环节（15min）第2节课：导入新知（4min）→知识讲解（15min）→课堂练习（19min）→课堂小结（3min）→作业布置（4min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】介绍CSS3的作用，引出新知识点HTML5文本标签能设置的文本效果比较有限，也不利于代码优化，为此可以使用CSS3设置文本的字体、颜色、对齐方式等样式【学生】聆听、思考从CSS3的作用入手，让学生思考如何使用CSS3设置样式，激发学生的求知欲知识讲解

（24min）【教师】提问学生问题【学生】思考、回答【教师】讲述文本样式font-family:name;【教师】演示例【2-18】的操作过程，实现图2-22的效果（具体操作详见教材）font-size:xx-small|x-small|small|medium|large|x-large|

xx-large|larger|smaller|length;【教师】演示例【2-19】的操作过程，实现图2-23的效果（具体操作详见教材）color:color;【教师】演示例【2-20】的操作过程，实现图2-24的效果（具体操作详见教材）font-weight:100|200|300|400|500|600|700|800|900|normal|bold|bolder|lighter;【教师】演示例【2-21】的操作过程，实现图2-25的效果（具体操作详见教材）font-style:normal|italic|oblique;【教师】演示例【2-22】的操作过程，实现图2-26的效果（具体操作详见教材）text-decoration:none|underline|overline|line-through;【教师】演示例【2-23】的操作过程，实现图2-27的效果（具体操作详见教材）【学生】聆听、思考【教师】讲解段落格式text-align:left|right|center|justify;【教师】演示例【2-24】的操作过程，实现图2-28的效果（具体操作详见教材）vertical-align:auto|baseline|text-top|text-bottom|middle|sub|super|length|top|bottom;【教师】演示例【2-25】的操作过程，实现图2-29的效果（具体操作详见教材）【教师】演示例【2-26】的操作过程，实现图2-30的效果（具体操作详见教材）【教师】演示例【2-27】的操作过程，实现图2-31的效果（具体操作详见教材）【教师】演示例【2-28】的操作过程，实现图2-32的效果（具体操作详见教材）【学生】聆听、观看案例演示、记录、思考通过讲解知识点，让学生了解CSS3样式的基本功能课堂训练

（15min）【教师】组织学生在CSS3中制作下图效果【学生】在CSS3中进行操作【教师】公布正确代码，并进行讲解通过课堂训练，帮助学生巩固所学知识，使学生可以将所学知识与实践相结合第二节课导入新知

（4min）【教师】复习之前所讲的内容，引出新的知识点前面的一节课，已经讲述了CSS3的文本样式和段落样式，但是当需要处理一些特殊的样式的时候，上一节所学习的知识就无法解决此类问题，所以这节课将要学习处理以上对象的方法【学生】聆听、思考通过对上节课知识点的复习，指出其不足，引出新的知识点知识讲解

（15min）【教师】讲述特殊样式1．文本阴影在CSS3中，使用text-shadow属性设置文本阴影，具体格式为：text-shadow:h-shadowv-shadowblurcolor;其中，h-shadow表示阴影的水平偏移量，v-shadow表示阴影的垂直偏移量，这两个属性值都可以为负值，0表示阴影不偏移；blur表示阴影的模糊程度，不可为负值；color表示阴影的颜色，属性值设置方式与文本颜色相同【教师】演示例【2-29】的操作过程，实现图2-33的效果（具体操作详见教材）图2-33文本阴影的基本效果【教师】演示例【2-30】的操作过程，实现图2-34的效果（具体操作详见教材）图2-34文本阴影的特殊效果2．换行在CSS3中，使用word-break属性设置文本的换行方式，具体格式为：word-break:break-all|keep-all;其中，break-all是默认值，表示允许在单词内换行，可以用normal表示；keep-all表示不允许在单词内换行。【教师】演示例【2-31】的操作过程，实现图2-35的效果（具体操作详见教材）图2-35文本换行方式的设置效果3．空白符的处理默认情况下，浏览器在遇到多个空格时会将它们压缩为一个空格，其他空白符也将自动忽略。当需要显示空白符时，可以使用white-space属性设置浏览器对空白符的识别方式，具体格式为：white-space:normal|nowrap|pre|pre-line|pre-wrap;各属性值的含义如下。（1）normal。默认值，压缩空白符，文本自动换行（2）nowrap。压缩空白符，文本不换行（3）pre。保留空白符，文本只在遇到换行符时换行（4）pre-line。压缩空白符，文本在行满或遇到换行符时换行。（5）pre-wrap。保留空白符，文本在行满或遇到换行符时换行。【教师】演示例【2-32】的操作过程，实现图2-36的效果（具体操作详见教材）图2-36空白符的处理效果4．省略标记在CSS3中，使用text-overflow属性设置文本内容超出容器边界（文本溢出）时省略标记的样式，具体格式为：text-overflow:clip|ellipsis;其中，clip表示在文本溢出时不显示省略标记，在容器边界位置直接截断；ellipsis表示在文本溢出时显示省略标记“…”。【教师】演示例【2-33】的操作过程，实现图2-37的效果（具体操作详见教材）图2-37文本省略标记的设置效果5．书写方向在CSS3中，使用writing-mode属性设置文本的书写方向，具体格式为：writing-mode:horizontal-tb|vertical-rl|vertical-lr|lr-tb|

tb-lr;各属性值的含义如下。（1）horizontal-tb。水平方向，自上向下书写。（2）vertical-rl。垂直方向，自右向左书写。（3）vertical-lr。垂直方向，自左向右书写。（4）lr-tb。水平方向，自左向右书写。（5）tb-lr。垂直方向，自上向下书写。【教师】演示例【2-34】的操作过程，实现图2-38的效果（具体操作详见教材）图2-38文本省略标记的设置效果【学生】聆听、观看案例演示、记录、思考【教师】询问学生，是否有不理解的地方【学生】记录、提问【教师】回答学生问题通过讲解知识点，让学生深刻了解CSS3中特殊样式的使用课堂练习

（19min）【教师】布置课堂练习内容美化“图书简介”页面中的文本任务2.1创建的“图书简介”文档的文本格式较为单一，接下来使用CSS3样式表为其添加文本样式，丰富页面效果，最终效果如图2-39所示图2-39“图书简介”页面的最终效果【教师】讲解课堂练习题目，给出提示此处采用链接样式表为网页添加CSS样式。（1）在DW中打开本书配套素材“项目2”→“任务2.2”→“bsonline”→“book_detail.html”文档，在其头部标签中输入以下代码后保存.（2）在“book_detail.html”文档的存储目录下创建名为“book_detail.css”的样式表文件，并将其在DW中打开.（3）在“book_detail.css”文档中输入以下代码，设置图书信息部分的样式。body{color:#727272;}/*设置页面中文本的颜色为深灰色*/cite{font-style:normal;}/*取消cite元素中文本的斜体效果*/cite:hover{color:#9194b5;}/*设置鼠标指针经过cite元素时，文本颜色变为浅紫色*/.bn_top{text-indent:2em;}/*设置图书信息部分文本的缩进为2em*/.bn_toph2{color:#000000;font-size:1.8em;}/*设置图书名称的文本颜色为黑色，字号大小为默认值的1.8倍*/#rmb{color:#bc0000;font-size:2em;}/*设置价格文本的颜色为深红色，字号大小为默认值的2倍*/.bn_top.bn_pricestrong{color:#000000;}/*设置折扣的文本颜色为黑色*/.bn_top.bn_de{font-size:0.9em;}/*设置图书信息的字号大小为默认值的0.9倍*/.bn_top.bn_syn{text-align:justify;}/*设置图书简介的对齐方式为两端对齐*/（4）继续在“book_detail.css”文档中添加以下代码，设置作品评价部分的样式。h2.st{color:#9194b5;text-indent:1.2em;font-size:2em;text-shadow:1px02px#4e5174;}/*设置作品评价与影视改编标题的文本颜色为紫色，缩进为1.2字符，字号大小为默认值的2倍，增加阴影效果*/.bn_1h3{color:#4e5174;text-indent:1em;font-size:1.2em;text-shadow:0.1em0.1em1px#d3d3d3;}/*设置评价来源标题的文本颜色为深紫色，缩进为1字符，字号大小为默认值的1.2倍，增加阴影效果*/blockquote{text-align:justify;text-indent:2em;font-style:italic;}/*设置评价内容的对齐方式为两端对齐，缩进为2字符，增加斜体效果*/（5）继续在“book_detail.css”文档中添加以下代码，设置影视改编与页脚部分的样式。.video_n{color:#000000;text-indent:2em;}/*设置影视介绍的文本颜色为黑色，缩进为2字符*/addressp{text-align:right;color:#540700;text-decoration:underline;}/*设置页脚内容的对齐方式为右对齐，文本颜色为深棕色，并增加下划线效果*/【学生】完成课堂练习【教师】巡视课堂，对学生进行答疑和帮助通过课堂练习，加强对CSS3中样式的操作熟练度课堂小结

（3min）【教师】简要总章的知识要点本节课学习了使用CSS3美化文本样式和段落样式和制作特殊文本样式的方法。希望大家在课后多加练习，巩固所学知识。【学生】总结回顾知识点总结知识点，巩固印象作业布置（4min）【教师】布置课后作业在DW中打开本书配套素材“项目2”→“项目实训”→“eol”中的“main.html”和“main.css”文档，按照以下要求修改这两个文档（1）将页面标题设置为“HTML5网上学习——最便捷的HTML5学习网站”。（2）将默认文本颜色设置为“#5d5d5d”（3）将第一行与第五行标题中的“HTML5”文本的颜色设置为“#cac79d”，字号设置为“1.3em”，添加斜体效果（4）将标题下段落文本的行高设置为“100%”，缩进设置为“1em”（5）将“1.通过实例介绍基础结构”标题下的代码文本的颜色设置为“#a2af64”，字间距设置为“0