HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第3章 CSS 3基礎(chǔ)入門_第1頁(yè)
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第3章 CSS 3基礎(chǔ)入門_第2頁(yè)
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第3章 CSS 3基礎(chǔ)入門_第3頁(yè)
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第3章 CSS 3基礎(chǔ)入門_第4頁(yè)
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版 課件 第3章 CSS 3基礎(chǔ)入門_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(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)介

第3章本章就從打基礎(chǔ)出發(fā)，向讀者詳細(xì)介紹CSS的基本概念，以及選擇器的使用方法。CSS3基礎(chǔ)入門3.1CSS3的基礎(chǔ)知識(shí)3.1.1CSS介紹1．CSS的發(fā)展歷史CSS有多種版本，CSS1是1996年W3C的一個(gè)正式規(guī)范。CSS2是在CSS1的基礎(chǔ)上增添了某些高級(jí)概念以及高級(jí)的選擇器。CSS3是CSS2技術(shù)的一個(gè)升級(jí)版本，它將以前的規(guī)范分解為多個(gè)小模塊進(jìn)行管理，這些模塊包括：盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效和多欄布局等。3.1CSS3的基礎(chǔ)知識(shí)2．為什么要使用CSS圖3-1CSS作用示意圖3．CSS的學(xué)習(xí)方法3.1CSS3的基礎(chǔ)知識(shí)3.1.2CSS的語(yǔ)法與注釋CSS由兩部分構(gòu)成：一部分是選擇器（selector），另一部分是一條或多條聲明。這里聲明由一個(gè)屬性（property）和一個(gè)屬性值（value）組成。語(yǔ)法格式如下：selector{property:value;}body{ background:green; font-size:12px;}選擇器屬性值（關(guān)鍵字）屬性1．CSS語(yǔ)法2．CSS注釋3.1CSS3的基礎(chǔ)知識(shí)3.1.3CSS的引入方式1．內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是將CSS樣式規(guī)則書(shū)寫在某個(gè)標(biāo)簽的“style”屬性上，該類型的樣式僅作用于當(dāng)前標(biāo)簽上，作用范圍雖小，但優(yōu)先級(jí)最高。圖3-3內(nèi)聯(lián)樣式預(yù)覽效果3.1CSS3的基礎(chǔ)知識(shí)2．內(nèi)部樣式內(nèi)部樣式將CSS樣式規(guī)則書(shū)寫在“<style>”標(biāo)簽里，而<style>標(biāo)簽通常又定義在<head>標(biāo)簽內(nèi)部（其他區(qū)域可以放置），所以這種連接方式?jīng)Q定了該樣式表將作用于本頁(yè)面，而不能控制其他頁(yè)面。圖3-4內(nèi)部樣式預(yù)覽效果3.1CSS3的基礎(chǔ)知識(shí)3．外部樣式外部樣式是將CSS代碼單獨(dú)寫到一個(gè)CSS文件內(nèi)，然后在網(wǎng)頁(yè)源代碼中使用<link>標(biāo)簽將樣式文件引入到頁(yè)面中，并書(shū)寫在<head>區(qū)域內(nèi)。圖3-8兩個(gè)文件已經(jīng)成功鏈接圖3-7將CSS文檔鏈接至頁(yè)面圖3-9外部樣式預(yù)覽效果3.2盒模型3.2.1盒模型的基本概念元素內(nèi)容區(qū)域外邊距（margin）內(nèi)邊距（padding）邊框（border）圖3-10CSS盒模型3.2盒模型1．內(nèi)邊距（padding）2．邊框（border）3．外邊距（margin）4．盒模型中內(nèi)邊距、邊框和外邊距的關(guān)系對(duì)于盒模型的相關(guān)屬性可以這樣理解：假如用戶購(gòu)買了一臺(tái)冰箱，那么冰箱對(duì)應(yīng)的就是網(wǎng)頁(yè)中的實(shí)際內(nèi)容，冰箱外面包裹的塑料泡沫對(duì)應(yīng)的就是內(nèi)邊距（padding），包裝冰箱的紙盒子對(duì)應(yīng)的就是邊框（border），如果多臺(tái)冰箱放在一起，冰箱與冰箱之間的距離對(duì)應(yīng)的就是外邊距（margin）。3.2盒模型5．CSS的簡(jiǎn)寫（1）padding與margin的簡(jiǎn)寫（2）border的簡(jiǎn)寫3.2盒模型3.2.2計(jì)算盒模型中的寬與高1．盒模型的寬度

