HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第三章-CSS入門課件_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第三章-CSS入門課件_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第三章-CSS入門課件_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第三章-CSS入門課件_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第三章-CSS入門課件_第5頁(yè)
已閱讀5頁(yè)，還剩71頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第1頁(yè)第3章CSS入門本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第3章CSS入門本章概述第2頁(yè)本章概述CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破，它為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式，包括版式、顏色和大小等。CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理，也就是說，頁(yè)面中顯示的內(nèi)容放在結(jié)構(gòu)里，而修飾、美化放在樣式里，做到結(jié)構(gòu)(內(nèi)容)與樣式分開，這樣，當(dāng)頁(yè)面使用不同的樣式時(shí)，呈現(xiàn)出的效果是不一樣的。W3C(萬維網(wǎng)聯(lián)盟)推薦使用CSS來完成表現(xiàn)。第2頁(yè)本章概述CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破，它為HTML第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的定義、優(yōu)點(diǎn)。掌握CSS的定義與使用方法。掌握CSS樣式規(guī)則。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器選擇頁(yè)面元素。掌握CSS長(zhǎng)度單位、百分比單位和色彩單位的使用掌握CSS的層疊性和繼承性。理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的定義、優(yōu)點(diǎn)。第4頁(yè)主要內(nèi)容3.1CSS定義與使用3.2CSS選擇器3.3CSS屬性單位3.4CSS高級(jí)特性3.5實(shí)訓(xùn)3.6本章小結(jié)第4頁(yè)主要內(nèi)容3.1CSS定義與使用第5頁(yè)3.1CSS定義與使用本節(jié)主要內(nèi)容：CSS概述CSS定義和引用第5頁(yè)3.1CSS定義與使用本節(jié)主要內(nèi)容：3.1.1CSS概述CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。同時(shí)CSS非常常靈活，既可以嵌入在HTML文檔中，也可以是一個(gè)單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為后綴名。如今大多數(shù)網(wǎng)頁(yè)都是遵循Web標(biāo)準(zhǔn)開發(fā)的，即用HTML編寫網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，而相關(guān)版面布局、文本或圖片的顯示樣式都使用CSS控制。HTML與CSS的關(guān)系就像人的骨骼與衣服，通過更改CSS樣式，可以輕松控制網(wǎng)頁(yè)的表現(xiàn)樣式。第6頁(yè)3.1.1CSS概述CSS以HTML為基礎(chǔ)，提供了豐富的第7頁(yè)3.1.2CSS定義和引用1.內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式就是在元素標(biāo)簽內(nèi)使用style屬性，style屬性值可以包含任何CSS樣式聲明。內(nèi)聯(lián)樣式的格式為:<標(biāo)簽stle="屬性:屬性值;屬性:屬性值…">需要說明的是，內(nèi)聯(lián)樣式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，所以要慎用這種方法，當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)可以使用內(nèi)聯(lián)樣式。參考示例：3-1-1.html第7頁(yè)3.1.2CSS定義和引用1.內(nèi)聯(lián)樣式第8頁(yè)3.1.2CSS定義和引用2.內(nèi)部樣式表內(nèi)部樣式表是寫在HTML的<head></head>里面的，只對(duì)所在的網(wǎng)頁(yè)有效。（1）內(nèi)部樣式表的格式為：<styletype="text/ess">選擇符1{屬性：屬性值；屬性：屬性值…}/*注釋內(nèi)容*/選擇符2{屬性：屬性值；屬性：屬性值…}選擇符n{屬性：屬性值；屬性：屬性值…}</style>第8頁(yè)3.1.2CSS定義和引用2.內(nèi)部樣式表第9頁(yè)3.1.2CSS定義和引用（2）組合選擇符的格式除了在<syle>…<syle>內(nèi)分別定義各種選擇符的樣式外，如果多個(gè)選擇符具有相同的樣式，可以采用組合選擇符，以減少重復(fù)定義的麻煩，其格式為：<styletype="text/ess">選擇符1，選擇符2，…，選擇符n{屬性：屬性值；屬性：屬性值…}</style>參考示例：3-1-2.html第9頁(yè)3.1.2CSS定義和引用（2）組合選擇符的格式第10頁(yè)3.1.2CSS定義和引用3.外部樣式表多個(gè)頁(yè)面需要應(yīng)用相同樣式時(shí)，應(yīng)該使用外部樣式表。外部樣式表管理整個(gè)Web頁(yè)的外觀。Web開發(fā)時(shí)，首先對(duì)整個(gè)外觀定義一個(gè)CSS文件（擴(kuò)展名為·css），當(dāng)頁(yè)面需要使用樣式時(shí)，通過<link>標(biāo)簽鏈接外部樣式表文件。使用外部樣式表可以實(shí)現(xiàn)改變一個(gè)文件就能改變整個(gè)站點(diǎn)外觀的目的。第10頁(yè)3.1.2CSS定義和引用3.外部樣式表第11頁(yè)3.1.2CSS定義和引用(1)用<link>標(biāo)簽鏈接樣式表文件<link>標(biāo)簽必須放到頁(yè)面的<head>…</head>標(biāo)簽對(duì)內(nèi)。其格式為:<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>第11頁(yè)3.1.2CSS定義和引用(1)用<link>標(biāo)第12頁(yè)3.1.2CSS定義和引用(2)樣式表文件的格式樣式表文件可以用任何文本編輯器(如記事本)打開并編輯，一般樣式表文件的擴(kuò)展名為.css。樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式為：選擇符1{屬性：屬性值；屬性：屬性值…}/*注釋內(nèi)容*/選擇符2{屬性：屬性值；屬性：屬性值…}…選擇符n{屬性：屬性值；屬性：屬性值…}參考示例：3-1-3.html第12頁(yè)3.1.2CSS定義和引用(2)樣式表文件的格式第13頁(yè)3.2CSS選擇器本節(jié)主要內(nèi)容：案例分析CSS樣式規(guī)則CSS基礎(chǔ)選擇器案例制作第13頁(yè)3.2CSS選擇器本節(jié)主要內(nèi)容：第14頁(yè)3.2.1案例分析【案例展示】使用鏈入外部樣式表的方法制作企業(yè)簡(jiǎn)介頁(yè)面。【知識(shí)要點(diǎn)】常用的CSS選擇符、網(wǎng)頁(yè)中引用CSS?！緦W(xué)習(xí)目標(biāo)】掌握CSS的定義與使用方法參考代碼：3-2.html第14頁(yè)3.2.1案例分析【案例展示】使用鏈入外部樣式表第15頁(yè)3.2.2CSS樣式規(guī)則CSS為樣式化網(wǎng)頁(yè)內(nèi)容提供了一條捷徑，即樣式規(guī)則，每一條規(guī)則都是單獨(dú)的語(yǔ)句。樣式表的每個(gè)規(guī)則都有兩個(gè)主要部分：選擇符(selector)和聲明(declaration)。CSS控制網(wǎng)頁(yè)內(nèi)容顯示格式的方式是通過許多定義的樣式屬性(如字號(hào)、段落控制等)實(shí)現(xiàn)的，并將多個(gè)樣式屬性定義為一組可供調(diào)用的選擇符(selector)。用戶只需要通過選擇符對(duì)不同的HIML標(biāo)簽進(jìn)行控制，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。聲明由一個(gè)或多個(gè)屬性值對(duì)組成。第15頁(yè)3.2.2CSS樣式規(guī)則CSS為樣式化網(wǎng)頁(yè)內(nèi)容提第16頁(yè)3.2.2CSS樣式規(guī)則樣式規(guī)則的語(yǔ)法為：selector{屬性：屬性值[[；屬性：屬性值]…]}語(yǔ)法說明:selector表示希望進(jìn)行格式化的元素；聲明部分包括在選擇符后的大括號(hào)中；用“屬性：屬性值”描述要應(yīng)用的格式化操作。第16頁(yè)3.2.2CSS樣式規(guī)則樣式規(guī)則的語(yǔ)法為：第17頁(yè)3.2.3CSS基礎(chǔ)選擇器1．標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁(yè)面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式為：標(biāo)記名｛屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;｝該語(yǔ)法中，所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器，如body、hl、p、strong等。用標(biāo)記選擇器定義的樣式對(duì)頁(yè)面中該類型的所有標(biāo)記都生效。標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁(yè)面中同類型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是它的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。第17頁(yè)3.2.3CSS基礎(chǔ)選擇器1．標(biāo)記選擇器第18頁(yè)3.2.3CSS基礎(chǔ)選擇器2．類選擇器類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語(yǔ)法格式為：.類名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝該語(yǔ)法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義clas屬性。類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。參考示例：3-2-1.html第18頁(yè)3.2.3CSS基礎(chǔ)選擇器2．類選擇器第19頁(yè)3.2.3CSS基礎(chǔ)選擇器3．id選擇器id選擇器使用“＃”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式為：#id名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝該語(yǔ)法中，id名即為HTML元素的id屬性值。大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。參考示例：3-2-2.html第19頁(yè)3.2.3CSS基礎(chǔ)選擇器3．id選擇器第20頁(yè)3.2.3CSS基礎(chǔ)選擇器4．通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。其基本語(yǔ)法格式為：*｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。*{margin:0;/*定義外邊距*/padding:0;/*定義內(nèi)邊距*/}第20頁(yè)3.2.3CSS基礎(chǔ)選擇器4．通配符選擇器第21頁(yè)3.2.3CSS基礎(chǔ)選擇器5．標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h：h3.special或p＃one。參考示例：3-2-3.html第21頁(yè)3.2.3CSS基礎(chǔ)選擇器5．標(biāo)簽指定式選擇器第22頁(yè)3.2.3CSS基礎(chǔ)選擇器6．后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。參考示例：3-2-4.html第22頁(yè)3.2.3CSS基礎(chǔ)選擇器6．后代選擇器第23頁(yè)3.2.3CSS基礎(chǔ)選擇器7．并集選擇擇器并集選擇器是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)記選擇器、類選擇器及id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。參考示例：3-2-5.html第23頁(yè)3.2.3CSS基礎(chǔ)選擇器7．并集選擇擇器3.2.4案例制作制作完成演示案例:制作企業(yè)簡(jiǎn)介。參考代碼3-2.html第24頁(yè)3.2.4案例制作制作完成演示案例:制作企業(yè)簡(jiǎn)介。第243.3CSS屬性單位第25頁(yè)本節(jié)主要內(nèi)容：長(zhǎng)度單位色彩單位3.3CSS屬性單位第25頁(yè)本節(jié)主要內(nèi)容：3.3.1長(zhǎng)度、百分比單位1．長(zhǎng)度單位長(zhǎng)度單位有相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位兩種類型。相對(duì)長(zhǎng)度單位是指以該屬性前一個(gè)屬性的單位值為基礎(chǔ)來完成目前的設(shè)置。絕對(duì)長(zhǎng)度單位將不會(huì)隨著顯示設(shè)備的不同而改變。換句話說，屬性值使用絕對(duì)長(zhǎng)度單位時(shí)，不論在哪種設(shè)備上，顯示效果都是一樣的，如屏幕上的lcm與打印機(jī)上的1cm是一樣長(zhǎng)的。由于相對(duì)長(zhǎng)度單位確定的是一個(gè)相對(duì)于另一個(gè)長(zhǎng)度屬性的長(zhǎng)度，因而它能更好地適應(yīng)不同的媒體，所以它是首選的。第26頁(yè)3.3.1長(zhǎng)度、百分比單位1．長(zhǎng)度單位第26頁(yè)3.3.1長(zhǎng)度、百分比單位2．百分比單位百分比單位也是一種常用的相對(duì)長(zhǎng)度類型，通常的參考依據(jù)為元素的font-size屬性。百分比值總是相對(duì)于另一個(gè)值來說的，該值可以是長(zhǎng)度單位或其他單位。每一個(gè)可以使用百分比值單位指定的屬性，同時(shí)也自定義了這個(gè)百分比值的參照值。在大多數(shù)情況下，這個(gè)參照值是該元素本身的字體尺寸。并非所有屬性都支持百分比單位。一個(gè)百分比值由可選的正號(hào)“+”或負(fù)號(hào)“-”，接著一個(gè)數(shù)字，后跟百分號(hào)“%”組成。如果百分比值是正的，正號(hào)可以不寫。正負(fù)號(hào)、數(shù)字與百分號(hào)之間不能有空格。第27頁(yè)3.3.1長(zhǎng)度、百分比單位2．百分比單位第27頁(yè)3.3.2色彩單位1．用十六進(jìn)制數(shù)方式表示色彩值在計(jì)算機(jī)中，定義每種色彩的強(qiáng)度范圍為0~255。當(dāng)所有色彩的強(qiáng)度都為0時(shí)，將產(chǎn)生黑色；當(dāng)所有色彩的強(qiáng)度都為255時(shí)，將產(chǎn)生白色。在HTML中，使用十六進(jìn)制數(shù)指定色彩時(shí)，前面是一個(gè)“#”號(hào)，再加上6個(gè)十六進(jìn)制數(shù)字表示，表示方法為：#RRGGBB。其中，前兩個(gè)數(shù)字代表紅光強(qiáng)度(Red)，中間兩個(gè)數(shù)字代表綠光強(qiáng)度(Green)，后后兩個(gè)數(shù)字代表藍(lán)光強(qiáng)度(Blue)。紅色、綠色、藍(lán)色、黑色、白色的十六進(jìn)制設(shè)置值分別為:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第28頁(yè)3.3.2色彩單位1．用十六進(jìn)制數(shù)方式表示色彩值第28頁(yè)3.3.2色彩單位2．用色彩名稱方式表示色彩值CSS中也提供了與HTML一樣的用色彩的英文名稱表示色彩的方式。例如下面的示例代碼：p{color:red}第29頁(yè)3.3.2色彩單位2．用色彩名稱方式表示色彩值第29頁(yè)3.3.2色彩單位3．用rgb函數(shù)方式表示色彩值在CSS中，可以用rgb函數(shù)設(shè)置所要的色彩。語(yǔ)法格式為：rgb(R,G,B)

