《HTML5+CSS3》課件-第三章 初識(shí)CSS3_第1頁(yè)
《HTML5+CSS3》課件-第三章 初識(shí)CSS3_第2頁(yè)
《HTML5+CSS3》課件-第三章 初識(shí)CSS3_第3頁(yè)
《HTML5+CSS3》課件-第三章 初識(shí)CSS3_第4頁(yè)
《HTML5+CSS3》課件-第三章 初識(shí)CSS3_第5頁(yè)
已閱讀5頁(yè)，還剩48頁(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)介

第三章初識(shí)CSS3CSS基礎(chǔ)選擇器引入CSS樣式表CSS復(fù)合選擇器HTML?學(xué)習(xí)目標(biāo)了解理解熟悉掌握了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。12掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)簽樣式。熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。3理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。4

目錄3.1結(jié)構(gòu)與表現(xiàn)分離3.2CSS3的優(yōu)勢(shì)3.3CSS核心基礎(chǔ)3.4設(shè)置文本樣式?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)3.5高級(jí)特性3.6階段案例——制作活動(dòng)通知頁(yè)面?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

知識(shí)架構(gòu)3.3CSS核心基礎(chǔ)3.3.13.3.23.3.3CSS樣式規(guī)則引入CSS樣式表CSS基礎(chǔ)選擇器3.4文本控制標(biāo)簽3.4.13.4.2CSS字體樣式屬性CSS文本外觀屬性

知識(shí)架構(gòu)3.5高級(jí)特性3.5.13.5.23.5.3CSS復(fù)合選擇器CSS層疊性和繼承性CSS優(yōu)先級(jí)

