2023學(xué)年完整公開課版CSS核心基礎(chǔ)_第1頁
2023學(xué)年完整公開課版CSS核心基礎(chǔ)_第2頁
2023學(xué)年完整公開課版CSS核心基礎(chǔ)_第3頁
2023學(xué)年完整公開課版CSS核心基礎(chǔ)_第4頁
2023學(xué)年完整公開課版CSS核心基礎(chǔ)_第5頁
已閱讀5頁,還剩18頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

CSS核心基礎(chǔ)【任務(wù)2-1】CSS核心基礎(chǔ)為什么需要CSS?需求分析【任務(wù)2-1】CSS核心基礎(chǔ)下面將從結(jié)構(gòu)與表現(xiàn)分離、CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器四個(gè)方面,對(duì)CSS核心基礎(chǔ)知識(shí)進(jìn)行講解。需求分析隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展,單調(diào)的HTML屬性樣式已經(jīng)無法滿足網(wǎng)頁設(shè)計(jì)的需求。開發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫。CSS的出現(xiàn)在不改變?cè)蠬TML結(jié)構(gòu)的情況下,增加了豐富的樣式效果,極大地滿足了開發(fā)者的需求。在深入學(xué)習(xí)CSS之前,我們首先要了解CSS的基礎(chǔ)知識(shí)。【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—結(jié)構(gòu)與表現(xiàn)分離什么是結(jié)構(gòu)與表現(xiàn)分離?【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—結(jié)構(gòu)與表現(xiàn)分離使用HTML標(biāo)簽屬性對(duì)網(wǎng)頁進(jìn)行修飾的方式存在很大的局限性,因?yàn)槲覀兯械臉邮蕉际菍懺跇?biāo)簽中,這樣既不利于代碼閱讀,也不利于代碼的維護(hù)。如果希望網(wǎng)頁代碼美觀易讀、維護(hù)方便,就需要使用CSS實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。結(jié)構(gòu)與表現(xiàn)相分離是指在網(wǎng)頁設(shè)計(jì)中,HTML標(biāo)簽只用于搭建網(wǎng)頁的基本結(jié)構(gòu),不使用標(biāo)簽屬性設(shè)置顯示樣式,所有的樣式交由CSS來設(shè)置?!救蝿?wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—結(jié)構(gòu)與表現(xiàn)分離示例:【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS樣式規(guī)則CSS樣式的書寫規(guī)則是什么?CSS樣式修飾的網(wǎng)頁大家隨處可見網(wǎng)上購物熱門游戲熱點(diǎn)新聞【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS樣式規(guī)則選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}在上面的樣式規(guī)則中,選擇器用于指定CSS樣式作用的HTML對(duì)象,花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。其中,屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn),用英文“:”連接,多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分?!救蝿?wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS樣式規(guī)則示例:【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS樣式規(guī)則1選擇器嚴(yán)格區(qū)分大小寫2多個(gè)單詞組成且中間包含空格,則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。3書寫CSS代碼時(shí),通常會(huì)加上CSS注釋。4CSS代碼中空格是不被解析的,花括號(hào)以及分號(hào)前后的空格可有可無。5屬性的值和單位之間是不允許出現(xiàn)空格的。注意事項(xiàng):【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—引入CSS樣式表引入CSS樣式表的方式有哪些?【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式行內(nèi)式也稱為內(nèi)聯(lián)樣式,是通過標(biāo)簽的style屬性來設(shè)置元素的樣式,其基本語法格式如下:行內(nèi)式<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)簽名>【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)簽中,并且用<style>標(biāo)簽定義,其基本語法格式如下:內(nèi)嵌式<head><styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—引入CSS樣式表鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中,通過<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中,其基本語法格式如下:鏈入式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—引入CSS樣式表導(dǎo)入式針對(duì)外部樣式表文件。對(duì)HTML頭部文檔應(yīng)用style標(biāo)簽,并在<style>標(biāo)簽內(nèi)的開頭處使用@import語句,即可導(dǎo)入外部樣式表文件。其基本語法格式如下:導(dǎo)入式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<styletype="text/css">@importurl(css文件路徑);或@import"css文件路徑"/*在此還可以存放其他CSS樣式*/</style>【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器什么是選擇器?【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML元素,首先需要找到該目標(biāo)元素。在CSS中,執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器?!救蝿?wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器標(biāo)記選擇器類選擇器id選擇器通配符選擇器類選擇器id選擇器通配符選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器,按標(biāo)記名稱分類,為頁面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。語法格式標(biāo)記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器標(biāo)記選擇器類選擇器id選擇器通配符選擇器id選擇器通配符選擇器類選擇器使用“.”(英文點(diǎn)號(hào))進(jìn)行標(biāo)識(shí),后面緊跟類名。語法格式.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)記選擇器【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器標(biāo)記選擇器類選擇器id選擇器通配符選擇器類選擇器通配符選擇器id選擇器使用“#”進(jìn)行標(biāo)識(shí),后面緊跟id名,其基本語法格式如下:語法格式#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)記選擇器【任務(wù)2-1】CSS核心基礎(chǔ)知識(shí)儲(chǔ)備—CSS基礎(chǔ)選擇器標(biāo)記選擇器類選擇器id選擇器通配符選擇器類選擇器id選擇器通配符選擇器用“*”號(hào)表示,它是所有選擇器中作用范圍最廣的,能匹配頁面中

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論