第五章 CSS層疊樣式表(上機(jī))_第1頁(yè)
第五章 CSS層疊樣式表(上機(jī))_第2頁(yè)
第五章 CSS層疊樣式表(上機(jī))_第3頁(yè)
第五章 CSS層疊樣式表(上機(jī))_第4頁(yè)
第五章 CSS層疊樣式表(上機(jī))_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第五章上機(jī)CSS層疊樣式表相關(guān)回顧1、2、3、上機(jī)目標(biāo)使用HTML標(biāo)簽選擇器使用類選擇器

使用偽類選擇器

使用ID選擇器和上下文選擇器理解并熟悉常用的CSS屬性

教員講解上機(jī)目標(biāo)訓(xùn)練技能點(diǎn)HTML標(biāo)簽選擇器類選擇器標(biāo)簽的class屬性類選擇器標(biāo)簽的id屬性理解四種錨偽類理解各種上下文理解并掌握常見(jiàn)的CSS屬性階段1訓(xùn)練技能點(diǎn)HTML標(biāo)簽選擇器font-size屬性text-align屬性font-family屬性color屬性text-indent屬性line-height屬性CSS中的注釋階段1頁(yè)面中一般會(huì)出現(xiàn)多個(gè)段落，我們需要統(tǒng)一這些段落的格式，而分別對(duì)每個(gè)段落提供格式信息非常繁瑣；另外六種標(biāo)題標(biāo)簽的默認(rèn)格式也不符合我們的期望。我們需要定制段落標(biāo)簽和幾種標(biāo)題標(biāo)簽的外觀樣式階段1使用HMTL標(biāo)簽選擇器可告知瀏覽器頁(yè)面中的所有段落應(yīng)如何顯示，直接以要重新定義格式的標(biāo)簽名作為選擇器的名稱。

階段1<head> <style>

h1{font-size:28px;text-align:center;font-family:"微軟雅黑"}

p{color:black;font-size:14px;text-indent:28px;line-height:20px;} </style></head>9階段1？共性問(wèn)題集中講解階段2技能要點(diǎn)類選擇器

標(biāo)簽的class屬性font-size屬性font-weight屬性border屬性color屬性background-color屬性階段2大部分時(shí)候，同一種標(biāo)簽的多個(gè)實(shí)例使用完全相同的樣式并不可行。如文本框，單選按鈕，復(fù)選扭，提交按鈕，重置按扭等盡管都是input標(biāo)簽，但我們可能希望它們具有不同的樣式。比如我們這樣設(shè)計(jì)：表單中所有用于輸入文字的表單元素[不管是文本框還是密碼框或者多行文本域]共享相同的一種樣式，而所有用于讓瀏覽者點(diǎn)擊執(zhí)行確認(rèn)動(dòng)作的按鈕[不管是提交按鈕還是重置按鈕或自定義命令按鈕]則共享另一種外觀。階段2應(yīng)考慮將頁(yè)面中的多個(gè)元素劃歸為同一個(gè)類，而另一批元素劃歸為另一個(gè)類。使用類選擇器可實(shí)現(xiàn)樣式的分類設(shè)置。階段2<head> <style> .title{font-size:14px;font-weight:bold;} .txt{background-color:#dddddd;border:1pxdashedgreen;} .btn{border:solid1pxgray;color:blue;} </style></head><spanclass="title">日志標(biāo)題</span><inputclass="txt"type="text"/><br/><spanclass="title">日志內(nèi)容</span><textareaclass="txt"cols="40"rows="5"></textarea><br/><inputclass="btn"type="submit"value="發(fā)表日志"/><inputclass="btn"type="reset"value="重寫日志"/>14階段2？共性問(wèn)題集中講解階段3創(chuàng)建外部樣式表文件，在其中編寫關(guān)于鏈接的樣式規(guī)則。要求：引用了這個(gè)外部樣式表的網(wǎng)頁(yè)文檔所包含的鏈接在普通狀態(tài)，已訪問(wèn)過(guò)狀態(tài)，鼠標(biāo)懸停狀態(tài)，激活狀態(tài)下分別有不同的樣式。外部樣式表文件與網(wǎng)頁(yè)文件一樣，本質(zhì)是文本文件，只是擴(kuò)展名為.css。在它里面通常聲明多個(gè)網(wǎng)頁(yè)都要使用的樣式規(guī)則。在要使用這些樣式規(guī)則的網(wǎng)頁(yè)的<head></head>標(biāo)簽內(nèi)，使用<link/>標(biāo)簽來(lái)引用外部樣式表。16階段3？共性問(wèn)題集中講解階段4頁(yè)面上的大部分段落的樣式為14px和黑色，但某幾個(gè)段落被包含在一個(gè)特定的DIV標(biāo)簽內(nèi)，對(duì)于被這個(gè)特定的DIV包含的這些段落，要將它們的樣式為12px的字號(hào)和灰色文字。可以先對(duì)<p></p>標(biāo)簽定義HTML標(biāo)簽選擇器，它會(huì)對(duì)整個(gè)頁(yè)面中的所有段落都有效。再為特定的<div></div>標(biāo)簽提供id屬性，然后用這個(gè)id的值和p這種標(biāo)簽的名稱組成上下文選擇器。階段5理解并熟悉常用的CSS屬性背景顏色 background-color背景圖片 background-image:url()首行縮進(jìn) text-indent字體或字體組 font-family字號(hào)大小 font-size水平對(duì)齊方式 text-align文字的裝飾線 text-decoration文字顏色 color邊框 border、border-width、border-style、border-color粗體 font-weight斜體 font-style寬度 width

溫馨提示

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

評(píng)論

0/150

提交評(píng)論