HTML5 CSS3Web前端開發(fā)技術(shù)（任務(wù)式）（微課版）（于麗娜第2版） 教案05 《向項目中引入CSS》

《》教案20-20學年第學期課程名稱：授課教師：職稱：開課部門：年月日

《》教案首頁課程名稱授課專業(yè)班級授課教師職稱部門課程類型學位課□公共必修課□專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課非學位課□公共必修課專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課課程性質(zhì)□理論□實踐理論+實踐考核方式考試□考查課程教學總學時數(shù)64學分3.5學情分析大*年級的學生首次正式接觸WEB的相關(guān)概念，但是在之前的基礎(chǔ)課程中學過***（操作系統(tǒng)、計算機原理、Python編程、C語言編程）等相關(guān)專業(yè)方面基礎(chǔ)知識，具備有一定的計算機操作能力，與基礎(chǔ)應(yīng)用知識；并且在日常中大量使用電腦與手機等計算機設(shè)備，其中日常生活中也對于網(wǎng)頁的使用更是頗多。但對于WEB方面的專業(yè)知識沒有一個準確、完整的知識體系構(gòu)建。教學方法談?wù)摲ā⒅v授法、演示法、練習法、抽象法教材名稱《HTML5+CSS3Web前端開發(fā)技術(shù)》作者于麗娜出版社及出版時間人民郵電出版社2021.09參考書目作者出版社及出版時間教研室意見教研室主任簽字：年月日注：表中□選項請打“√”。每門課程只需填寫一次本表。

《》教案授課教師班級學時6授課日期教學任務(wù)《向項目中引入CSS》授課方式講授實踐授課地點多媒體教室實驗/實訓(xùn)室□企業(yè)主要參考資料教學PPT、微課、動畫、思維導(dǎo)圖課程思政視頻習題等教學目標素質(zhì)目標：1.培養(yǎng)學生紅色精神；2.提升學生思想道德素質(zhì)和社會主義核心價值觀。知識目標：1.掌握CSS3的外部樣式、內(nèi)部樣式與行內(nèi)樣式；2.掌握CSS3的語法規(guī)則；3.掌握CSS3的基礎(chǔ)選擇器、層次選擇器、結(jié)構(gòu)偽類選擇器、屬性選擇器。能力目標：1.掌握使用表CSS對文本、字體樣式內(nèi)容的美化；掌握使用急乎乎選擇器進行頁面元素選擇查找；掌握使用高級選擇器進行頁面元素的選擇查找。教學內(nèi)容CSS3概述CSS3基礎(chǔ)語法CSS3的進入方法CSS3基礎(chǔ)選擇器CSS3高級選擇器CSS3選擇器權(quán)重重點難點教學重點：CSS3的三種引入方式及特點對比、優(yōu)先級CSS3的基礎(chǔ)選擇器及優(yōu)先級CSS3的高級選擇器、高級選擇器的分類與使用教學難點：CSS3選擇器權(quán)重的計算教學方法談?wù)摲ā⒅v授法、演示法、練習法素材資源R文本素材R實物展示RPPT幻燈片□音頻素材R視頻素材R動畫素材R圖形/圖像素材□網(wǎng)絡(luò)資源□其他課后作業(yè)任務(wù)一：總結(jié)提升任務(wù)二：能力進階教學反思注：教案按授課次數(shù)填寫，每次授課均應(yīng)填寫一份本表。重復(fù)班授課可不另填寫教案。?

