《HTML5+CSS3網(wǎng)頁設計技術》授課教案授課教案學校******大學（學院）任課教師***授課題目模塊四CSS3選擇器授課時間長度6學時所用教材HTM5+CSS3網(wǎng)頁設計技術，黃玉春主編；中國科學技術出版社教學目標｜知識目標｜掌握CSS3組合選擇器、屬性選擇器、偽類選擇器的類型和基本應用。｜能力目標｜（1）能夠使用CSS3的選擇器選擇目標元素并設置相應的樣式。（2）掌握CSS3的書寫規(guī)范，能夠編寫高效、可維護的CSS代碼。｜素質目標｜（1）通過學習CSS高級選擇器，體會用多種方法解決問題，培養(yǎng)靈活的思維方式。（2）在實戰(zhàn)案例中，通過查找收集案例素材，知曉我國發(fā)展現(xiàn)狀，關注科學技術領域的新進展。教學重點（1）CSS組合選擇器。（2）CSS屬性選擇器。（3）CSS偽類選擇器。教學難點CSS偽類選擇器、微偽素的理解。教學方法任務引入法、課堂討論、理論講解、實操訓練教學用具多媒體教學設備、教材、課件、實訓素材教學過程主要教學內容及步驟考勤教師使用App或者點名等方式進行簽到；學生按照老師要求簽到任務導入打開一個網(wǎng)頁，查看網(wǎng)頁源碼，引出本任務教學內容。教學內容任務一認識CSS3組合選擇器CSS組合選擇器說明了兩個選擇器直接的關系。在CSS中包含了四種組合方式。（1）后代選擇器（以空格分隔）：選擇指定元素的所有的后代元素。（2）子元素選擇器（以大于號分隔）：選擇指定元素的第一代元素。（3）相鄰兄弟選擇器（以加號分隔）：選擇指定元素相鄰的指定元素（只會向下找一個）。（4）普通兄弟選擇器（以波浪線分隔）：選擇指定元素后的所有指定的同級元素（向下找所有指定的同級的）。一、后代選擇器后代（派生）選擇器用于選擇指定標簽元素下的后輩元素，以空格分隔。其語法格式如下：選擇器1選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}例如，下面的代碼選擇了div標簽內是所有span標簽，并將其字體顏色設為紅色：divspan{color:red;}二、子元素選擇器子元素選擇器用于選擇指定標簽元素的所有第一代子元素，以大于號（>）分隔。其語法格式如下：選擇器1>選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}例如，下面的代碼選擇選擇了<div>元素中所有直接子元素<p>標簽，并將其設為紅色字體：div>p{color:red;}需要注意的是，后代（派生）選擇器用空格隔開，選擇的是所有后代元素。三、相鄰兄弟選擇器相鄰選擇器選擇指定元素相鄰的指定元素（只會向下找一個），以加號（+）分隔。其一般格式如下：選擇器1+選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}例如，下面的代碼選擇與p元素同級第一div元素，并給其設置紅色單實線邊框：p+div{border:1pxsolidred;}四、普通兄弟選擇器普通兄弟元素選擇器選擇指定元素后的所有指定的同級元素（向下找所有指定的同級的），以波浪線（~）分隔。其語法格式如下：選擇器1~選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}例如，下面的代碼選擇與p元素同級的所有div元素，并將其設一個紅色單實線邊框：p~div{border:1pxsolidred;}任務二掌握屬性選擇器屬性選擇器是通過元素的屬性選擇HTML元素。屬性選擇器可以根據(jù)屬性名和屬性值進行選擇。一、屬性名選擇器屬性名選擇器（E[attr]）是指選擇名稱為E的標簽，且該標簽定義了attr屬性。其語法格式如下：選擇器[屬性值]例如代碼input[type="text"]選擇器將選擇所有type屬性為“text”的<input>元素。二、指定屬性值選擇器指定屬性值選擇器（E[attr="value"]）用于選擇指定了屬性和值的元素。其語法格式如下：選擇器[屬性=屬性值]例如代碼p[title="東方紅"]選擇器將選擇所有title屬性值為“東方紅”的<p>元素。三、屬性值包含選擇器屬性值包含選擇器有2種。1.E[attr~="value"]該選擇器用于選擇屬性值包含一個指定單詞的元素。此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞。其語法格式如下：選擇器[屬性~=屬性值]例如代碼p[class~="s1"]選擇器將選擇所有class屬性值中包含單詞“s1”的<p>元素。2.E[attr*="value"]該選擇器匹配元素屬性值包含指定值的元素。其語法格式如下：選擇器[屬性*=屬性值]例如代碼p[title~="東方紅"]選擇器將選擇所有title屬性值中包含"東方紅"的<p>元素。注意與屬性值包含選擇器（E[attr~="value"]）的區(qū)別。四、屬性值匹配開始值選擇器屬性值匹配開始值選擇器（E[attr^="value"]）是指匹配元素屬性值帶指定的值開始的元素。其語法格式如下：選擇器[屬性^=屬性值]例如代碼p[title^="東方紅"]選擇器將選擇所有title屬性值中以“東方紅”開頭的<p>元素。五、屬性值匹配結尾值選擇器屬性值匹配結尾值選擇器（E[attr$="value"]）是指匹配元素屬性值帶指定的值結尾的元素。其語法格式如下：選擇器[屬性$=屬性值]例如代碼p[title$="東方紅"]選擇器將選擇所有title屬性值中以“東方紅”為結尾的<p>元素。任務三了解偽類選擇器與偽元素偽類選擇器在CSS中起到的作用可以說是至關重要的，如果CSS沒有偽類選擇器，有很多效果都要借助JavaScript來完成，這樣不僅代碼量增加，維護起來難度也大。這樣程序員的工作量大，也違背了CSS誕生的作用，就是提高開發(fā)效率，在同等的世間里完成更高質量的開發(fā)。偽類選擇器包括偽類和偽類對象選擇器，偽類選擇器以冒號（:）作為前綴標識符。一、動態(tài)偽類動態(tài)偽類是一類行為類樣式，這些樣式不存在于HTML中，只有當用戶于頁面進行交互才能體現(xiàn)出來。動態(tài)偽類選擇器包括兩種形式。（1）錨點偽類：這是一種在鏈接中最常見的樣式，如:link、:visited。（2）行為偽類：也稱用戶操作偽類，如:hover、:active、:focus。二、結構偽類結構偽類是CSS3新設計的選擇器，它利用文檔結構樹實現(xiàn)元素過濾，通過文檔結構的相互關系來匹配特定的元素，從而減少文檔內class屬性和id屬性的定義，使得文檔更加簡潔。1．:first-child選擇父元素中第一個子元素。其語法格式如下：父元素子元素標簽名:first-child{}例如，下面的代碼將div標簽內第一個p標簽元素設為紅色；divp:first-child{color:red;}2．:last-child選擇父元素中最后一個子元素。語法格式如下：父元素子元素標簽名:last-child{屬性:屬性值;…}例如，下面的代碼將div標簽內最后一個p標簽元素設為紅色；divp:last-child{color:red;}3．:nth-child(n)選擇父元素中自行指定的子元素。n的值都是按照子元素總體數(shù)量統(tǒng)一排序。其中n不僅僅可以是一個數(shù)字，還可以是even偶數(shù)、odd奇數(shù)、公式n。其語法格式如下：父元素子元素標簽名:nth-child(n){屬性:屬性值;…}例如，下面的代碼將div標簽內第3個標簽是p標簽的元素設為紅色；divp:nth-child(3){color:red;}當n為公式時，2n表示偶數(shù)（even），2n+1表示奇數(shù)（odd），5n表示5的倍數(shù)，n+5表示從第五個子元素（包含）開始至最后一個子元素，-n+5表示前五個子元素（包含第五個子元素）。三、偽元素偽元素用于創(chuàng)建一些不在文檔（DOM）樹中的元素，并為其添加樣式。比如說，可以通過::before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。1．::before該偽元素可在每個指定元素之前插入內容。其一般語法格式如下：元素::before{content:"…";…}例如，下面的代碼將p元素前面插入文字“注意：”。p::before{content:"注意：";color:red;}需要說明的是，在某個標簽前面插入內容的同時還可以設置插入內容的樣式。2．::after在每個指定元素之后插入內容。其一般語法格式如下：元素:after{content:"…";…}例如，下面的代碼將在div標簽內每個p元素后面插入文字“-注意”：divp::after{content:"-注意";}需要說明的是，在某個標簽后面插入內容的同時還可以設置插入內容的樣式。3．::first-letter將特殊樣式添加到文本的首字母。其一般語法格式如下：元素::first-letter{屬性:屬性值;…;}例如，下面的代碼將在div標簽內每個p元素首字符設置成紅色，且放大1.5倍。p::first-letter{color:red;}4．::first-line將特殊的樣式添加到文本的首行。其一般語法格式如下：元素::first-line{屬性:屬性值;…;}例如，下面的代碼將p元素首行設成紅色。p::first-line{color:red;}偽元素其實相當于偽造了一個元素，例如before，first-letter達到的效果就是偽造了一個元素，然后添加了其相應的效果；而偽類沒有偽造元素，例如first-child只是給子元素添加樣式。CSS3為了區(qū)分兩者，規(guī)定了偽類用一個冒號（:）來表示，而偽元素則用兩個冒號（::）來表示。任務四學習CSS嵌套前端開發(fā)人員，為了調高開發(fā)效率，一般都使用過CSS預處理器以及預處理器中的嵌套特性。而如今所有的主流瀏覽器都支持原生CSS嵌套。如Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。例如下面的代碼：div{border:1pxsolid#000;&h3{color:red;&span{color:blue;}}}等價于：div{border:1pxsolid#000;}divh3{color:red};divh3span{color:blue};CSS嵌套是一個重要的功能，它將增強編寫CSS的能力。目前使用嵌套是可行的，但需