（中職）Web前端設(shè)計基礎(chǔ) 項目六-3電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計基礎(chǔ) 項目六-3電子課件CSS 3的選擇器項目六授課教師：姓名WEB前端設(shè)計基礎(chǔ)Contents1.項目描述2.知識準(zhǔn)備3.項目實施4.項目拓展5.項目小結(jié)6.技能訓(xùn)練三 項目實施通過此項目的學(xué)習(xí)，學(xué)習(xí)到CSS 3的基本語法結(jié)構(gòu)和選擇器的使用，結(jié)合這些知識制作一個包含標(biāo)簽選擇器、class選擇器和ID選擇器的實例。選擇器實例選擇器實例*margin:0px;padding:0px;color:white;font-family: 微軟雅黑;font-size: 14px;divwidth: 100px;height: 50px;background:

2、 red;.boxwidth: 100px;height: 50px;background: green;#boxwidth: 100px;height: 50px;background: blue;.wenbenwidth: 400px;height: 150px;position:absolute;left:100px;top:0px;background: white;pcolor:#000;line-height: 50px;設(shè)置了ID名稱為box的元素標(biāo)簽寬度為100像素、高度為50像素、背景顏色為藍(lán)色。設(shè)置了class名稱為box的元素標(biāo)簽寬度為100像素、高度為50像素、背景顏色

3、為綠色。設(shè)置了所有div標(biāo)簽的寬度為100像素、高度為50像素、背景顏色為紅色。三 項目實施啟動Sublime程序，新建并保存文件名稱為6-11.html。第一步第二步Head標(biāo)簽內(nèi)的代碼輸入如下：內(nèi)嵌式Css樣式部分。使用了全局選擇器，設(shè)置了所有元素的內(nèi)邊距和外邊距全都為0、文本顏色為白色、字體為微軟雅黑、字體大小為14像素。設(shè)置了class名稱為wenben的元素標(biāo)簽寬度為400像素、高度為150像素、背景顏色為白色；定位方式為絕對定位，開始位置為距左100像素距上0像素。三 項目實施第三步body標(biāo)簽內(nèi)的代碼輸入如下：標(biāo)簽選擇器Class選擇器ID選擇器divwidth: 100px;h

4、eight: 50px;background: red;.boxwidth: 100px;height: 50px;background: green;#boxwidth: 100px;height: 50px;background: blue;三 項目實施再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四 項目拓展通過項目實施的學(xué)習(xí)，掌握了基本選擇器的使用，結(jié)合前面學(xué)習(xí)過的表單知識，本項目拓展制作一個元素狀態(tài)偽類選擇器的實例。四 項目拓展啟動Sublime程序，新建并保存文件名稱為6-12.html。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如

5、下： divborder:1px solid green;width:400px;margin-top: 10PX;padding:5px; inputtype=text1:hover /*鼠標(biāo)經(jīng)過（懸停）*/ background-color: pink; inputtype=text1:focus /*鼠標(biāo)獲得焦點（點擊）并進(jìn)行文字輸入時*/ background-color: #ccc; inputtype=text1:active /*鼠標(biāo)按下（按下還未松開）*/ background-color: yellow; inputtype=text2:enabled /*選中時文本框為可用

6、*/ background-color: pink; inputtype=text2:disabled /*選中時文本框為不可用*/ background-color: #ccc; inputtype=checkbox:checked /*選中多選框時*/ outline: 2px solid red; 設(shè)置div標(biāo)簽的樣式為綠色的1像素實線邊框、寬度為400像素、上邊距為10像素、內(nèi)邊距為5像素。設(shè)置鼠標(biāo)經(jīng)過type屬性為text1的input標(biāo)簽時，文本框的背景顏色是粉色。設(shè)置鼠標(biāo)獲得type屬性為text1的input標(biāo)簽的焦點時，文本框的背景顏色是灰色。設(shè)置鼠標(biāo)按下但還未松開type屬