教學過程及內(nèi)容一、導(dǎo)入新課【約5分鐘】教師：在經(jīng)過前面幾個單元的學習中，掌握了HTML進行頁面內(nèi)容框架的開發(fā)，那我們能開發(fā)出例如，學習強國、人民網(wǎng)，京東商城，網(wǎng)易新聞，QQ空間等，具有獨特效果的網(wǎng)站了么？答案自然是不能，我們使用HTML僅能開發(fā)出以內(nèi)容為主，有少量文本樣式效果的頁面，早已不能滿足現(xiàn)在的產(chǎn)品設(shè)計需求，而頁面中華麗的、個性的、炫酷的效果，需要借助CSS提供的能力。CSS正是網(wǎng)頁三劍客中，負責頁面展示效果的重要部分。在新云課堂項目中，我們已經(jīng)完成部分內(nèi)容，僅有HTML5默認的顯示效果，還不夠吸引用戶。我們將在本單元開始，通過CSS的引入，來美化項目。二、新知識點、技能點講解【約x分鐘】新課講解1：【約20分鐘】教師：隨著HTML的成長，為了滿足頁面設(shè)計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。CSS，英文全稱是CascadingStyleSheets，中文名為層疊樣式單或級聯(lián)樣式單。這里的級聯(lián)或?qū)盈B的含義為，可以對同一元素做多次的表現(xiàn)樣式進行設(shè)定，這些樣式之間存在一定的權(quán)重等級邏輯關(guān)系，權(quán)重或級別最高的會對最終的表現(xiàn)樣式進行重寫渲染。在由HTML、CSS、JavaScript組成的網(wǎng)頁三劍客中，CSS主要負責網(wǎng)頁的表現(xiàn)標準，包括頁面風格、字體樣式、排列方式、排版布局和少部分簡單的動畫與切換效果。......學生：那如何使用CSS呢？教師：那我們先從CSS的基礎(chǔ)語法來學習。CSS由選擇器和樣式表兩部分組成，其中使用成對的“/*”與“*/”符號作為注釋符：選擇器

