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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第課CSS3第課CSS3基礎知識和選擇器的使用的基基本本PAGE142121CSS21CSS3基礎知識和選擇器的使用第課PAGE13212CSS3基礎知識和選擇器的使用第212CSS3基礎知識和選擇器的使用第課PAGE1

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

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

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

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

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

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

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

（24min）【教師】介紹基本選擇器1．標簽選擇器HTML文檔是由很多標簽組成的，標簽選擇器就是直接引用標簽名的選擇器。使用標簽選擇器可以統(tǒng)一設置使用某類標簽設置的元素的樣式。例如，以下代碼使用了body標簽選擇器。body{font-size:20px;color:lightblue;}標簽選擇器是最常用的選擇器，通常用它來統(tǒng)一設置某些元素的基本樣式*{margin:0;padding:0;border:0;list-style:0;}2．類選擇器類選擇器以“.”為前綴，跟隨一個自定義類名。類選擇器可以使不同的元素擁有相同的樣式，也可以使相同的元素擁有不同的樣式。類選擇器可以通過設置class屬性實現(xiàn)，就是說在定義好選擇器后，還需要為標簽設置class屬性值（class屬性可以包含類列表，多個屬性值之間用空格隔開）為類選擇器的名稱，這樣才能將類選擇器樣式應用于標簽。此外，還可以把標簽與類捆綁在一起，來限定類的適用范圍，這種限定方式稱為指定類選擇器。3．ID選擇器ID選擇器以“#”為前綴，跟隨一個自定義的ID名。ID選擇器可以通過設置id屬性實現(xiàn)，就是在定義好ID選擇器后，需要設置標簽的id屬性值為ID選擇器的名稱，以將ID選擇器應用于標簽。ID選擇器的使用方式與類選擇器基本相同，區(qū)別在于ID選擇器只能應用于HTML文檔中的一個元素，而類選擇器可以應用于多個元素?！緦W生】聆聽、理解、記錄【教師】介紹組合選擇器如果需要設置復雜的網(wǎng)頁樣式，只使用基本選擇器是不夠的，此時可以使用組合選擇器來精確地匹配頁面元素，下面介紹幾種常用的組合選擇器。1．包含選擇器包含選擇器通過空格連接兩個選擇器，前面選擇器表示包含的祖先元素，后面選擇器表示被包含的后代元素。2．子選擇器子選擇器通過“>”連接兩個選擇器，前面選擇器表示要匹配的父元素，后面選擇器表示被包含的子元素。3．相鄰選擇器相鄰選擇器通過“+”連接兩個選擇器，只有滿足這個連接順序的、同級的、相鄰的元素才會成功匹配。4．兄弟選擇器兄弟選擇器通過“~”連接兩個選擇器，它在相鄰選擇器的基礎上，通過連接順序匹配相鄰的元素之后，會將后續(xù)同級別的該類型元素一同匹配?！緦W生】聆聽、理解、記錄【教師】介紹屬性選擇器：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;}【教師】介紹偽類選擇器【學生】聆聽、思考【教師】多媒體展示參考案例<style> a:link{color:black;} a:visited{color:beige;}</style>……<body> <ahref="#">《HTML5+CSS3項目開發(fā)案例教程》微課視頻</a></body>【學生】觀察參考案例，思考、記錄【教師】介紹CSS3的繼承性和層疊性【學生】聆聽、思考、記錄通過講解知識點，讓學生了解CSS3語言中選擇器的使用課堂練習

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

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

溫馨提示

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

評論

0/150

提交評論