《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第4課 CSS3的使用-美化文本

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

課題CSS3的使用-美化文本課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握使用CSS3美化文本樣式和段落樣式的方法（2）學(xué)習(xí)CSS3制作特殊文本樣式的方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生的邏輯思維、辯證思維和創(chuàng)新思維能力（2）培養(yǎng)學(xué)生的探索精神和一絲不茍的工作態(tài)度教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：CSS3美化文本樣式和段落樣式的流程教學(xué)難點(diǎn)：使用CSS3樣式制作特殊字符教學(xué)方法講授法、啟發(fā)法、問(wèn)答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識(shí)講解（24min）→活動(dòng)環(huán)節(jié)（15min）第2節(jié)課：導(dǎo)入新知（4min）→知識(shí)講解（15min）→課堂練習(xí)（19min）→課堂小結(jié)（3min）→作業(yè)布置（4min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】介紹CSS3的作用，引出新知識(shí)點(diǎn)HTML5文本標(biāo)簽?zāi)茉O(shè)置的文本效果比較有限，也不利于代碼優(yōu)化，為此可以使用CSS3設(shè)置文本的字體、顏色、對(duì)齊方式等樣式【學(xué)生】聆聽(tīng)、思考從CSS3的作用入手，讓學(xué)生思考如何使用CSS3設(shè)置樣式，激發(fā)學(xué)生的求知欲知識(shí)講解

（24min）【教師】提問(wèn)學(xué)生問(wèn)題【學(xué)生】思考、回答【教師】講述文本樣式font-family:name;【教師】演示例【2-18】的操作過(guò)程，實(shí)現(xiàn)圖2-22的效果（具體操作詳見(jiàn)教材）font-size:xx-small|x-small|small|medium|large|x-large|

xx-large|larger|smaller|length;【教師】演示例【2-19】的操作過(guò)程，實(shí)現(xiàn)圖2-23的效果（具體操作詳見(jiàn)教材）color:color;【教師】演示例【2-20】的操作過(guò)程，實(shí)現(xiàn)圖2-24的效果（具體操作詳見(jiàn)教材）font-weight:100|200|300|400|500|600|700|800|900|normal|bold|bolder|lighter;【教師】演示例【2-21】的操作過(guò)程，實(shí)現(xiàn)圖2-25的效果（具體操作詳見(jiàn)教材）font-style:normal|italic|oblique;【教師】演示例【2-22】的操作過(guò)程，實(shí)現(xiàn)圖2-26的效果（具體操作詳見(jiàn)教材）text-decoration:none|underline|overline|line-through;【教師】演示例【2-23】的操作過(guò)程，實(shí)現(xiàn)圖2-27的效果（具體操作詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、思考【教師】講解段落格式text-align:left|right|center|justify;【教師】演示例【2-24】的操作過(guò)程，實(shí)現(xiàn)圖2-28的效果（具體操作詳見(jiàn)教材）vertical-align:auto|baseline|text-top|text-bottom|middle|sub|super|length|top|bottom;【教師】演示例【2-25】的操作過(guò)程，實(shí)現(xiàn)圖2-29的效果（具體操作詳見(jiàn)教材）【教師】演示例【2-26】的操作過(guò)程，實(shí)現(xiàn)圖2-30的效果（具體操作詳見(jiàn)教材）【教師】演示例【2-27】的操作過(guò)程，實(shí)現(xiàn)圖2-31的效果（具體操作詳見(jiàn)教材）【教師】演示例【2-28】的操作過(guò)程，實(shí)現(xiàn)圖2-32的效果（具體操作詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生了解CSS3樣式的基本功能課堂訓(xùn)練

（15min）【教師】組織學(xué)生在CSS3中制作下圖效果【學(xué)生】在CSS3中進(jìn)行操作【教師】公布正確代碼，并進(jìn)行講解通過(guò)課堂訓(xùn)練，幫助學(xué)生鞏固所學(xué)知識(shí)，使學(xué)生可以將所學(xué)知識(shí)與實(shí)踐相結(jié)合第二節(jié)課導(dǎo)入新知

（4min）【教師】復(fù)習(xí)之前所講的內(nèi)容，引出新的知識(shí)點(diǎn)前面的一節(jié)課，已經(jīng)講述了CSS3的文本樣式和段落樣式，但是當(dāng)需要處理一些特殊的樣式的時(shí)候，上一節(jié)所學(xué)習(xí)的知識(shí)就無(wú)法解決此類問(wèn)題，所以這節(jié)課將要學(xué)習(xí)處理以上對(duì)象的方法【學(xué)生】聆聽(tīng)、思考通過(guò)對(duì)上節(jié)課知識(shí)點(diǎn)的復(fù)習(xí)，指出其不足，引出新的知識(shí)點(diǎn)知識(shí)講解