{

/*

這里是注釋說明

*/

樣式屬性1:

樣式值1;

樣式屬性2:

樣式值2;

......}花括號外為選擇器部分，用來決定相鄰的樣式表對頁面中的哪些HTML元素內(nèi)容產(chǎn)生效果?；ɡㄌ杻?nèi)為樣式表部分，由至少一組鍵值對組成，鍵名與鍵值使用冒號隔開；每條樣式屬性的結(jié)尾使用分號結(jié)束。樣式屬性就是用來設(shè)定表現(xiàn)方式的?；ɡㄌ栍脕戆鼧邮綄傩裕话臉邮綄傩?，則用來修飾該花括號開始部分緊鄰的選擇器所對應(yīng)的全部份HTML元素內(nèi)容?；ɡㄌ柕拈_始部分寫在對應(yīng)選擇器的緊鄰右側(cè)并后面跟隨換行，對應(yīng)的樣式屬性使用2個或4個空格符，作為縮進的內(nèi)容。每行只寫一個樣式屬性鍵值對。花括號的結(jié)尾部分，新起一行，與選擇器垂直縮進對齊。CSS是如何配合HTML進行頁面美化的。CSS的使用共有3種方式：內(nèi)部樣式、外部樣式、行內(nèi)樣式。內(nèi)部樣式：通過位于HTML的head標簽中的style標簽來引入CSS樣式。style標簽為雙標記標簽，在標簽內(nèi)容部分按照CSS語法書寫本頁面內(nèi)生效的樣式內(nèi)容，type屬性告知瀏覽器內(nèi)容格式，HTML5標準中推薦省略type屬性。......(案例演示)行內(nèi)樣式：通過HTML的style屬性的方式，來引入CSS樣式內(nèi)容。這里需要注意作為元素的style屬性的值的內(nèi)容只有CSS樣式屬性，并無選擇器，因為此種方式的寫法，只能給style所在的元素添加CSS樣式，同時支持添加多條CSS樣式，須同時卸載style的屬性值中，每調(diào)樣式屬性之間用分號分隔，最后一個分號省略。......(案例演示)外部樣式：通過位于HTML的head標簽中的link標簽來引入外部CSS樣式文件。通過href屬性來設(shè)定要引入的CSS文件路徑，type屬性告知瀏覽器文件格式，其中rel屬性不可省略，type屬性推薦省略。......(案例演示)新課講解2：【約20分鐘】教師：我們在頁面編寫中，應(yīng)該用哪種方式進行樣式的引用呢？實際上頁面元素最終的樣式即為多個樣式的疊加效果。但這存在一個問題——當同時應(yīng)用上述的三類樣式時，頁面元素將同時繼承這些樣式，但樣式之間如有沖突，應(yīng)繼承哪種樣式？這就存在樣式優(yōu)先級的問題。我們大膽猜想一下，三種引入優(yōu)先級哪一種更高，哪一種更低？學生：......(各種猜想)教師：我們來通過案例來了解，他們的優(yōu)先級是如何排列的。我們在案例中，使用三種樣式引入方式來對內(nèi)容的h1標簽設(shè)定不同的顏色樣式。然后在外部樣式表和內(nèi)部樣式表中再對h4標簽設(shè)定不同演的字體顏色。......（演示過程）你是否能看出其中的過規(guī)律呢？調(diào)整內(nèi)部外部樣式，都不影響h1標簽的顏色為橙色，則可以推出行內(nèi)樣式的優(yōu)先級最高；調(diào)整內(nèi)部外部樣式，h2的顏色會受到影響，該元素沒有行內(nèi)樣式，只受到內(nèi)外樣式引用位置的先后影響，其實質(zhì)是外部引用相當于將外部文件復(fù)制到引用的link標簽位置，從而變?yōu)橐粋€內(nèi)部樣式，而對h2使用了相同的選擇器方式設(shè)定樣式，則后設(shè)定的樣式覆蓋之前的樣式。其引用優(yōu)先級如下：行內(nèi)樣式>內(nèi)部樣式表>外部樣式表。需要引起足夠注意的是，這里的優(yōu)先級僅僅是表示在選擇器相同而引用方式不同的情況下，因引用方式不同而帶來的權(quán)重優(yōu)先區(qū)別。實際中影響樣式優(yōu)先級的還有選擇器權(quán)重的影響，最終結(jié)果由兩者共同決定，我們會在稍后的部分，再討論綜合情況下的優(yōu)先級權(quán)重問題。為了便于記憶基礎(chǔ)選擇器優(yōu)先級的特點，我們總結(jié)了一個簡單的判斷方法------“就近原則"。如果同一個選擇器中樣式聲明層疊，距離被修飾元素最近的樣式會最終生效。新課講解3：【約15分鐘】教師：CSS語法中的重要的兩個部分之一，選擇器。是用來決定相鄰的樣式表對頁面中的哪些HTML元素內(nèi)容產(chǎn)生效果。CSS中我們講選擇器分為了基礎(chǔ)選擇器和高級選擇器。基礎(chǔ)選擇器是構(gòu)成高級選擇器的基礎(chǔ)成員。基礎(chǔ)選擇器有標簽選擇器、class選擇器、id選擇器。這里我們再補充一個通配符選擇器。元素選擇器：也叫做標簽選擇器。每種HTML標簽的名稱都可以作為相應(yīng)的標簽選擇器的名稱。該選擇器會匹配頁面中所有該類型的標簽元素。......元素選擇器：也叫做標簽選擇器。每種HTML標簽的名稱都可以作為相應(yīng)的標簽選擇器的名稱。該選擇器會匹配頁面中所有該類型的標簽元素。......id選擇器：通過與HTML元素中的id屬性值進行匹配，從而指定對應(yīng)的樣式進行渲染。使用“#"符號配合id屬性值進行表示，在一個頁面中id的屬性值不能產(chǎn)生重復(fù)。......class選擇器：通過與HTML元素中的class屬性值進行匹配，從而指定對應(yīng)的樣式進行渲染。使用“.”符號配合class屬性值進行表示，在一個頁面中class的屬性值可以產(chǎn)生重復(fù)。......互為不同的選擇器，那所對應(yīng)的優(yōu)先級權(quán)重又是如何？基礎(chǔ)選擇器優(yōu)先級遵循ID選擇器>

class