盒模型的寬度=左外邊距（margin-left）+左邊框（border-left）+左內(nèi)邊距（padding-left）+內(nèi)容寬度（width）+右內(nèi)邊距（padding-right）+右邊框（border-right）+右外邊距（margin-right）3.2盒模型2．盒模型的高度盒模型的高度=上外邊距（margin-top）+上邊框（border-top）+上內(nèi)邊距（padding-top）+內(nèi)容高度（height）+下內(nèi)邊距（padding-bottom）+下邊框（border-bottom）+下外邊距（margin-bottom）3.2盒模型圖3-11通過(guò)瀏覽器的調(diào)試環(huán)境計(jì)算頁(yè)面元素的寬與高Div的寬度=20px+3px+10px+150px+10px+3px+20px=216pxDiv的高度=10px+3px+20px+150px+20px+3px+10px=216px3.3CSS3初級(jí)選擇器3.3.1通配符選擇器

在編寫代碼時(shí)，用“*”表示通配符選擇器，其作用是定義頁(yè)面所有元素的樣式。圖3-12通配符選擇器代碼執(zhí)行效果3.3CSS3初級(jí)選擇器3.3.2類型選擇器

類型選擇器是指以網(wǎng)頁(yè)中已有標(biāo)簽類型作為名稱的選擇器，如body、header和p等。圖3-13類型選擇器代碼執(zhí)行效果3.3CSS3初級(jí)選擇器3.3.3類選擇器類選擇器用于定義頁(yè)面中公共部分的樣式，通過(guò)直接引用元素中Class屬性的值而產(chǎn)生效果，這個(gè)應(yīng)用前面總是有一個(gè)句點(diǎn)“.”，這個(gè)句點(diǎn)用來(lái)標(biāo)識(shí)一個(gè)類選擇器.圖3-14添加類規(guī)則圖3-15類選擇器預(yù)覽效果3.3CSS3初級(jí)選擇器3.3.4ID選擇器圖3-16ID選擇器預(yù)覽效果ID選擇器顧名思義是通過(guò)ID屬性來(lái)調(diào)用的樣式，它與類選擇符極其相似，類選擇符是以“.”開(kāi)頭，而ID選擇器是以“#”開(kāi)頭。3.3CSS3初級(jí)選擇器3.3.5后代選擇器

后代選擇器又稱包含選擇器，使用頻率非常高。這種方式的選擇器將選取其下所有匹配的子元素，且忽視層級(jí)關(guān)系。圖3-17包含選擇器預(yù)覽效果3.3CSS3初級(jí)選擇器3.3.6群組選擇符

在HMTL文檔中，如果需要對(duì)一組不同的標(biāo)簽進(jìn)行相同樣式的指派，群組選擇符就派上了用場(chǎng)。圖3-18群組選擇器預(yù)覽效果3.4CSS3高級(jí)選擇器3.4.1子元素選擇器和相鄰兄弟選擇器1．子元素選擇器2．相鄰兄弟選擇器圖3-19子元素選擇器和相鄰兄弟選擇器預(yù)覽效果3.4CSS3高級(jí)選擇器3.4.2屬性選擇器E[attr]：選擇所有包含attr屬性的元素(無(wú)論值如何)。E[attr=val]：選擇所包含attr屬性，且attr值為val的元素。E[attr^=val]：選擇所有包含attr屬性，且attr值以val開(kāi)頭的元素。E[attr$=val]：選擇所有包含attr屬性，且attr值以val結(jié)束的元素。E[attr*=val]：選擇所有包含attr屬性，且attr值中包含val的元素。圖3-20屬性選擇器預(yù)覽效果3.4CSS3高級(jí)選擇器3.4.3關(guān)于優(yōu)先級(jí)瀏覽器解析時(shí)應(yīng)用樣式的順序如下，誰(shuí)最后應(yīng)用，誰(shuí)的優(yōu)先級(jí)最高。 1）先應(yīng)用瀏覽器自身的默認(rèn)樣式； 2）再應(yīng)用從父級(jí)元素繼承過(guò)來(lái)的樣式； 3）標(biāo)簽樣式（類型

溫馨提示

  • 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)論