《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第2課 CSS3基礎(chǔ)知識(shí)和選擇器的使用_第1頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第2課 CSS3基礎(chǔ)知識(shí)和選擇器的使用_第2頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第2課 CSS3基礎(chǔ)知識(shí)和選擇器的使用_第3頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第2課 CSS3基礎(chǔ)知識(shí)和選擇器的使用_第4頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第2課 CSS3基礎(chǔ)知識(shí)和選擇器的使用_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第課CSS3第課CSS3基礎(chǔ)知識(shí)和選擇器的使用的基基本本PAGE142121CSS21CSS3基礎(chǔ)知識(shí)和選擇器的使用第課PAGE13212CSS3基礎(chǔ)知識(shí)和選擇器的使用第212CSS3基礎(chǔ)知識(shí)和選擇器的使用第課PAGE1

課題CSS3基礎(chǔ)知識(shí)和選擇器的使用課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解CSS3的發(fā)展歷程（2）掌握CSS3的語法規(guī)則，以及在HTML5頁面中添加CSS3樣式的方法（3）學(xué)習(xí)CSS3選擇器的使用方法（4）掌握CSS3樣式的繼承性與層疊性思政育人目標(biāo)：（1）培養(yǎng)學(xué)生舉一反三，以及通過發(fā)散式思維去解決問題的能力（2）幫助學(xué)生在模仿中提高創(chuàng)新能力和創(chuàng)新意識(shí)教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：CSS3的語法規(guī)則、CSS3的繼承性和層疊性教學(xué)難點(diǎn)：CSS3中選擇器的使用方法教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識(shí)講解（23min）→課堂作業(yè)（12min）→交流討論（4min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（4min）→知識(shí)講解（24min）→課堂練習(xí)（10min）→課堂小結(jié)（5min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

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

（4min）【教師】概述CSS3腳本語言，引出本節(jié)課內(nèi)容隨著HTML功能的不斷完善，結(jié)構(gòu)代碼和樣式代碼的混合使用讓HTML代碼十分混亂，同時(shí)為網(wǎng)頁的維護(hù)工作增加了難度，此時(shí)CSS應(yīng)運(yùn)而生，它將網(wǎng)頁的結(jié)構(gòu)層和表現(xiàn)層分離開來，大大簡(jiǎn)化了HTML代碼【教師】提出問題，讓學(xué)生思考，發(fā)言CSS3語言和HTML語言有何聯(lián)系？如何使用CSS3語言？如何將CSS3語言嵌入到HTML語言中【學(xué)生】聆聽、思考、發(fā)言通過介紹CSS3語言的特點(diǎn)，讓學(xué)生主動(dòng)思考如何編寫CSS3語言，激發(fā)學(xué)生的求知欲，引起學(xué)生的學(xué)習(xí)興趣知識(shí)講解