其中，R為紅色值，G為綠色值，B為藍(lán)色值。這3個(gè)參數(shù)可取正整數(shù)值或百分比值，正整數(shù)值的取值范圍為0~255，百分比值的取值范圍為色彩強(qiáng)度的百分比0.0%~100.0%。例如下面的示例代碼：p{color:rgb(128,50,220)}p{color:rgb(15%,100,60%)}第30頁(yè)3.3.2色彩單位3．用rgb函數(shù)方式表示色彩值第30頁(yè)3.4CSS高級(jí)特性第31頁(yè)本節(jié)主要內(nèi)容：案例分析CSS的層疊和繼承性CSS的優(yōu)先級(jí)案例制作3.4CSS高級(jí)特性第31頁(yè)本節(jié)主要內(nèi)容：3.4.1案例分析【案例展示】使用各種類型的元素制作客戶案例的相關(guān)產(chǎn)品局部頁(yè)面。【知識(shí)要點(diǎn)】CSS的層疊性、繼承性及優(yōu)先級(jí)?！緦W(xué)習(xí)目標(biāo)】靈活使用CSS高級(jí)特性的方法設(shè)置元素的樣式第32頁(yè)3.4.1案例分析【案例展示】使用各種類型的元素制作客戶3.4.2CSS的層疊和繼承性1.層疊性層疊(cascade)是指CSS能夠?qū)ν粋€(gè)元素應(yīng)用多個(gè)樣式表的能力。一般原則是,最接近目標(biāo)的樣式定義優(yōu)先級(jí)最高。高優(yōu)先級(jí)樣式將繼承低優(yōu)先級(jí)樣式的未重疊定義,但覆蓋重疊的定義。根據(jù)規(guī)定,樣式表的優(yōu)先級(jí)別從高到低為:內(nèi)聯(lián)樣式表、內(nèi)部樣式表、鏈接樣式表和默認(rèn)瀏覽器樣式表。。參考示例：3-4-1.html第33頁(yè)3.4.2CSS的層疊和繼承性1.層疊性第33頁(yè)3.4.2CSS的層疊和繼承性2.繼承性CSS的主要特征就是繼承（Inheritance），它依賴于祖先-子孫關(guān)系，這種特性允許樣式不僅應(yīng)用于某個(gè)特定的元素，同時(shí)也應(yīng)用于其后代，而后代所定義的新樣式，卻不會(huì)影響父代樣式。根據(jù)CSS規(guī)則，子元素繼承父元素屬性。如:body{font-family:"微軟雅黑";}

