Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第4章 CSS3基礎(chǔ)_第1頁
Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第4章 CSS3基礎(chǔ)_第2頁
Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第4章 CSS3基礎(chǔ)_第3頁
Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第4章 CSS3基礎(chǔ)_第4頁
Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第4章 CSS3基礎(chǔ)_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

高等學(xué)校規(guī)劃教材Web前端開發(fā)實例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第4章CSS3基礎(chǔ)目錄4.1CSS3概述4.2在網(wǎng)頁中引用CSS的方法4.3CSS的主要特性4.4CSS的基本語法4.5CSS的選擇器4.6CSS屬性值的寫法和單位4.7文件結(jié)構(gòu)與元素類型4.8案例—制作鮮品園行業(yè)資訊頁面4.1CSS3概述4.1.1CSS3的編寫規(guī)范4.1.2CSS3的工作環(huán)境4.1.1CSS3的編寫規(guī)范 1．目錄結(jié)構(gòu)命名規(guī)范 存放CSS樣式文件的目錄一般命名為style或css。 2．樣式文件的命名規(guī)范 為了網(wǎng)站性能上的考慮會整合不同的CSS文件到一個CSS文件，這個文件一般命名為style.css或css.css。 3．選擇符的命名規(guī)范 所有選擇符必須由英文字母或“_”（下畫線）組成，必須以字母開頭，不能為純數(shù)字。4.1.1CSS3的編寫規(guī)范 4．CSS代碼注釋 在CSS中添加注釋非常簡單，它以“/*”開始，以“*/”結(jié)尾。注釋可以是單行的，也可以是多行的。 （1）結(jié)構(gòu)性注釋 結(jié)構(gòu)性注釋僅僅是用風(fēng)格統(tǒng)一的大注釋塊從視覺上區(qū)分被分隔部分。 （2）提示性注釋 在編寫CSS文件時，可能需要某種技巧解決某個問題。4.1.2CSS3的工作環(huán)境 1．CSS3的顯示環(huán)境 瀏覽器是CSS3的顯示環(huán)境。目前，瀏覽器的種類多種多樣，主流瀏覽器都支持CSS3，但它們之間仍存在符合標(biāo)準(zhǔn)的差異，相同的CSS樣式代碼在不同的瀏覽器中可能顯示的效果有所不同。 2．CSS3的編輯環(huán)境 能夠編輯CSS3的軟件有很多，如Dreamweaver、HBuilderX、EditPlus和topStyle等。4.2在網(wǎng)頁中引用CSS的方法4.2.1行內(nèi)樣式4.2.2內(nèi)部樣式表4.2.3鏈入外部樣式表4.2.4導(dǎo)入外部樣式表4.2.5案例—制作鮮品園業(yè)務(wù)簡介頁面4.2.1行內(nèi)樣式 行內(nèi)樣式是各種引用CSS中最直接的一種。行內(nèi)樣式就是通過直接設(shè)置各個元素的style屬性，從而達(dá)到設(shè)置樣式的目的。這樣的設(shè)置方式，使得各個元素都有自己獨立的樣式，但是會使整個頁面變得臃腫。 這種樣式表只對所定義的標(biāo)簽起作用，并不對整個頁面起作用。行內(nèi)樣式的格式為：<標(biāo)簽style="屬性:屬性值;屬性:屬性值;…">4.2.1行內(nèi)樣式 【例4-1】使用行內(nèi)樣式將樣式表的功能加入到網(wǎng)頁中。4.2.2內(nèi)部樣式表

內(nèi)部樣式表是指把樣式定義<style>…</style>作為網(wǎng)頁代碼的一部分放到頭部定義<head>…</head>中，定義的樣式可以在整個HTML文件中調(diào)用。

1．內(nèi)部樣式表的格式

<styletype="text/css">選擇符1{屬性:屬性值;屬性:屬性值;…}/*注釋內(nèi)容*/…選擇符n{屬性:屬性值;屬性:屬性值;…}/*注釋內(nèi)容*/</style>4.2.2內(nèi)部樣式表

2．組合選擇符的格式

除了在<style>…</style>內(nèi)分別定義各種選擇符的樣式，如果多個選擇符具有相同的樣式，那么還可以采用組合選擇符，以減少重復(fù)定義的麻煩，其格式為：<styletype="text/css">選擇符1,選擇符2,…,選擇符n{屬性:屬性值;屬性:屬性值;…}選擇符a,選擇符b,…,選擇符m{屬性:屬性值;屬性:屬性值;…}</style>4.2.2內(nèi)部樣式表

