HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)-第三章-CSS入門

1、第1頁第3章 CSS入門本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述CSS在Web設(shè)計領(lǐng)域是一個突破，它為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式，包括版式、顏色和大小等。CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理，也就是說，頁面中顯示的內(nèi)容放在結(jié)構(gòu)里，而修飾、美化放在樣式里，做到結(jié)構(gòu)(內(nèi)容)與樣式分開，這樣，當(dāng)頁面使用不同的樣式時，呈現(xiàn)出的效果是不一樣的。W3C(萬維網(wǎng)聯(lián)盟)推薦使用CSS來完成表現(xiàn)。第3頁本章的學(xué)習(xí)目標(biāo)理解CSS的定義、優(yōu)點(diǎn)。掌握CSS的定義與使用方法。掌握CSS樣式規(guī)則。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器選擇頁面元素。掌握CSS長

2、度單位、百分比單位和色彩單位的使用掌握CSS的層疊性和繼承性。理解CSS優(yōu)先級，能夠區(qū)分復(fù)合選擇器權(quán)重的大小第4頁主要內(nèi)容3. 1 CSS定義與使用3. 2 CSS 選擇器3. 3 CSS屬性單位3. 4 CSS高級特性3. 5 實(shí)訓(xùn)3. 6 本章小結(jié) 第5頁3.1 CSS定義與使用本節(jié)主要內(nèi)容：CSS概述CSS定義和引用3.1.1 CSS概述CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設(shè)置不同的樣式。同時CSS非常常靈活，既可以嵌入在HTML文檔中，也可以是一個單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為后綴名。如今大多數(shù)

3、網(wǎng)頁都是遵循Web標(biāo)準(zhǔn)開發(fā)的，即用HTML編寫網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而相關(guān)版面布局、文本或圖片的顯示樣式都使用CSS控制。HTML與CSS的關(guān)系就像人的骨骼與衣服，通過更改CSS樣式，可以輕松控制網(wǎng)頁的表現(xiàn)樣式。第6頁第7頁3.1.2 CSS定義和引用1.內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式就是在元素標(biāo)簽內(nèi)使用style屬性，style屬性值可以包含任何CSS樣式聲明。內(nèi)聯(lián)樣式的格式為:需要說明的是，內(nèi)聯(lián)樣式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，所以要慎用這種方法，當(dāng)樣式僅需要在一個元素上應(yīng)用一次時可以使用內(nèi)聯(lián)樣式。參考示例：3-1-1.html第8頁3.1.2 CSS定義和引用2. 內(nèi)部樣式表內(nèi)部樣式表是寫在H

4、TML的里面的，只對所在的網(wǎng)頁有效。（1）內(nèi)部樣式表的格式為：選擇符1屬性：屬性值；屬性：屬性值 /*注釋內(nèi)容*/選擇符2屬性：屬性值；屬性：屬性值選擇符n屬性：屬性值；屬性：屬性值第9頁3.1.2 CSS定義和引用（2）組合選擇符的格式除了在內(nèi)分別定義各種選擇符的樣式外，如果多個選擇符具有相同的樣式，可以采用組合選擇符，以減少重復(fù)定義的麻煩，其格式為：選擇符1，選擇符2，選擇符n屬性：屬性值；屬性：屬性值參考示例：3-1-2.html第10頁3.1.2 CSS定義和引用3.外部樣式表多個頁面需要應(yīng)用相同樣式時，應(yīng)該使用外部樣式表。外部樣式表管理整個Web頁的外觀。Web開發(fā)時，首先對整個外觀

5、定義一個CSS文件（擴(kuò)展名為css），當(dāng)頁面需要使用樣式時，通過標(biāo)簽鏈接外部樣式表文件。使用外部樣式表可以實(shí)現(xiàn)改變一個文件就能改變整個站點(diǎn)外觀的目的。第11頁3.1.2 CSS定義和引用(1)用標(biāo)簽鏈接樣式表文件標(biāo)簽必須放到頁面的 標(biāo)簽對內(nèi)。其格式為:第12頁3.1.2 CSS定義和引用(2)樣式表文件的格式樣式表文件可以用任何文本編輯器(如記事本)打開并編輯，一般樣式表文件的擴(kuò)展名為.css。樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式為：選擇符1屬性：屬性值；屬性：屬性值 /*注釋內(nèi)容*/選擇符2屬性：屬性值；屬性：屬性值選擇符n屬性：屬性值；屬性：屬性值參考示例：