（23min）【教師】講解CSS3的發(fā)展歷程1994年，哈坤·利提出了CSS的最初設(shè)想，并和伯特·波斯一拍即合，決定共同開發(fā)CSS。在這一年的年底，哈坤在芝加哥的一次會(huì)議上展示了CSS的設(shè)想，并于次年再次向業(yè)內(nèi)展示。當(dāng)時(shí)剛成立的W3C對(duì)此很感興趣，為此組織了討論會(huì)。1996年12月，W3C發(fā)布了CSS的第一個(gè)版本CSS1。1997年，W3C組織專門負(fù)責(zé)CSS的工作組開始討論CSS1中沒有涉及的問題。1998年5月，W3C發(fā)布了CSS2。2005年12月，W3C開始制定CSS3的標(biāo)準(zhǔn)，到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。雖然完整的CSS3標(biāo)準(zhǔn)還未發(fā)布，但主流瀏覽器已經(jīng)開始支持其中的大部分特性?！緦W(xué)生】聆聽、思考、記錄【教師】介紹CSS3的語法規(guī)則CSS3的語法規(guī)則是由選擇器和聲明組成的，通過選擇器匹配HTML文檔中的不同元素，并對(duì)它們應(yīng)用聲明中設(shè)置的樣式屬性下面分別介紹各組成部分（1）選擇器用于匹配應(yīng)用聲明的某個(gè)或某些元素。（2）聲明可以有若干個(gè)，聲明之間用分號(hào)隔開并放置在一對(duì)大括號(hào)中，它們命令瀏覽器如何渲染指定對(duì)象。聲明由屬性和屬性值兩部分組成。（3）屬性是CSS3提供的樣式選項(xiàng)，屬性名一般由一個(gè)或多個(gè)單詞組成，多個(gè)單詞中間用連字符連接。（4）屬性值是設(shè)置屬性效果的參數(shù)，可以是數(shù)值、單位或關(guān)鍵字?！窘處煛刻岢鰡栴}，讓學(xué)生討論CSS3的語法規(guī)則跟HTML語言有何不同，跟哪種語言比較接近【學(xué)生】討論、思考【教師】在HTML5頁面中添加CSS3樣式1．行內(nèi)樣式表行內(nèi)樣式也稱為內(nèi)聯(lián)樣式，是直接為HTML標(biāo)簽設(shè)置style屬性，具體格式為：<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;……">內(nèi)容</標(biāo)簽名>其中，style是標(biāo)簽的屬性，它自身又包括了多個(gè)屬性，這些屬性與屬性值的規(guī)范與CSS3樣式規(guī)則相同。行內(nèi)樣式只對(duì)其所在的標(biāo)簽起作用。2．內(nèi)嵌樣式表內(nèi)嵌樣式是將CSS3代碼寫在HTML5文檔的頭部標(biāo)簽中，并且用<style>標(biāo)簽標(biāo)記，具體格式為：<head> <styletype="text/css"> {屬性1:屬性值1;屬性2:屬性值2;} </style></head>其中，type屬性值為“text/css”表示<style>標(biāo)簽所包含的是樣式代碼，該屬性只有這一個(gè)屬性值，在HTML5中可以將其省略。3．鏈接樣式表鏈接樣式是將所有樣式放在一個(gè)或多個(gè)擴(kuò)展名為“.css”的外部樣式表文件中，然后使用<link/>標(biāo)簽將樣式表文件鏈接至HTML5文檔中，具體格式為：<linkhref="CSS3文檔位置"type="text/css"rel="stylesheet"/>其中，<link/>標(biāo)簽需放在<head>標(biāo)簽中，href屬性指定CSS文檔的位置，type與rel屬性用于表明連接是一個(gè)CSS3樣式表文件?！緦W(xué)生】記錄、思考、總結(jié)【教師】演示參考代碼為任務(wù)1.1中創(chuàng)建的“1-1.html”文檔添加行內(nèi)樣式，設(shè)置標(biāo)題、段落標(biāo)簽的字號(hào)與文本顏色。代碼如下：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>第一個(gè)HTML5文檔</title> </head> <body> <h1style="font-size:40px;color:red;">第一個(gè)標(biāo)題</h1> <pstyle="font-size:30px;color:green;">第一個(gè)段落</p> </body></html>上述代碼的頁面效果如圖1-17所示圖1-17添加CSS3樣式后的頁面效果【學(xué)生】觀察運(yùn)行結(jié)果，思考、記錄通過講解知識(shí)點(diǎn)，讓學(xué)生了解CSS3的語法規(guī)則課堂實(shí)操

（12min）【教師】演示使用DW創(chuàng)建樣式表文件，并將其鏈接至HTML5文檔的方法（1）打開DW，單擊“文件”面板上方的“站點(diǎn)”下拉按鈕，在展開的列表中選擇“projectone”選項(xiàng)，打開“projectone”站點(diǎn)。（2）右擊“站點(diǎn)-projectone”，在展開的快捷菜單中選擇“新建文件”選項(xiàng)，面板中自動(dòng)創(chuàng)建一個(gè)新文檔。（3）打開新建的文檔，在編輯窗口中輸入代碼后保存文檔。（4）在“文件”面板中雙擊html文檔，其代碼顯示在編輯窗口中。在head標(biāo)簽中添加CSS3代碼，將其鏈接至樣式表文件。（5）保存文檔后，在瀏覽器中打開文檔，觀看頁面效果?！緦W(xué)生】參照教師的演示進(jìn)行操作通過課堂練習(xí)，讓學(xué)生鞏固本節(jié)課的知識(shí)點(diǎn)，加深對(duì)CSS3基本語法的印象交流討論