（15min）【教師】講述特殊樣式1．文本陰影在CSS3中，使用text-shadow屬性設(shè)置文本陰影，具體格式為：text-shadow:h-shadowv-shadowblurcolor;其中，h-shadow表示陰影的水平偏移量，v-shadow表示陰影的垂直偏移量，這兩個(gè)屬性值都可以為負(fù)值，0表示陰影不偏移；blur表示陰影的模糊程度，不可為負(fù)值；color表示陰影的顏色，屬性值設(shè)置方式與文本顏色相同【教師】演示例【2-29】的操作過(guò)程，實(shí)現(xiàn)圖2-33的效果（具體操作詳見(jiàn)教材）圖2-33文本陰影的基本效果【教師】演示例【2-30】的操作過(guò)程，實(shí)現(xiàn)圖2-34的效果（具體操作詳見(jiàn)教材）圖2-34文本陰影的特殊效果2．換行在CSS3中，使用word-break屬性設(shè)置文本的換行方式，具體格式為：word-break:break-all|keep-all;其中，break-all是默認(rèn)值，表示允許在單詞內(nèi)換行，可以用normal表示；keep-all表示不允許在單詞內(nèi)換行?！窘處煛垦菔纠?-31】的操作過(guò)程，實(shí)現(xiàn)圖2-35的效果（具體操作詳見(jiàn)教材）圖2-35文本換行方式的設(shè)置效果3．空白符的處理默認(rèn)情況下，瀏覽器在遇到多個(gè)空格時(shí)會(huì)將它們壓縮為一個(gè)空格，其他空白符也將自動(dòng)忽略。當(dāng)需要顯示空白符時(shí)，可以使用white-space屬性設(shè)置瀏覽器對(duì)空白符的識(shí)別方式，具體格式為：white-space:normal|nowrap|pre|pre-line|pre-wrap;各屬性值的含義如下。（1）normal。默認(rèn)值，壓縮空白符，文本自動(dòng)換行（2）nowrap。壓縮空白符，文本不換行（3）pre。保留空白符，文本只在遇到換行符時(shí)換行（4）pre-line。壓縮空白符，文本在行滿或遇到換行符時(shí)換行。（5）pre-wrap。保留空白符，文本在行滿或遇到換行符時(shí)換行?！窘處煛垦菔纠?-32】的操作過(guò)程，實(shí)現(xiàn)圖2-36的效果（具體操作詳見(jiàn)教材）圖2-36空白符的處理效果4．省略標(biāo)記在CSS3中，使用text-overflow屬性設(shè)置文本內(nèi)容超出容器邊界（文本溢出）時(shí)省略標(biāo)記的樣式，具體格式為：text-overflow:clip|ellipsis;其中，clip表示在文本溢出時(shí)不顯示省略標(biāo)記，在容器邊界位置直接截?cái)?；ellipsis表示在文本溢出時(shí)顯示省略標(biāo)記“…”?！窘處煛垦菔纠?-33】的操作過(guò)程，實(shí)現(xiàn)圖2-37的效果（具體操作詳見(jiàn)教材）圖2-37文本省略標(biāo)記的設(shè)置效果5．書(shū)寫(xiě)方向在CSS3中，使用writing-mode屬性設(shè)置文本的書(shū)寫(xiě)方向，具體格式為：writing-mode:horizontal-tb|vertical-rl|vertical-lr|lr-tb|

tb-lr;各屬性值的含義如下。（1）horizontal-tb。水平方向，自上向下書(shū)寫(xiě)。（2）vertical-rl。垂直方向，自右向左書(shū)寫(xiě)。（3）vertical-lr。垂直方向，自左向右書(shū)寫(xiě)。（4）lr-tb。水平方向，自左向右書(shū)寫(xiě)。（5）tb-lr。垂直方向，自上向下書(shū)寫(xiě)?！窘處煛垦菔纠?-34】的操作過(guò)程，實(shí)現(xiàn)圖2-38的效果（具體操作詳見(jiàn)教材）圖2-38文本省略標(biāo)記的設(shè)置效果【學(xué)生】聆聽(tīng)、觀看案例演示、記錄、思考【教師】詢問(wèn)學(xué)生，是否有不理解的地方【學(xué)生】記錄、提問(wèn)【教師】回答學(xué)生問(wèn)題通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生深刻了解CSS3中特殊樣式的使用課堂練習(xí)

