教案序號：8授課日期課時數4章節名稱任務9復合選擇器、通配符選擇器教學內容重點復合選擇器、通配符選擇器。難點復合選擇器的使用。教學目的與要求掌握CSS的基礎選擇器，學會CSS的定義方法。掌握CSS的引用方式。理解CSS的優先級，學會編寫復合選擇器。教學方法與手段教師采用任務驅動法，使用教學PPT輔助授課。教師操作演示，學生實訓練習。學生課前課后均可通過“浙江省高等學校在線開放課程共享平臺”的配套微課學習。作業及思考題完成課堂上未完成的習題，通過網絡平臺上交作業。通過回帖的方式回答課上留下的思考題。預習下一節內容。

講授內容課堂組織第一學時（任務9復合選擇器、通配符選擇器9.1復合選擇器）實操任務目標發布實戰演練——制作寓言故事網頁圖8-SEQ圖\*ARABIC\r11“寓言故事”網頁圖8-SEQ圖\*ARABIC2錨點鏈接樣式圖8-SEQ圖\*ARABIC3背景圖片位置強化訓練——制作“詩詞欣賞”網頁圖8-圖8-SEQ圖\*ARABIC4“詩詞欣賞”網頁圖8-SEQ圖\*ARABIC5“詩詞欣賞”網頁——錢塘湖春行圖8-SEQ圖\*ARABIC圖8-SEQ圖\*ARABIC6“詩詞欣賞”網頁——送友人圖8-SEQ圖\*ARABIC7“詩詞欣賞”網頁——春夜喜雨知識準備——復合選擇器交集選擇器由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。第1個必須是標記選擇器，第2個必須是類選擇器或ID選擇器。兩個選擇器之間不能有空格，必須連續書寫。<pid="red">這個段落是紅色。</p>p#red<pclass="green">這個段落是綠色。</p>p.green子任務：圖8-SEQ圖\*ARABIC8交集選擇器的使用并集選擇器如果某些選擇器定義的樣式完全相同或者部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。在并集選擇器中，各個選擇器通過逗號連接而成。子任務：圖8-SEQ圖\*ARABIC9并集選擇器的使用后代選擇器后代：某標記內嵌套的所有子元素，都稱為該標記的后代。后代選擇器：把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔。<h1>熱烈慶祝<span>第三十屆</span>牡丹文化節召開</h1>h1span圖8-SEQ圖\*ARABIC10后代選擇器的使用第二學時（任務9復合選擇器、通配符選擇器9.2通配符選擇器、9.3同時應用多個樣式）知識準備通配符選擇器通配符選擇器：用“*”表示，能匹配網頁中所有的元素，它設置的樣式將對網頁中的所有標記元素都生效。語法格式：*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}*{margin:0;padding:0;background-color:#0F0;}同時應用多個樣式如果需要同時應用多個CSS樣式，則可以在class屬性值中設置多個選擇器名稱，并用空格隔開。如：要對段落文本同時使用類p1，類p2的樣式<pclass="p1p2">同時使用.p1和.p2兩種樣式，中間用空格隔開。</p>第三學時實戰演練——制作“寓言故事”網頁案例描述：設計并制作寓言故事網頁，網頁效果如圖8-11所示圖8-SEQ圖\*ARABIC11“寓言故事”網頁網頁中，錨點鏈接分別設置成不同的超鏈接樣式，如圖8-12所示。網頁右上角背景圖片設置為固定位置，如圖8-13所示。圖8-SEQ圖\*ARABIC12錨點鏈接樣式圖8-SEQ圖\*ARABIC13背景圖片位置第四學時強化訓練——制作“詩詞欣賞”網頁案例描述：設計并制作詩詞欣賞網站，網頁效果如下圖1、圖2、圖3、圖4所示。四張網頁中均有相同的超鏈接樣式，使用鏈接式樣式表來設置。圖8-圖8-SEQ圖\*ARABIC14“詩詞欣賞”網頁圖8-SEQ圖\*ARABIC15“詩詞欣賞”網頁——錢塘湖春行圖8-SEQ圖\*ARABIC圖8-SEQ圖\*ARABIC16“詩詞欣賞”網頁——送友人圖8-SEQ圖\*ARABIC17“詩詞欣賞”網頁——春夜喜雨課后實訓圖8-SEQ圖\*