知識(shí)架構(gòu)本章將詳細(xì)講解CSS及其最新版本CSS3的相關(guān)知識(shí)。隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，單調(diào)的HTML屬性樣式已經(jīng)無(wú)法滿足網(wǎng)頁(yè)設(shè)計(jì)的需求。開發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫。CSS的出現(xiàn)在不改變?cè)蠬TML結(jié)構(gòu)的情況下，增加了豐富的樣式效果，極大地滿足了開發(fā)者的需求。章節(jié)概要3.1結(jié)構(gòu)與表現(xiàn)分離什么是結(jié)構(gòu)與表現(xiàn)分離？結(jié)構(gòu)與表現(xiàn)相分離是指在網(wǎng)頁(yè)設(shè)計(jì)中，HTML標(biāo)簽只用于搭建網(wǎng)頁(yè)的基本結(jié)構(gòu)，不使用標(biāo)簽屬性設(shè)置顯示樣式，所有的樣式交由CSS來(lái)設(shè)置。3.1結(jié)構(gòu)與表現(xiàn)分離3.1結(jié)構(gòu)與表現(xiàn)分離如今大多數(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)系就像人的身體與衣服，通過(guò)更改CSS樣式，可以輕松控制網(wǎng)頁(yè)的表現(xiàn)樣式。3.2CSS的優(yōu)勢(shì)CSS3是CSS規(guī)范的最新版本，在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能，以幫助開發(fā)人員解決一些實(shí)際面臨的問(wèn)題。使用CSS3不僅可以設(shè)計(jì)炫酷美觀的網(wǎng)頁(yè)，還能提高網(wǎng)頁(yè)性能。與傳統(tǒng)的CSS相比，CSS3最突出的優(yōu)勢(shì)主要體現(xiàn)在節(jié)約成本和提高性能兩方面，本節(jié)將做具體介紹。節(jié)約成本提高性能3.2CSS的優(yōu)勢(shì)CSS3的新功能幫我們摒棄了冗余的代碼結(jié)構(gòu)，遠(yuǎn)離很多Javascript腳本或者Flash代碼。網(wǎng)頁(yè)設(shè)計(jì)者不再需要花大把時(shí)間去寫腳本，極大的節(jié)約了開發(fā)成本。由于功能的加強(qiáng)，CSS3能夠用更少的圖片或腳本制作圖形化網(wǎng)站。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，減少標(biāo)簽的嵌套和圖片的使用數(shù)量，網(wǎng)頁(yè)頁(yè)面加載也會(huì)更快。3.3CSS核心基礎(chǔ)在學(xué)習(xí)CSS3之前，我們首先要掌握CSS的基礎(chǔ)知識(shí)，為學(xué)習(xí)CSS3夯實(shí)基礎(chǔ)。本節(jié)將從CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器三個(gè)方面，詳細(xì)講解CSS的基礎(chǔ)知識(shí)。3.3CSS核心基礎(chǔ)3.3.1CSS樣式規(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ū)分。3.3CSS核心基礎(chǔ)3.3.1CSS樣式規(guī)則選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.3CSS核心基礎(chǔ)3.3.2引入CSS樣式表引入CSS樣式表的方式有哪些？3.3CSS核心基礎(chǔ)行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過(guò)標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式，其基本語(yǔ)法格式如下:行內(nèi)式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)簽名>3.3CSS核心基礎(chǔ)內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)簽中，并且用<style>標(biāo)簽定義，其基本語(yǔ)法格式如下:內(nèi)嵌式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<head><styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>3.3CSS核心基礎(chǔ)鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語(yǔ)法格式如下:鏈入式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>3.3CSS核心基礎(chǔ)導(dǎo)入式針對(duì)外部樣式表文件。對(duì)HTML頭部文檔應(yīng)用style標(biāo)簽，并在<style>標(biāo)簽內(nèi)的開頭處使用@import語(yǔ)句，即可導(dǎo)入外部樣式表文件。其基本語(yǔ)法格式如下:導(dǎo)入式行內(nèi)式內(nèi)嵌式鏈入式導(dǎo)入式<styletype="text/css">@importurl(css文件路徑);或@import"css文件路徑"; /*在此還可以存放其他CSS樣式*/</style>3.3CSS核心基礎(chǔ)3.3.3CSS基礎(chǔ)選擇器什么是CSS基礎(chǔ)選擇器？3.3CSS核心基礎(chǔ)3.3.3CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器，具體如下：CSS基礎(chǔ)選擇器3.3CSS核心基礎(chǔ)標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式如下：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)簽選擇器標(biāo)簽選擇器通配符選擇器類選擇器id選擇器3.3CSS核心基礎(chǔ)類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語(yǔ)法格式如下：類選擇器標(biāo)簽選擇器類選擇器通配符選擇器id選擇器.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.3CSS核心基礎(chǔ)通配符選擇器id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式如下：#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}id選擇器標(biāo)記選擇器類選擇器id選擇器3.3CSS核心基礎(chǔ)通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。其基本語(yǔ)法格式如下：通配符選擇器標(biāo)記選擇器類選擇器id選擇器*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.4設(shè)置文本樣式學(xué)習(xí)HTML時(shí)，可以使用文本樣式標(biāo)簽及其屬性控制文本的顯示樣式，但是這種方式繁瑣且不利于代碼的共享和移植。為此，CSS提供了相應(yīng)的文本設(shè)置屬性。使用CSS可以更輕松方便的控制文本樣式。本節(jié)將對(duì)常用的文本樣式屬性進(jìn)行詳細(xì)地講解。3.4設(shè)置文本樣式3.4.1CSS字體樣式屬性1font-size屬性用于設(shè)置字號(hào)。2font-family屬性用于設(shè)置字體。3font-weight屬性用于定義字體的粗細(xì)。4

font-style屬性用于定義字體風(fēng)格。5