（4min）【教師】總結(jié)本節(jié)課的內(nèi)容，對(duì)不同小組設(shè)置不同討論點(diǎn)（1）概述CSS3腳本語言的發(fā)展歷程（2）闡述CSS3語言的特點(diǎn)（3）分析CSS3語言的語法規(guī)則【學(xué)生】進(jìn)行組內(nèi)討論，鞏固理解理論內(nèi)容通過老師設(shè)置的討論點(diǎn)，讓學(xué)生有自我展示的平臺(tái)，提高學(xué)生的交流表達(dá)能力第二節(jié)課問題導(dǎo)入

（4min）【教師】打開SublimeText編輯器，提出問題，讓學(xué)生思考根據(jù)前面所學(xué)的知識(shí)，已經(jīng)掌握了CSS3的基礎(chǔ)語法，如何使用CSS3游刃有余的設(shè)置網(wǎng)頁格式？如何通過實(shí)際情況選擇合適的選擇器【學(xué)生】聆聽、思考教師提出問題，通過問答的形式，激發(fā)學(xué)生對(duì)CSS3語言的興趣知識(shí)講解

（24min）【教師】介紹基本選擇器1．標(biāo)簽選擇器HTML文檔是由很多標(biāo)簽組成的，標(biāo)簽選擇器就是直接引用標(biāo)簽名的選擇器。使用標(biāo)簽選擇器可以統(tǒng)一設(shè)置使用某類標(biāo)簽設(shè)置的元素的樣式。例如，以下代碼使用了body標(biāo)簽選擇器。body{font-size:20px;color:lightblue;}標(biāo)簽選擇器是最常用的選擇器，通常用它來統(tǒng)一設(shè)置某些元素的基本樣式*{margin:0;padding:0;border:0;list-style:0;}2．類選擇器類選擇器以“.”為前綴，跟隨一個(gè)自定義類名。類選擇器可以使不同的元素?fù)碛邢嗤臉邮剑部梢允瓜嗤脑負(fù)碛胁煌臉邮?。類選擇器可以通過設(shè)置class屬性實(shí)現(xiàn)，就是說在定義好選擇器后，還需要為標(biāo)簽設(shè)置class屬性值（class屬性可以包含類列表，多個(gè)屬性值之間用空格隔開）為類選擇器的名稱，這樣才能將類選擇器樣式應(yīng)用于標(biāo)簽。此外，還可以把標(biāo)簽與類捆綁在一起，來限定類的適用范圍，這種限定方式稱為指定類選擇器。3．ID選擇器ID選擇器以“#”為前綴，跟隨一個(gè)自定義的ID名。ID選擇器可以通過設(shè)置id屬性實(shí)現(xiàn)，就是在定義好ID選擇器后，需要設(shè)置標(biāo)簽的id屬性值為ID選擇器的名稱，以將ID選擇器應(yīng)用于標(biāo)簽。ID選擇器的使用方式與類選擇器基本相同，區(qū)別在于ID選擇器只能應(yīng)用于HTML文檔中的一個(gè)元素，而類選擇器可以應(yīng)用于多個(gè)元素?！緦W(xué)生】聆聽、理解、記錄【教師】介紹組合選擇器如果需要設(shè)置復(fù)雜的網(wǎng)頁樣式，只使用基本選擇器是不夠的，此時(shí)可以使用組合選擇器來精確地匹配頁面元素，下面介紹幾種常用的組合選擇器。1．包含選擇器包含選擇器通過空格連接兩個(gè)選擇器，前面選擇器表示包含的祖先元素，后面選擇器表示被包含的后代元素。2．子選擇器子選擇器通過“>”連接兩個(gè)選擇器，前面選擇器表示要匹配的父元素，后面選擇器表示被包含的子元素。3．相鄰選擇器相鄰選擇器通過“+”連接兩個(gè)選擇器，只有滿足這個(gè)連接順序的、同級(jí)的、相鄰的元素才會(huì)成功匹配。4．兄弟選擇器兄弟選擇器通過“~”連接兩個(gè)選擇器，它在相鄰選擇器的基礎(chǔ)上，通過連接順序匹配相鄰的元素之后，會(huì)將后續(xù)同級(jí)別的該類型元素一同匹配?！緦W(xué)生】聆聽、理解、記錄【教師】介紹屬性選擇器：nava[id]{border:2pxsolid#2f4f4f;background:white;