通過繼承，所有body的子元素都應(yīng)該顯示為為“微軟雅黑”字體，子元素的子元素也一樣。參考示例：3-4-2.html第34頁(yè)3.4.2CSS的層疊和繼承性2.繼承性第34頁(yè)3.4.3CSS的優(yōu)先級(jí)定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題，當(dāng)多個(gè)規(guī)則應(yīng)用到同一個(gè)元素時(shí)權(quán)重越大的樣式會(huì)被優(yōu)先采用。參考示例：3-4-3.html第35頁(yè)3.4.3CSS的優(yōu)先級(jí)定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或3.4.4案例制作制作完成演示案例:客戶案例相關(guān)產(chǎn)品局部頁(yè)面。參考代碼3-4.html第36頁(yè)3.4.4案例制作制作完成演示案例:客戶案例相關(guān)產(chǎn)品局部3.5實(shí)訓(xùn)制作完成演示案例:LED射燈詳細(xì)信息頁(yè)面。參考代碼3-5.html第37頁(yè)3.5實(shí)訓(xùn)制作完成演示案例:LED射燈詳細(xì)信息頁(yè)面。第3第38頁(yè)3.6本章小結(jié)本章全面講述了CSS所實(shí)現(xiàn)的結(jié)構(gòu)與表現(xiàn)的分離及CSS樣式的優(yōu)先級(jí)規(guī)則。首先介紹了CSS定義與使用、CSS樣式規(guī)則、引入方式及CSS基礎(chǔ)選擇器。接下來，講解了CSS屬性單位、CSS的層疊性、繼承性及優(yōu)先級(jí)。最后通過CSS修飾文本，制作出了一個(gè)常見的LED射燈詳細(xì)信息頁(yè)面。第38頁(yè)3.6本章小結(jié)本章全面講述了CSS所實(shí)現(xiàn)的結(jié)構(gòu)第39頁(yè)第3章CSS入門本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第3章CSS入門本章概述第40頁(yè)本章概述CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破，它為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式，包括版式、顏色和大小等。CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理，也就是說，頁(yè)面中顯示的內(nèi)容放在結(jié)構(gòu)里，而修飾、美化放在樣式里，做到結(jié)構(gòu)(內(nèi)容)與樣式分開，這樣，當(dāng)頁(yè)面使用不同的樣式時(shí)，呈現(xiàn)出的效果是不一樣的。W3C(萬維網(wǎng)聯(lián)盟)推薦使用CSS來完成表現(xiàn)。第2頁(yè)本章概述CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破，它為HTML第41頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的定義、優(yōu)點(diǎn)。掌握CSS的定義與使用方法。掌握CSS樣式規(guī)則。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器選擇頁(yè)面元素。掌握CSS長(zhǎng)度單位、百分比單位和色彩單位的使用掌握CSS的層疊性和繼承性。理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的定義、優(yōu)點(diǎn)。第42頁(yè)主要內(nèi)容3.1CSS定義與使用3.2CSS選擇器3.3CSS屬性單位3.4CSS高級(jí)特性3.5實(shí)訓(xùn)3.6本章小結(jié)第4頁(yè)主要內(nèi)容3.1CSS定義與使用第43頁(yè)3.1CSS定義與使用本節(jié)主要內(nèi)容：CSS概述CSS定義和引用第5頁(yè)3.1CSS定義與使用本節(jié)主要內(nèi)容：3.1.1CSS概述CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。同時(shí)CSS非常常靈活，既可以嵌入在HTML文檔中，也可以是一個(gè)單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為后綴名。如今大多數(shù)網(wǎng)頁(yè)都是遵循Web標(biāo)準(zhǔn)開發(fā)的，即用HTML編寫網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，而相關(guān)版面布局、文本或圖片的顯示樣式都使用CSS控制。HTML與CSS的關(guān)系就像人的骨骼與衣服，通過更改CSS樣式，可以輕松控制網(wǎng)頁(yè)的表現(xiàn)樣式。第44頁(yè)3.1.1CSS概述CSS以HTML為基礎(chǔ)，提供了豐富的第45頁(yè)3.1.2CSS定義和引用1.內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式就是在元素標(biāo)簽內(nèi)使用style屬性，style屬性值可以包含任何CSS樣式聲明。內(nèi)聯(lián)樣式的格式為:<標(biāo)簽stle="屬性:屬性值;屬性:屬性值…">需要說明的是，內(nèi)聯(lián)樣式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，所以要慎用這種方法，當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)可以使用內(nèi)聯(lián)樣式。參考示例：3-1-1.html第7頁(yè)3.1.2CSS定義和引用1.內(nèi)聯(lián)樣式第46頁(yè)3.1.2CSS定義和引用2.內(nèi)部樣式表內(nèi)部樣式表是寫在HTML的<head></head>里面的，只對(duì)所在的網(wǎng)頁(yè)有效。（1）內(nèi)部樣式表的格式為：<styletype="text/ess">選擇符1{屬性：屬性值；屬性：屬性值…}/*注釋內(nèi)容*/選擇符2{屬性：屬性值；屬性：屬性值…}選擇符n{屬性：屬性值；屬性：屬性值…}</style>第8頁(yè)3.1.2CSS定義和引用2.內(nèi)部樣式表第47頁(yè)3.1.2CSS定義和引用（2）組合選擇符的格式除了在<syle>…<syle>內(nèi)分別定義各種選擇符的樣式外，如果多個(gè)選擇符具有相同的樣式，可以采用組合選擇符，以減少重復(fù)定義的麻煩，其格式為：<styletype="text/ess">選擇符1，選擇符2，…，選擇符n{屬性：屬性值；屬性：屬性值…}</style>參考示例：3-1-2.html第9頁(yè)3.1.2CSS定義和引用（2）組合選擇符的格式第48頁(yè)3.1.2CSS定義和引用3.外部樣式表多個(gè)頁(yè)面需要應(yīng)用相同樣式時(shí)，應(yīng)該使用外部樣式表。外部樣式表管理整個(gè)Web頁(yè)的外觀。Web開發(fā)時(shí)，首先對(duì)整個(gè)外觀定義一個(gè)CSS文件（擴(kuò)展名為·css），當(dāng)頁(yè)面需要使用樣式時(shí)，通過<link>標(biāo)簽鏈接外部樣式表文件。使用外部樣式表可以實(shí)現(xiàn)改變一個(gè)文件就能改變整個(gè)站點(diǎn)外觀的目的。第10頁(yè)3.1.2CSS定義和引用3.外部樣式表第49頁(yè)3.1.2CSS定義和引用(1)用<link>標(biāo)簽鏈接樣式表文件<link>標(biāo)簽必須放到頁(yè)面的<head>…</head>標(biāo)簽對(duì)內(nèi)。其格式為:<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>第11頁(yè)3.1.2CSS定義和引用(1)用<link>標(biāo)第50頁(yè)3.1.2CSS定義和引用(2)樣式表文件的格式樣式表文件可以用任何文本編輯器(如記事本)打開并編輯，一般樣式表文件的擴(kuò)展名為.css。樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式為：選擇符1{屬性：屬性值；屬性：屬性值…}/*注釋內(nèi)容*/選擇符2{屬性：屬性值；屬性：屬性值…}…選擇符n{屬性：屬性值；屬性：屬性值…}參考示例：3-1-3.html第12頁(yè)3.1.2CSS定義和引用(2)樣式表文件的格式第51頁(yè)3.2CSS選擇器本節(jié)主要內(nèi)容：案例分析CSS樣式規(guī)則CSS基礎(chǔ)選擇器案例制作第13頁(yè)3.2CSS選擇器本節(jié)主要內(nèi)容：第52頁(yè)3.2.1案例分析【案例展示】使用鏈入外部樣式表的方法制作企業(yè)簡(jiǎn)介頁(yè)面?！局R(shí)要點(diǎn)】常用的CSS選擇符、網(wǎng)頁(yè)中引用CSS?！緦W(xué)習(xí)目標(biāo)】掌握CSS的定義與使用方法參考代碼：3-2.html第14頁(yè)3.2.1案例分析【案例展示】使用鏈入外部樣式表第53頁(yè)3.2.2CSS樣式規(guī)則CSS為樣式化網(wǎng)頁(yè)內(nèi)容提供了一條捷徑，即樣式規(guī)則，每一條規(guī)則都是單獨(dú)的語(yǔ)句。樣式表的每個(gè)規(guī)則都有兩個(gè)主要部分：選擇符(selector)和聲明(declaration)。CSS控制網(wǎng)頁(yè)內(nèi)容顯示格式的方式是通過許多定義的樣式屬性(如字號(hào)、段落控制等)實(shí)現(xiàn)的，并將多個(gè)樣式屬性定義為一組可供調(diào)用的選擇符(selector)。用戶只需要通過選擇符對(duì)不同的HIML標(biāo)簽進(jìn)行控制，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。聲明由一個(gè)或多個(gè)屬性值對(duì)組成。第15頁(yè)3.2.2CSS樣式規(guī)則CSS為樣式化網(wǎng)頁(yè)內(nèi)容提第54頁(yè)3.2.2CSS樣式規(guī)則樣式規(guī)則的語(yǔ)法為：selector{屬性：屬性值[[；屬性：屬性值]…]}語(yǔ)法說明:selector表示希望進(jìn)行格式化的元素；聲明部分包括在選擇符后的大括號(hào)中；用“屬性：屬性值”描述要應(yīng)用的格式化操作。第16頁(yè)3.2.2CSS樣式規(guī)則樣式規(guī)則的語(yǔ)法為：第55頁(yè)3.2.3CSS基礎(chǔ)選擇器1．標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁(yè)面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式為：標(biāo)記名｛屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;｝該語(yǔ)法中，所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器，如body、hl、p、strong等。用標(biāo)記選擇器定義的樣式對(duì)頁(yè)面中該類型的所有標(biāo)記都生效。標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁(yè)面中同類型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是它的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。第17頁(yè)3.2.3CSS基礎(chǔ)選擇器1．標(biāo)記選擇器第56頁(yè)3.2.3CSS基礎(chǔ)選擇器2．類選擇器類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語(yǔ)法格式為：.類名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝該語(yǔ)法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義clas屬性。類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。參考示例：3-2-1.html第18頁(yè)3.2.3CSS基礎(chǔ)選擇器2．類選擇器第57頁(yè)3.2.3CSS基礎(chǔ)選擇器3．id選擇器id選擇器使用“?！边M(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式為：#id名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝該語(yǔ)法中，id名即為HTML元素的id屬性值。大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。參考示例：3-2-2.html第19頁(yè)3.2.3CSS基礎(chǔ)選擇器3．id選擇器第58頁(yè)3.2.3CSS基礎(chǔ)選擇器4．通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。其基本語(yǔ)法格式為：*｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。*{margin:0;/*定義外邊距*/padding:0;/*定義內(nèi)邊距*/}第20頁(yè)3.2.3CSS基礎(chǔ)選擇器4．通配符選擇器第59頁(yè)3.2.3CSS基礎(chǔ)選擇器5．標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h：h3.special或p＃one。參考示例：3-2-3.html第21頁(yè)3.2.3CSS基礎(chǔ)選擇器5．標(biāo)簽指定式選擇器第60頁(yè)3.2.3CSS基礎(chǔ)選擇器6．后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。參考示例：3-2-4.html第22頁(yè)3.2.3CSS基礎(chǔ)選擇器6．后代選擇器第61頁(yè)3.2.3CSS基礎(chǔ)選擇器7．并集選擇擇器并集選擇器是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)記選擇器、類選擇器及id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。參考示例：3-2-5.html第23頁(yè)3.2.3CSS基礎(chǔ)選擇器7．并集選擇擇器3.2.4案例制作制作完成演示案例:制作企業(yè)簡(jiǎn)介。參考代碼3-2.html第62頁(yè)3.2.4案例制作制作完成演示案例:制作企業(yè)簡(jiǎn)介。第243.3CSS屬性單位第63頁(yè)本節(jié)主要內(nèi)容：長(zhǎng)度單位色彩單位3.3CSS屬性單位第25頁(yè)本節(jié)主要內(nèi)容：3.3.1長(zhǎng)度、百分比單位1．長(zhǎng)度單位長(zhǎng)度單位有相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位兩種類型。相對(duì)長(zhǎng)度單位是指以該屬性前一個(gè)屬性的單位值為基礎(chǔ)來完成目前的設(shè)置。絕對(duì)長(zhǎng)度單位將不會(huì)隨著顯示設(shè)備的不同而改變。換句話說，屬性值使用絕對(duì)長(zhǎng)度單位時(shí)，不論在哪種設(shè)備上，顯示效果都是一樣的，如屏幕上的lcm與打印機(jī)上的1cm是一樣長(zhǎng)的。由于相對(duì)長(zhǎng)度單位確定的是一個(gè)相對(duì)于另一個(gè)長(zhǎng)度屬性的長(zhǎng)度，因而它能更好地適應(yīng)不同的媒體，所以它是首選的。第64頁(yè)3.3.1長(zhǎng)度、百分比單位1．長(zhǎng)度單位第26頁(yè)3.3.1長(zhǎng)度、百分比單位2．百分比單位百分比單位也是一種常用的相對(duì)長(zhǎng)度類型，通常的參考依據(jù)為元素的font-size屬性。百分比值總是相對(duì)于另一個(gè)值來說的，該值可以是長(zhǎng)度單位或其他單位。每一個(gè)可以使用百分比值單位指定的屬性，同時(shí)也自定義了這個(gè)百分比值的參照值。在大多數(shù)情況下，這個(gè)參照值是該元素本身的字體尺寸。并非所有屬性都支持百分比單位。一個(gè)百分比值由可選的正號(hào)“+”或負(fù)號(hào)“-”，接著一個(gè)數(shù)字，后跟百分號(hào)“%”組成。如果百分比值是正的，正號(hào)可以不寫。正負(fù)號(hào)、數(shù)字與百分號(hào)之間不能有空格。第65頁(yè)3.3.1長(zhǎng)度、百分比單位2．百分比單位第27頁(yè)3.3.2色彩單位1．用十六進(jìn)制數(shù)方式表示色彩值在計(jì)算機(jī)中，定義每種色彩的強(qiáng)度范圍為0~255。當(dāng)所有色彩的強(qiáng)度都為0時(shí)，將產(chǎn)生黑色；當(dāng)所有色彩的強(qiáng)度都為255時(shí)，將產(chǎn)生白色。在HTML中，使用十六進(jìn)制數(shù)指定色彩時(shí)，前面是一個(gè)“#”號(hào)，再加上6個(gè)十六進(jìn)制數(shù)字表示，表示方法為：#RRGGBB。其中，前兩個(gè)數(shù)字代表紅光強(qiáng)度(Red)，中間兩個(gè)數(shù)字代表綠光強(qiáng)度(Green)，后后兩個(gè)數(shù)字代表藍(lán)光強(qiáng)度(Blue)。紅色、綠色、藍(lán)色、黑色、白色的十六進(jìn)制設(shè)置值分別為:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第66頁(yè)3.3.2色彩單位1．用十六進(jìn)制數(shù)方式表示色彩值第28頁(yè)3.3.2色彩單位2．用色彩名稱方式表示色彩值CSS中也提供了與HTML一樣的用色彩的英文名稱表示色彩的方式。例如下面的示例代碼：p{color:red}第67頁(yè)3.3.2色彩單位2．用色彩名稱方式表示色彩值第29頁(yè)3.3.2色彩單位3．用rgb函數(shù)方式表示色彩值在CSS中，可以用rgb函數(shù)設(shè)置所要的色彩。語(yǔ)法格式為：rgb(R,G,B

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論