版權(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五版房地產(chǎn)抵押貸款合同3篇
- 二零二五版智慧城市物聯(lián)網(wǎng)技術(shù)應(yīng)用合同實(shí)施指南3篇
- 二零二五年度文化產(chǎn)業(yè)短期工勞務(wù)合作合同2篇
- 二零二五年金融投資風(fēng)險(xiǎn)兜底保障合同示范3篇
- 二零二五年度知識(shí)產(chǎn)權(quán)股權(quán)轉(zhuǎn)讓定金合同3篇
- 二零二五版智能交通系統(tǒng)-城區(qū)隔離護(hù)欄采購合同3篇
- 二零二五版?zhèn)€人戶外探險(xiǎn)活動(dòng)貸款合同擔(dān)保與安全協(xié)議3篇
- 二零二五版環(huán)保產(chǎn)業(yè)合理化建議書合同2篇
- 二零二五年度新型農(nóng)業(yè)耕地承包與流轉(zhuǎn)管理合同3篇
- 二零二五版GRc構(gòu)件生產(chǎn)、安裝與智能化管理合同3篇
- 二零二五年度無人駕駛車輛測(cè)試合同免責(zé)協(xié)議書
- 2023中華護(hù)理學(xué)會(huì)團(tuán)體標(biāo)準(zhǔn)-注射相關(guān)感染預(yù)防與控制
- PPVT幼兒語言能力測(cè)試題附答案
- JB∕T 14089-2020 袋式除塵器 濾袋運(yùn)行維護(hù)技術(shù)規(guī)范
- 陜西省寶雞市各縣區(qū)鄉(xiāng)鎮(zhèn)行政村村莊村名居民村民委員會(huì)明細(xì)及行政區(qū)劃代碼
- 中華人民共和國(guó)職業(yè)分類大典電子版
- 畢業(yè)設(shè)計(jì)小型液壓機(jī)主機(jī)結(jié)構(gòu)設(shè)計(jì)與計(jì)算
- 19XR開機(jī)運(yùn)行維護(hù)說明書
- 全國(guó)非煤礦山分布
- 臨床研究技術(shù)路線圖模板
- GB∕T 2099.1-2021 家用和類似用途插頭插座 第1部分:通用要求
評(píng)論
0/150
提交評(píng)論