6、3-1-3.html第13頁3.2 CSS 選擇器本節(jié)主要內(nèi)容：案例分析CSS樣式規(guī)則CSS基礎(chǔ)選擇器案例制作第14頁3.2.1 案例分析【案例展示】使用鏈入外部樣式表的方法制作企業(yè)簡介頁面?！局R要點(diǎn)】常用的CSS選擇符、網(wǎng)頁中引用CSS。【學(xué)習(xí)目標(biāo)】掌握CSS的定義與使用方法參考代碼：3-2.html第15頁3.2.2 CSS樣式規(guī)則CSS為樣式化網(wǎng)頁內(nèi)容提供了一條捷徑，即樣式規(guī)則，每一條規(guī)則都是單獨(dú)的語句。樣式表的每個規(guī)則都有兩個主要部分：選擇符(selector)和聲明( declaration)。CSS控制網(wǎng)頁內(nèi)容顯示格式的方式是通過許多定義的樣式屬性(如字號、段落控制等)實(shí)現(xiàn)的，并

7、將多個樣式屬性定義為一組可供調(diào)用的選擇符(selector)。用戶只需要通過選擇符對不同的HIML標(biāo)簽進(jìn)行控制，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。聲明由一個或多個屬性值對組成。第16頁3.2.2 CSS樣式規(guī)則樣式規(guī)則的語法為：selector屬性：屬性值；屬性：屬性值語法說明:selector表示希望進(jìn)行格式化的元素；聲明部分包括在選擇符后的大括號中；用“屬性：屬性值”描述要應(yīng)用的格式化操作。第17頁3.2.3 CSS基礎(chǔ)選擇器1標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。其基本語法格式為：標(biāo)記名屬性1:屬性值1;屬性2:

8、屬性值2;屬性3:屬性值3;該語法中，所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器，如body、hl、p、 strong等。用標(biāo)記選擇器定義的樣式對頁面中該類型的所有標(biāo)記都生效。標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)記統(tǒng)一樣式，同時這也是它的缺點(diǎn)，不能設(shè)計差異化樣式。第18頁3.2.3 CSS基礎(chǔ)選擇器2類選擇器類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式為：.類名屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；該語法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義clas屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相同的樣式。參

9、考示例：3-2-1.html第19頁3.2.3 CSS基礎(chǔ)選擇器3id選擇器id選擇器使用“”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式為：#id名屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；該語法中，id名即為HTML元素的id屬性值。大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素。參考示例：3-2-2.html第20頁3.2.3 CSS基礎(chǔ)選擇器4通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式為：*屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；例如下面的代碼，使用通

10、配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。*margin:0; /*定義外邊距*/padding:0; /*定義內(nèi)邊距*/第21頁3.2.3 CSS基礎(chǔ)選擇器5標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個選擇器構(gòu)成，其中第一個為標(biāo)記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h：h3.special或pone。參考示例：3-2-3.html第22頁3.2.3 CSS基礎(chǔ)選擇器6后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。參考

11、示例：3-2-4.html第23頁3.2.3 CSS基礎(chǔ)選擇器7并集選擇擇器并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標(biāo)記選擇器、類選擇器及id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。參考示例：3-2-5.html3.2.4 案例制作制作完成演示案例:制作企業(yè)簡介。參考代碼 3-2.html第24頁3.3 CSS屬性單位第25頁本節(jié)主要內(nèi)容：長度單位色彩單位3.3.1 長度、百分比單位1長度單位長度單位有相對長度單位和絕對長度單位兩種類型。相對長度單位是指以該屬性前一個屬性的單位

12、值為基礎(chǔ)來完成目前的設(shè)置。絕對長度單位將不會隨著顯示設(shè)備的不同而改變。換句話說，屬性值使用絕對長度單位時，不論在哪種設(shè)備上，顯示效果都是一樣的，如屏幕上的lcm與打印機(jī)上的1cm是一樣長的。由于相對長度單位確定的是一個相對于另一個長度屬性的長度，因而它能更好地適應(yīng)不同的媒體，所以它是首選的。第26頁3.3.1 長度、百分比單位2百分比單位百分比單位也是一種常用的相對長度類型，通常的參考依據(jù)為元素的font-size屬性。百分比值總是相對于另一個值來說的，該值可以是長度單位或其他單位。每一個可以使用百分比值單位指定的屬性，同時也自定義了這個百分比值的參照值。在大多數(shù)情況下，這個參照值是該元素本身