font綜合屬性用于綜合設(shè)置字體樣式。6@font-face屬性是CSS3的新增屬性，用于定義服務(wù)器字體。7word-wrap屬性用于實(shí)現(xiàn)長(zhǎng)單詞和URL地址的自動(dòng)換行。3.4設(shè)置文本樣式font-size屬性font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位，具體如下表所示：font-size屬性相對(duì)長(zhǎng)度單位說(shuō)明em相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對(duì)長(zhǎng)度單位說(shuō)明in英寸cm厘米mm毫米pt點(diǎn)3.4設(shè)置文本樣式font-family屬性font-family屬性用于設(shè)置字體。網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等。font-family屬性p{font-family:"微軟雅黑";}例如將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：3.4設(shè)置文本樣式font-weight屬性font-weight屬性用于定義字體的粗細(xì)，其可用屬性值如下表所示：font-weight屬性值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。100~900（100的整數(shù)倍）定義由細(xì)到粗的字符。其中400等同于normal，700等同于bold，值越大字體越粗。3.4設(shè)置文本樣式font-style屬性font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：font-style屬性normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式;italic：瀏覽器會(huì)顯示斜體的字體樣式;oblique：瀏覽器會(huì)顯示傾斜的字體樣式;3.4設(shè)置文本樣式font綜合屬性font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語(yǔ)法格式如下：font屬性選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}3.4設(shè)置文本樣式@font-face屬性@font-face屬性是CSS3的新增屬性，用于定義服務(wù)器字體。通過(guò)@font-face屬性，開發(fā)者可以在用戶計(jì)算機(jī)未安裝字體時(shí)，使用任何喜歡的字體。@font-face屬性@font-face{ font-family:字體名稱; src:字體路徑; }3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-transformtext-decorationtext-indentwhite-spacecolorletter-spacingword-spacingline-heighttext-aligntext-shadowtext-overflowword-wrap3.4設(shè)置文本樣式color3.4.2CSS文本外觀屬性color屬性用于定義文本的顏色，其取值方式有如下3種：預(yù)定義的顏色值，如red，green，blue等。十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性letter-spacingletter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。letter-spacing屬性，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性word-spacingword-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符無(wú)效。word-spacing屬性用于定義英文單詞之間的間距，和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性line-heightline-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-aligntext-align屬性用于設(shè)置文本內(nèi)容水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-transformtext-transform屬性用于控制英文字符的大小寫。其可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫。uppercase：全部字符轉(zhuǎn)換為大寫。lowercase：全部字符轉(zhuǎn)換為小寫。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-decorationtext-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果。其可用屬性值如下：none：沒有裝飾（正常文本默認(rèn)值）。underline：下劃線。overline：上劃線。line-through：刪除線。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-indenttext-indent屬性用于設(shè)置首行文本的縮進(jìn)。其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,建議使用em作為設(shè)置單位。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性white-spacewhite-space屬性可設(shè)置空白符的處理方式。其屬性值如下：normal：常規(guī)（默認(rèn)值），文本中的空格、空行無(wú)效，滿行（到達(dá)區(qū)域邊界）后自動(dòng)換行。pre：預(yù)格式化，按文檔的書寫格式保留空格、空行原樣顯示。nowrap：空格空行無(wú)效，強(qiáng)制文本不能換行，除非遇到換行標(biāo)簽<br/>。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁(yè)面則會(huì)自動(dòng)增加滾動(dòng)條。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-shadowtext-shadow屬性可以為頁(yè)面中的文本添加陰影效果。h-shadow用于設(shè)置水平陰影的距離，v-shadow用于設(shè)置垂直陰影的距離，blur用于設(shè)置模糊半徑，color用于設(shè)置陰影顏色。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性text-overflowtext-overflow屬性用于處理溢出的文本。clip：修剪溢出文本，不顯示省略標(biāo)簽“…”。ellipsis：用省略標(biāo)簽“…”替代被修剪文本，省略標(biāo)簽插入的位置是最后一個(gè)字符。3.4設(shè)置文本樣式3.4.2CSS文本外觀屬性word-wrapword-wrap屬性用于實(shí)現(xiàn)長(zhǎng)單詞和URL地址的自動(dòng)換行。normal：只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。break-word：在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換。3.5高級(jí)特性本節(jié)將對(duì)CSS高級(jí)特性進(jìn)行詳細(xì)地講解。CSS優(yōu)先級(jí)CSS復(fù)合選擇器CSS層疊性和繼承性CSS高級(jí)特性3.5高級(jí)特性3.5.1CSS復(fù)合選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h3.special或p#one。后代選擇器用來(lái)選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。并集選擇器是各個(gè)選擇器通過(guò)逗號(hào)連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。標(biāo)簽指定式選擇器后代選擇器并集選擇器3.5高級(jí)特性3.5.2CSS層疊性和繼承性所謂層疊性是指多種CSS樣式的疊加。層疊性所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。繼承性3.5高級(jí)特性并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：

邊框?qū)傩?/p>

內(nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性3.5.2CSS層疊性和繼承性3.5高級(jí)特性3.5.3CSS優(yōu)先級(jí)網(wǎng)頁(yè)制作時(shí)，對(duì)統(tǒng)一元素，應(yīng)用不同的背景，會(huì)出現(xiàn)什么情況？思考background-color:pink;background-color:blue;background-color:red

溫馨提示

  • 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ù)覽，若沒有圖紙預(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)論