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

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

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

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

（4min）【教師】介紹CSS3的作用，引出新知識點HTML5文本標簽能設置的文本效果比較有限，也不利于代碼優(yōu)化，為此可以使用CSS3設置文本的字體、顏色、對齊方式等樣式【學生】聆聽、思考從CSS3的作用入手，讓學生思考如何使用CSS3設置樣式，激發(fā)學生的求知欲知識講解

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

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

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

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

（15min）【教師】講述特殊樣式1．文本陰影在CSS3中，使用text-shadow屬性設置文本陰影，具體格式為：text-shadow:h-shadowv-shadowblurcolor;其中，h-shadow表示陰影的水平偏移量，v-shadow表示陰影的垂直偏移量，這兩個屬性值都可以為負值，0表示陰影不偏移；blur表示陰影的模糊程度，不可為負值；color表示陰影的顏色，屬性值設置方式與文本顏色相同【教師】演示例【2-29】的操作過程，實現(xiàn)圖2-33的效果（具體操作詳見教材）圖2-33文本陰影的基本效果【教師】演示例【2-30】的操作過程，實現(xiàn)圖2-34的效果（具體操作詳見教材）圖2-34文本陰影的特殊效果2．換行在CSS3中，使用word-break屬性設置文本的換行方式，具體格式為：word-break:break-all|keep-all;其中，break-all是默認值，表示允許在單詞內(nèi)換行，可以用normal表示；keep-all表示不允許在單詞內(nèi)換行?！窘處煛垦菔纠?-31】的操作過程，實現(xiàn)圖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。保留空白符，文本在行滿或遇到換行符時換行?！窘處煛垦菔纠?-32】的操作過程，實現(xiàn)圖2-36的效果（具體操作詳見教材）圖2-36空白符的處理效果4．省略標記在CSS3中，使用text-overflow屬性設置文本內(nèi)容超出容器邊界（文本溢出）時省略標記的樣式，具體格式為：text-overflow:clip|ellipsis;其中，clip表示在文本溢出時不顯示省略標記，在容器邊界位置直接截斷；ellipsis表示在文本溢出時顯示省略標記“…”?！窘處煛垦菔纠?-33】的操作過程，實現(xiàn)圖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】的操作過程，實現(xiàn)圖2-38的效果（具體操作詳見教材）圖2-38文本省略標記的設置效果【學生】聆聽、觀看案例演示、記錄、思考【教師】詢問學生，是否有不理解的地方【學生】記錄、提問【教師】回答學生問題通過講解知識點，讓學生深刻了解CSS3中特殊樣式的使用課堂練習

（19min）【教師】布置課堂練習內(nèi)容美化“圖書簡介”頁面中的文本任務2.1創(chuàng)建的“圖書簡介”文檔的文本格式較為單一，接下來使用CSS3樣式表為其添加文本樣式，豐富頁面效果，最終效果如圖2-39所示圖2-39“圖書簡介”頁面的最終效果【教師】講解課堂練習題目，給出提示此處采用鏈接樣式表為網(wǎng)頁添加CSS樣式。（1）在DW中打開本書配套素材“項目2”→“任務2.2”→“bsonline”→“book_detail.html”文檔，在其頭部標簽中輸入以下代碼后保存.（2）在“book_detail.html”文檔的存儲目錄下創(chuàng)建名為“book_detail.css”的樣式表文件，并將其在DW中打開.（3）在“book_detail.css”文檔中輸入以下代碼，設置圖書信息部分的樣式。body{color:#727272;}/*設置頁面中文本的顏色為深灰色*/cite{font-style:normal;}/*取消cite元素中文本的斜體效果*/cite:hover{color:#9194b5;}/*設置鼠標指針經(jīng)過cite元素時，文本顏色變?yōu)闇\紫色*/.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）繼續(xù)在“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;}/*設置評價內(nèi)容的對齊方式為兩端對齊，縮進為2字符，增加斜體效果*/（5）繼續(xù)在“book_detail.css”文檔中添加以下代碼，設置影視改編與頁腳部分的樣式。.video_n{color:#000000;text-indent:2em;}/*設置影視介紹的文本顏色為黑色，縮進為2字符*/addressp{text-align:right;color:#540700;text-decoration:underline;}/*設置頁腳內(nèi)容的對齊方式為右對齊，文本顏色為深棕色，并增加下劃線效果*/【學生】完成課堂練習【教師】巡視課堂，對學生進行答疑和幫助通過課堂練習，加強對CSS3中樣式的操作熟練度課堂小結(jié)

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