color:cadetblue;}nava[id="first"]{border:2pxsolid#2f4f4f;background:white;

color:cadetblue;}nava[title~="web"]{background:lightcyan;color:#2f4f4f;}nava[title^=http]{background:#ffffff;color:#2f4f4f;}nava[title$="link"]{background:lightcyan;color:#2f4f4f;}nava[title*="t"]{background:lightcyan;color:#2f4f4f;}nava[lang|="zh"]{background:#ffffff;color:darkolivegreen;}【教師】介紹偽類選擇器【學(xué)生】聆聽、思考【教師】多媒體展示參考案例<style> a:link{color:black;} a:visited{color:beige;}</style>……<body> <ahref="#">《HTML5+CSS3項(xiàng)目開發(fā)案例教程》微課視頻</a></body>【學(xué)生】觀察參考案例，思考、記錄【教師】介紹CSS3的繼承性和層疊性【學(xué)生】聆聽、思考、記錄通過講解知識(shí)點(diǎn)，讓學(xué)生了解CSS3語言中選擇器的使用課堂練習(xí)

（10min）【教師】布置課堂練習(xí)【教師】演示重點(diǎn)操作流程table{ text-align:center;border-collapse:collapse; line-height:1.2;width:100%;}/*設(shè)置表格中的文本居中對(duì)齊，合并單元格邊框，設(shè)置1.2倍行間距，寬度為頁面的100%*/th,td{ font-size:15px;padding:3px5px; cursor:pointer;border:solid2px#445a46;}/*設(shè)置單元格的字號(hào)為15px，上下內(nèi)邊距3px，左右內(nèi)邊距5px，鼠標(biāo)指針移至其上時(shí)變?yōu)槭中椭羔?，增加寬度?px的邊框*/（2）theadth{ font-size:20px;font-weight:bold; text-align:center;background:#a8a8a8;color:#fcfcfc;}/*設(shè)置表頭的字號(hào)為20px，字體加粗顯示，居中對(duì)齊，增加背景顏色，更改文本顏色*/tbodyth{ background:url(images/p1.png)8px40%no-repeat; padding-left:26px;}/*設(shè)置表格背景圖片，只出現(xiàn)一次，左內(nèi)邊距為26px*/【學(xué)生】完成課堂練習(xí)【教師】公布課堂練習(xí)答案【學(xué)生】對(duì)照參考答案，修改內(nèi)容利用練習(xí)法，加強(qiáng)學(xué)生對(duì)CSS3語言的使用課堂小結(jié)

（5min）【教師】簡(jiǎn)要總結(jié)本章的知識(shí)要點(diǎn)本節(jié)課學(xué)習(xí)了CSS3的發(fā)展歷程、CSS3的語法規(guī)則、在HTML5頁面中添加CSS3樣式的方法、CSS3選擇器的使用方法、CSS3樣式的繼承性與層疊性。。希望大家在課后多加練習(xí)，鞏固所學(xué)知識(shí)【學(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，鞏固印象作業(yè)布置（2min）【教師】布置課后作業(yè)使用DW按照下列要求創(chuàng)建“HTML5網(wǎng)上

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論