【例4-2】使用內(nèi)部樣式表將樣式表的功能加入到網(wǎng)頁中。4.2.3鏈入外部樣式表 外部樣式表通過在某個HTML頁面中添加鏈接的方式生效。 1．使用<link>標(biāo)簽鏈接樣式表文件 <link>標(biāo)簽放到頁面的<head>…</head>標(biāo)簽內(nèi)。其格式為：<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>4.2.3鏈入外部樣式表 2．樣式表文件的格式 樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式為：選擇符1{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/選擇符2{屬性:屬性值;屬性:屬性值…}…選擇符n{屬性:屬性值;屬性:屬性值…}4.2.3鏈入外部樣式表 【例4-3】使用鏈入外部樣式表將樣式表的功能加入到網(wǎng)頁中，鏈入外部樣式表文件至少需要兩個文件：一個是HTML文件；另一個是CSS文件。4.2.4導(dǎo)入外部樣式表 導(dǎo)入外部樣式表是指在內(nèi)部樣式表的<style>標(biāo)簽里導(dǎo)入一個外部樣式表，當(dāng)瀏覽器讀取HTML文件時，復(fù)制一份樣式表到這個HTML文件中。其格式為：<styletype="text/css"><!--@importurl("外部樣式表的文件名1.css");@importurl("外部樣式表的文件名2.css");其他樣式表的聲明--></style>4.2.4導(dǎo)入外部樣式表 【例4-4】使用導(dǎo)入外部樣式表將樣式表的功能加入到網(wǎng)頁中，導(dǎo)入外部樣式表文件至少需要兩個文件：一個是HTML文件；另一個是CSS文件。4.2.5案例—制作鮮品園業(yè)務(wù)簡介頁面 【例4-5】使用鏈入外部樣式表的方法制作鮮品園業(yè)務(wù)簡介頁面。4.3CSS的主要特性4.3.1繼承4.3.2層疊4.3.3優(yōu)先級4.3.1繼承 繼承指的是特定的CSS屬性可以從父元素向下傳遞給子元素。這種特性允許樣式不僅應(yīng)用于某個特定的元素，同時也應(yīng)用于其后代，而后代所定義的新樣式，不會影響父代樣式。【例4-6】CSS繼承示例。4.3.2層疊 層疊是指CSS能夠?qū)ν粋€元素應(yīng)用多個樣式表的能力。樣式生效的優(yōu)先級從高到低的順序為：內(nèi)聯(lián)樣式→內(nèi)部樣式→外部樣式→瀏覽器默認(rèn)設(shè)置?！纠?-7】樣式表層疊示例。4.3.3優(yōu)先級 定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一個元素上，這時就會出現(xiàn)優(yōu)先級的問題。 1．特殊性 在編寫CSS代碼時，會出現(xiàn)多個樣式規(guī)則作用于同一個元素的情況，特殊性描述了不同規(guī)則的相對權(quán)重，當(dāng)多個規(guī)則應(yīng)用到同一個元素時權(quán)重越大的樣式會被優(yōu)先采用。4.3.3優(yōu)先級 2．重要性 不同的選擇符定義相同的元素時，要考慮不同選擇符之間的優(yōu)先級（id選擇符、類選擇符和HTML標(biāo)簽選擇符），id選擇符的優(yōu)先級最高，其次是類選擇符，HTML標(biāo)簽選擇符最低。如果想超越這三者之間的關(guān)系，可以用!important來提升樣式表的優(yōu)先級：p{color:#f00!important}.blue{color:#00f}#id1{color:#ff0}4.4CSS的基本語法4.4.1基本語法4.4.2注意事項4.4.1基本語法 CSS的基本語法由兩部分組成，其格式為：selector{property1:value1;property2:value2;…} selector稱為選擇器，選擇器決定了樣式定義需要改變的HTML元素。 property:value稱為樣式聲明，每一條樣式聲明由property（屬性）和value（屬性的值）組成，并用冒號隔開，以分號結(jié)束，由一條或多條樣式組成，包含在一對花括號“{}”內(nèi)。用于告訴瀏覽器如何渲染頁面中與選擇符相匹配的對象4.4.2注意事項 1．屬性名和屬性值要正確 property（屬性）是由官方CSS規(guī)范約定的，而不是自定義的。屬性是希望設(shè)置的樣式屬性。每個屬性有一個值value（屬性值），屬性和值用冒號分開，屬性值跟隨屬性的類別而呈現(xiàn)不同的形式，一般包括數(shù)值、單位及關(guān)鍵字。 2．需要加引號 如果值為若干單詞，單詞之間有空格，則要給值加引號。4.4.2注意事項 3．多重聲明 如果要定義不止一個聲明，則需要用分號將每個聲明分開。 4．代碼的可讀性 一般來說，為了方便閱讀，應(yīng)該在每行只描述一個屬性，并且在屬性末尾都加上分號。 5．空格 大多數(shù)樣式表包含多條規(guī)則，而大多數(shù)規(guī)則包含多個聲明。4.4.2注意事項 6．大小寫 CSS對大小寫不敏感，但在編寫樣式時，推薦屬性名和屬性值都用小寫。但是，也有例外，如果涉及與HTML文件一起工作，那么class和id名稱對大小寫是敏感的。因此，W3C推薦HTML文件中的代碼用小寫字母來命名。 7．選擇器的分組 對于具有相同樣式的選擇器，可以將這些選擇器分成一組，用逗號將每個選擇器隔開。4.5CSS的選擇器4.5.1元素選擇器4.5.2通配符選擇器4.5.3派生選擇器4.5.4兄弟選擇器4.5.5id選擇器4.5.6類選擇器4.5.7偽類選擇器4.5.8偽元素選擇器4.5.1元素選擇器 元素選擇器也稱標(biāo)簽選擇器。HTML頁面是由多個不同的標(biāo)簽元素組成的，如h1、p、img等。CSS的元素選擇器用于聲明這些元素的樣式。元素選擇器是最簡單的，選擇器是某個HTML元素。元素選擇器的格式為：E{property1:value1;property2:value2;…}4.5.2通配符選擇器 通配符選擇器也稱全局選擇器，其作用是定義網(wǎng)頁中所有標(biāo)記元素都使用同一種樣式。格式為：*{property1:value1;property2:value2;…}【例4-8】通配符選擇器示例。4.5.3派生選擇器 派生選擇器是指依據(jù)元素在其位置的上下文關(guān)系定義樣式。派生選擇器可以分成3種：后代選擇器、子元素選擇器、相鄰兄弟選擇器。 1．后代選擇器 后代選擇器（DescendantSelector）又稱包含選擇器，后代選擇器可以選擇某元素后代的元素，兩個元素之間的層次間隔可以是無限的。其格式為：父元素子元素{property1:value1;property2:value2;…}4.5.3派生選擇器 【例4-9】后代選擇器示例。4.5.3派生選擇器 2．子元素選擇器 子元素選擇器（ChildSelectors）只能選擇作為某元素子元素的元素。它與后代選擇器最大的不同就是元素間隔不同，后代選擇器將該元素作為父元素，它所有的后代元素都是符合條件的，而子元素選擇器只有相對于父元素來說的第一級子元素符合條件。其格式為：父元素>子元素{property1:value1;property2:value2;…}4.5.3派生選擇器 3．相鄰兄弟選擇器 相鄰兄弟選擇器（AdjacentSiblingSelector）可選擇緊接在另一個元素后的元素，并且二者有相同的父元素。與后代選擇器和子元素選擇器不同的是，相鄰兄弟選擇器針對的元素是同級元素，且兩個元素是相鄰的，擁有相同的父元素。其格式為：兄弟1+兄弟2{property1:value1;property2:value2;…}4.5.3派生選擇器 【例4-10】相鄰兄弟選擇器示例。4.5.4兄弟選擇器 兄弟選擇器使用了波浪號（~），即兄弟結(jié)合符（SiblingCombinator）。兄弟元素選擇器用來指定位于同一個父元素中的某個元素之后的其他所有某個種類的兄弟元素所使用的樣式。當(dāng)兩個標(biāo)簽不相鄰時，要想修改后一個標(biāo)簽的樣式，需要使用兄弟選擇器。其格式為：元素1~元素2{property1:value1;property2:value2;…}4.5.4兄弟選擇器 【例4-11】兄弟選擇器示例。4.5.5id選擇器 id選擇器可以為標(biāo)有特定id的單一HTML元素指定單獨的樣式。定義id選擇器時要在id名稱前加上一個“#”號。其格式為：E#idValue{property1:value1;property2:value2;…}【例4-12】id選擇器示例。4.5.6類選擇器 類選擇器可以為指定類的HTML元素指定樣式。其格式為：E.classValue{property1:value1;property2:value2;…}【例4-13】class選擇器示例。4.5.7偽類選擇器 偽類是指同一個標(biāo)簽，根據(jù)其不同狀態(tài)，有不同的樣式。偽類選擇器和類選擇器不同，不能像類選擇器一樣隨意用別的名字。偽類是指那些處在特殊狀態(tài)的元素。偽類名可以單獨使用，泛指所有元素，也可以和元素名稱連起來使用，特指某類元素。偽類以冒號（:）開頭，元素選擇符和冒號之間不能有空格，偽類名中間也不能有空格。偽類選擇器的語法格式為：selector:pseudo-class{property1:value1;property2:value2;…}4.5.7偽類選擇器 【例4-14】偽類應(yīng)用示例。當(dāng)鼠標(biāo)指針懸停在超鏈接時背景色變?yōu)槠渌伾?，并且添加了邊框線，待鼠標(biāo)指針離開超鏈接時又恢復(fù)到默認(rèn)狀態(tài)，這種效果就可以通過偽類實現(xiàn)。4.5.7偽類選擇器 【例4-15】:first-child偽類示例。使用:first-child偽類選擇元素的第一個子元素。4.5.8偽元素選擇器 偽元素不是真正的頁面元素，在HTML中沒有對應(yīng)的元素。偽類的效果可以通過添加一個實際的類來達(dá)到，而偽元素的效果則需要通過添加一個實際的元素才能達(dá)到，這也是為什么一個稱為偽類，另一個稱為偽元素的原因。 CSS3為了區(qū)分偽類和偽元素，規(guī)定偽類用一個冒號（:）來表示，偽元素用兩個冒號（::）來表示。偽元素由雙冒號和偽元素名稱組成。偽元素的語法格式為：selector::pseudo-element{property1:value1;property2:value2;…}4.5.8偽元素選擇器 【例4-16】偽元素選擇器示例。本例文件4-16.html在瀏覽器中的顯示效果如圖4-18（a）所示；當(dāng)用鼠標(biāo)選中內(nèi)容時，被選中內(nèi)容的背景改變顏色，如圖4-18（b）所示。4.6CSS屬性值的寫法和單位4.6.1長度、百分比單位4.6.2色彩單位4.6.1長度、百分比單位 使用CSS進(jìn)行排版時，常常會在屬性值后面加上長度單位或百分比單位。 1．長度單位 長度單位有相對長度單位和絕對長度單位兩種類型。 相對長度單位是指，以該屬性前一個屬性的單位值為基礎(chǔ)來完成目前的設(shè)置。 絕對長度單位將不會隨著顯示設(shè)備的不同而改變。4.6.1長度、百分比單位 2．百分比單位 百分比單位也是一種常用的相對類型。百分比值總是相對于另一個值來說的，該值可以是長度單位或其他單位。每一個可以使用百分比值單位指定的屬性，也自定義了這個百分比值的參照值。 一個百分比值由可選的正號“+”或負(fù)號“-”，接著一個數(shù)字，后跟百分號“%”組成。如果百分比值是正的，則正號可以不寫。正負(fù)號、數(shù)字與百分號之間不能有空格。4.6.2色彩單位

CSS則提供了四種定義色彩的方式：顏色英文名稱、十六進(jìn)制數(shù)、rgb函數(shù)和rgba函數(shù)。

1．用顏色英文名稱方式表示色彩值

CSS中提供了與HTML一樣的用顏色英文名稱表示色彩的方式。

2．用十六進(jìn)制數(shù)方式表示色彩值

在計算機中，定義每種色彩的強度范圍為0～255。當(dāng)所有色彩的強度都為0時，將產(chǎn)生黑色；當(dāng)所有色彩的強度都為255時，將產(chǎn)生白色。4.6.2色彩單位

3．用rgb函數(shù)方式表示色彩值

在CSS中，可以用rgb函數(shù)設(shè)置所要的色彩。語法格式為：rgb(R,G,B)。

4．用rgba函數(shù)方式表示色彩值

rgba函數(shù)在rgb函數(shù)的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。語法格式為：rgba(R,G,B,A)。4.7文件結(jié)構(gòu)與元素類型4.7.1文件結(jié)構(gòu)的基本概念4.7.2元素類型4.7.1文件結(jié)構(gòu)的基本概念 為了更好地理解“CSS采用HTML文件結(jié)構(gòu)來決定其樣式的應(yīng)用”這句話，首先需要理解文件是怎樣

溫馨提示

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

最新文檔

評論

0/150

提交評論