類選擇器>標簽選擇器的優(yōu)先順序。我們將在本單元的最后詳細的說明權(quán)重問題。大家跟著我一起完成練習案例。新課講解4：【約15分鐘】教師：選擇器是CSS中一個重要的內(nèi)容，一般大型網(wǎng)站中樣式表可能到達成百上千行，如果只是用基礎(chǔ)選擇器，樣式之間只有一一對應(yīng)關(guān)系，當需要對樣式表進行修改的時候，要做的工作量極大；單單是添加一條樣式，可能名class屬性的命名想要不沖突都是件非常困難的事情。又如果當樣式與樣式之間有了一定的關(guān)聯(lián)時，由很難從對應(yīng)的class屬性中得到結(jié)構(gòu)化的邏輯關(guān)系。所以就需要借助將基礎(chǔ)選擇器按照一定關(guān)系條件構(gòu)造組成的高級選擇器。上圖是用戶進行登錄的一個流程模擬，表單的執(zhí)行原理是用戶通過網(wǎng)絡(luò)提交表單給服務(wù)器，等待服務(wù)器反饋。層次選擇器：通過描述基礎(chǔ)選擇器之間的層次關(guān)聯(lián)關(guān)系，來確定要匹配的元素。其主要的層次關(guān)系包括后代、父子、相鄰兄弟和通用兄弟等幾種關(guān)系，通過它們之間的關(guān)系就可以快速選定需要的元素。層次選擇器是一個非常好用的選擇器。選擇器 語法公式 功能解釋后代選擇器 EF 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)子選擇器 E>F 選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素相鄰兄弟選擇器（CSS3新增） E+F 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素后面通用兄弟選擇器（CSS3新增） E~F 選擇匹配的F元素，且匹配的F元素是位于匹配的E元素后的同級元素......新課講解5：【約30分鐘】教師：在HTML5中如何進行驗證？這里主要了解以下幾種方式。placeholder屬性用于為input類型的文本框提供一種提示（hint）。這種提示可以描述文本框期待用戶輸入何種內(nèi)容。在輸入為空時顯示，當在文本框中寫入內(nèi)容時消失。

placeholder屬性適合于input標簽：text、search、url、email和password等類型。required屬性用于規(guī)定文本框填寫內(nèi)容不能為空，否則不允許用戶提交表單。該屬性適合input標簽：text、search、url、email、password、number、checkbox、radio、file等類型。pattern屬性用于驗證表單輸入的內(nèi)容，通常情況下email、tel、number等，已經(jīng)自帶了簡單的驗證，加上pattern就會更加高效。pattern的屬性值為正則表達式。注意，該屬性在具有novalidate屬性的<form>元素內(nèi)不生效。novalidate屬性規(guī)定，當提交表單時不進行驗證。如果使用該屬性，則表單不會驗證表單的輸入。以上幾種特殊屬性中，pattern用來設(shè)定正則驗證規(guī)則，是最靈活也是較難理解的。正則表達式是對\t"/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/_blank"字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規(guī)則字符串”。起初是科學家研究出了一種用數(shù)學方式來描述神經(jīng)網(wǎng)絡(luò)的新方法，他們創(chuàng)造性地將神經(jīng)系統(tǒng)中的神經(jīng)元描述成了小而簡單的自動控制元，從而作出了一項偉大的工作革新。本質(zhì)上正則表達式是使用特殊符號表示一定匹配規(guī)則的字符串，用來進行內(nèi)容比對。HTML5標準中提供了一種不借助js進行表單驗證的新方式：文本類輸入框中的pattern屬性中存放開發(fā)者預(yù)先設(shè)定的內(nèi)容格式的正則表達式，用戶輸入的內(nèi)容必須符合正則表達式所指的規(guī)則，否則就不能提交表單，在提交表單時做出錯誤信息的反饋。關(guān)于正則表達式這里不做深入講解，我們舉幾個例子，讓大家在頭腦中有初步的概念即可。示例：/^[a-z0-9_-]{6，18}$/分析：兩側(cè)"/"表示正則表達式的開始與結(jié)束，開始位置與^相鄰構(gòu)成了/^，表示正則表達式的匹配要求從目