（19min）【教師】布置課堂練習(xí)內(nèi)容美化“圖書(shū)簡(jiǎn)介”頁(yè)面中的文本任務(wù)2.1創(chuàng)建的“圖書(shū)簡(jiǎn)介”文檔的文本格式較為單一，接下來(lái)使用CSS3樣式表為其添加文本樣式，豐富頁(yè)面效果，最終效果如圖2-39所示圖2-39“圖書(shū)簡(jiǎn)介”頁(yè)面的最終效果【教師】講解課堂練習(xí)題目，給出提示此處采用鏈接樣式表為網(wǎng)頁(yè)添加CSS樣式。（1）在DW中打開(kāi)本書(shū)配套素材“項(xiàng)目2”→“任務(wù)2.2”→“bsonline”→“book_detail.html”文檔，在其頭部標(biāo)簽中輸入以下代碼后保存.（2）在“book_detail.html”文檔的存儲(chǔ)目錄下創(chuàng)建名為“book_detail.css”的樣式表文件，并將其在DW中打開(kāi).（3）在“book_detail.css”文檔中輸入以下代碼，設(shè)置圖書(shū)信息部分的樣式。body{color:#727272;}/*設(shè)置頁(yè)面中文本的顏色為深灰色*/cite{font-style:normal;}/*取消cite元素中文本的斜體效果*/cite:hover{color:#9194b5;}/*設(shè)置鼠標(biāo)指針經(jīng)過(guò)cite元素時(shí)，文本顏色變?yōu)闇\紫色*/.bn_top{text-indent:2em;}/*設(shè)置圖書(shū)信息部分文本的縮進(jìn)為2em*/.bn_toph2{color:#000000;font-size:1.8em;}/*設(shè)置圖書(shū)名稱的文本顏色為黑色，字號(hào)大小為默認(rèn)值的1.8倍*/#rmb{color:#bc0000;font-size:2em;}/*設(shè)置價(jià)格文本的顏色為深紅色，字號(hào)大小為默認(rèn)值的2倍*/.bn_top.bn_pricestrong{color:#000000;}/*設(shè)置折扣的文本顏色為黑色*/.bn_top.bn_de{font-size:0.9em;}/*設(shè)置圖書(shū)信息的字號(hào)大小為默認(rèn)值的0.9倍*/.bn_top.bn_syn{text-align:justify;}/*設(shè)置圖書(shū)簡(jiǎn)介的對(duì)齊方式為兩端對(duì)齊*/（4）繼續(xù)在“book_detail.css”文檔中添加以下代碼，設(shè)置作品評(píng)價(jià)部分的樣式。h2.st{color:#9194b5;text-indent:1.2em;font-size:2em;text-shadow:1px02px#4e5174;}/*設(shè)置作品評(píng)價(jià)與影視改編標(biāo)題的文本顏色為紫色，縮進(jìn)為1.2字符，字號(hào)大小為默認(rèn)值的2倍，增加陰影效果*/.bn_1h3{color:#4e5174;text-indent:1em;font-size:1.2em;text-shadow:0.1em0.1em1px#d3d3d3;}/*設(shè)置評(píng)價(jià)來(lái)源標(biāo)題的文本顏色為深紫色，縮進(jìn)為1字符，字號(hào)大小為默認(rèn)值的1.2倍，增加陰影效果*/blockquote{text-align:justify;text-indent:2em;font-style:italic;}/*設(shè)置評(píng)價(jià)內(nèi)容的對(duì)齊方式為兩端對(duì)齊，縮進(jìn)為2字符，增加斜體效果*/（5）繼續(xù)在“book_detail.css”文檔中添加以下代碼，設(shè)置影視改編與頁(yè)腳部分的樣式。.video_n{color:#000000;text-indent:2em;}/*設(shè)置影視介紹的文本顏色為黑色，縮進(jìn)為2字符*/addressp{text-align:right;color:#540700;text-decoration:underline;}/*設(shè)置頁(yè)腳內(nèi)容的對(duì)齊方式為右對(duì)齊，文本顏色為深棕色，并增加下劃線效果*/【學(xué)生】完成課堂練習(xí)【教師】巡視課堂，對(duì)學(xué)生進(jìn)行答疑和幫助通過(guò)課堂練習(xí)，加強(qiáng)對(duì)CSS3中樣式的操作熟練度課堂小結(jié)

（3min）【教師】簡(jiǎn)要總章的知識(shí)要點(diǎn)本節(jié)課學(xué)習(xí)了使用CSS3美化文本樣式和段落樣式和制作特殊文本樣式的方法。希望大家在課后多加練習(xí)，鞏固所學(xué)知識(shí)?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，鞏固印象作業(yè)布置（4min）【教師】布置課后作業(yè)在DW中打開(kāi)本書(shū)配套素材“項(xiàng)目2”→“項(xiàng)目實(shí)訓(xùn)”→“eol”中的“main.html”和“main.css”文檔，按照以下要求修改這兩個(gè)文檔（1）將頁(yè)面標(biāo)題設(shè)置為“HTML5網(wǎng)上學(xué)習(xí)——最便捷的HTML5學(xué)習(xí)網(wǎng)站”。（2）將默認(rèn)文本顏色設(shè)置為“#5d5d5d”（3）將第一行與第五行標(biāo)題中的“HTML5”文本的顏色設(shè)置為“#cac79d”，字號(hào)設(shè)置為“1.3em”，添加斜體效果（4）將標(biāo)題下段落文本的行高設(shè)置為“100%”，縮進(jìn)設(shè)置為“1em”（5）將“1.通過(guò)實(shí)例介紹基礎(chǔ)結(jié)構(gòu)”標(biāo)題下的代碼文本的顏色設(shè)置為“#a2af64”，字間距設(shè)置為“0