13、的字體尺寸。并非所有屬性都支持百分比單位。一個百分比值由可選的正號“+”或負(fù)號“-”，接著一個數(shù)字，后跟百分號“%”組成。如果百分比值是正的，正號可以不寫。正負(fù)號、數(shù)字與百分號之間不能有空格。第27頁3.3.2 色彩單位1用十六進(jìn)制數(shù)方式表示色彩值在計算機(jī)中，定義每種色彩的強(qiáng)度范圍為0255。當(dāng)所有色彩的強(qiáng)度都為0時，將產(chǎn)生黑色；當(dāng)所有色彩的強(qiáng)度都為255時，將產(chǎn)生白色。在HTML中，使用十六進(jìn)制數(shù)指定色彩時，前面是一個“#”號，再加上6個十六進(jìn)制數(shù)字表示，表示方法為：# RRGGBB。其中，前兩個數(shù)字代表紅光強(qiáng)度(Red)，中間兩個數(shù)字代表綠光強(qiáng)度( Green)，后后兩個數(shù)字代表藍(lán)光強(qiáng)度(

14、Blue)。紅色、綠色、藍(lán)色、黑色、白色的十六進(jìn)制設(shè)置值分別為:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第28頁3.3.2 色彩單位2用色彩名稱方式表示色彩值CSS中也提供了與HTML一樣的用色彩的英文名稱表示色彩的方式。例如下面的示例代碼：pcolor:red第29頁3.3.2 色彩單位3用rgb函數(shù)方式表示色彩值在CSS中，可以用rgb函數(shù)設(shè)置所要的色彩。語法格式為： rgb(R,G,B) 其中，R為紅色值，G為綠色值，B為藍(lán)色值。這3個參數(shù)可取正整數(shù)值或百分比值，正整數(shù)值的取值范圍為0255，百分比值的取值范圍為色彩強(qiáng)度的百分比0.0%100.0

15、%。例如下面的示例代碼：pcolor:rgb(128,50,220)pcolor:rgb(15%,100,60%)第30頁3.4 CSS高級特性第31頁本節(jié)主要內(nèi)容：案例分析CSS的層疊和繼承性CSS的優(yōu)先級案例制作3.4.1 案例分析【案例展示】使用各種類型的元素制作客戶案例的相關(guān)產(chǎn)品局部頁面?！局R要點(diǎn)】CSS的層疊性、繼承性及優(yōu)先級?！緦W(xué)習(xí)目標(biāo)】靈活使用CSS高級特性的方法設(shè)置元素的樣式第32頁3.4.2 CSS的層疊和繼承性1. 層疊性層疊( cascade)是指CSS能夠?qū)ν粋€元素應(yīng)用多個樣式表的能力。一般原則是,最接近目標(biāo)的樣式定義優(yōu)先級最高。高優(yōu)先級樣式將繼承低優(yōu)先級樣式的未重

16、疊定義,但覆蓋重疊的定義。根據(jù)規(guī)定,樣式表的優(yōu)先級別從高到低為:內(nèi)聯(lián)樣式表、內(nèi)部樣式表、鏈接樣式表和默認(rèn)瀏覽器樣式表。參考示例：3-4-1.html第33頁3.4.2 CSS的層疊和繼承性2. 繼承性CSS的主要特征就是繼承（Inheritance），它依賴于祖先-子孫關(guān)系，這種特性允許樣式不僅應(yīng)用于某個特定的元素，同時也應(yīng)用于其后代，而后代所定義的新樣式，卻不會影響父代樣式。根據(jù)CSS規(guī)則，子元素繼承父元素屬性。如: bodyfont-family:微軟雅黑; 通過繼承，所有body的子元素都應(yīng)該顯示為為“微軟雅黑”字體，子元素的子元素也一樣。參考示例：3-4-2.html第34頁3.4.3 CSS的優(yōu)先級定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題，當(dāng)多個規(guī)則應(yīng)用到同一個元素時權(quán)重越大的樣式會被優(yōu)先采用。參考示例