7、性為text1的input標(biāo)簽時，文本框的背景顏色是黃色。設(shè)置鼠標(biāo)選中type屬性為text2的input標(biāo)簽為可用時，文本框的背景顏色是粉色。設(shè)置鼠標(biāo)選中type屬性為text2的input標(biāo)簽為不可用時，文本框的背景顏色是灰色。設(shè)置鼠標(biāo)選中type屬性為checkbox的input標(biāo)簽時，多選框的輪廓設(shè)置為紅色的2像素實線。四 項目拓展第三步Head標(biāo)簽內(nèi)的Javascript腳本代碼輸入如下： function radio_onchange() var radio = document.getElementById(radio1);/獲得可用單選按鈕的id var text = docu

8、ment.getElementById(text2);/獲得文本框id if(radio.checked) text.disabled = ;/選中時文本框為可用 else text.disabled = disabled;/否則文本框為不可用 獲得id值為radio1的元素賦予變量radio。獲得id值為text2的元素賦予變量text。判斷radio是否被選中，如果選中則設(shè)置文本框為可用（text.disabled = ），否則設(shè)置文本框為不可用（text.disabled = disabled）。四 項目拓展第四步 鼠標(biāo)經(jīng)過、鼠標(biāo)點擊（但未松開）、鼠標(biāo)獲得焦點（點擊松開）狀態(tài)時元素的樣式

9、 姓名： 地址： 點擊可用按鈕時，文本框背景色為pink；點擊不可用按鈕時，文本框背景色為灰色； 可用 不可用 E:checked是用來指定當(dāng)表單中的radio單選框、checkbox復(fù)選框處于選取狀態(tài)時的樣式 蘋果 香蕉 橙子 菠蘿 body標(biāo)簽內(nèi)的代碼輸入如下：定義radio按鈕的狀態(tài)發(fā)生變化（選中或者不選中）時，執(zhí)行上面的JavaScript代碼。四 項目拓展再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步五 項目小結(jié)本項目通過項目實施和項目拓展制作了CSS3的基礎(chǔ)選擇器和CSS3的組合選擇去兩個案例，學(xué)習(xí)了HTML5引入CSS的方法、CS

10、S3的基本語法和CSS3的基本選擇器、屬性選擇器、結(jié)構(gòu)偽類選擇器、UI元素狀態(tài)偽類選擇器等，掌握了行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式以及樣式的優(yōu)先級及各類選擇器的應(yīng)用方法。五 項目小結(jié)本項目主要知識點總結(jié)如表所示。選擇器知識點總結(jié)知識點說明CSS基本語法選擇器樣式屬性1:取值1;樣式屬性2:取值2;CSS引用方法行內(nèi)式：直接在HTML 5標(biāo)簽中使用style屬性 內(nèi)嵌式：與之間，并且用和標(biāo)簽進(jìn)行聲明。鏈接樣式：在 之間，用標(biāo)簽鏈接外部的css文件CSS優(yōu)先級行內(nèi)樣式內(nèi)嵌樣式鏈接樣式標(biāo)簽選擇器html5的標(biāo)簽類選擇器用class標(biāo)記的 .類名稱 ID選擇器用id標(biāo)記的 #id名稱全局選擇器所有元素 *屬性:值;偽類選擇器a標(biāo)簽的link、visited、active、hover狀態(tài) a:狀態(tài)名稱屬性:值;子元素選擇器某元素下的子元素 #father pcolor:green;相鄰選擇器某元素的兄弟元素 #box+pcolor:green;群組選擇器同時對幾個選擇器設(shè)置相同的CSS樣式 h3,div,#box,pcolor:red;六 技能訓(xùn)練通過測試練習(xí)環(huán)節(jié)，對本項目涉及的英文單詞進(jìn)行重復(fù)練習(xí)，既可以熟悉html標(biāo)簽的單詞組合，也可以提高代碼輸入的速度和正確率。在瀏覽器中打開素材中的Exercise6.html文件，單擊“開始測試