《工信版（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-1電子課件》由會(huì)員分享，可在線閱讀，更多相關(guān)《工信版（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-1電子課件（15頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),2018/7/18,#,YCF,（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-1電子課件,CSS 3,的選擇器,項(xiàng)目六,授課教師,：,姓名,WEB,前端設(shè)計(jì)基礎(chǔ),Contents,1.,項(xiàng)目描述,2.,知識(shí),準(zhǔn)備,3.,項(xiàng)目實(shí)施,4.,項(xiàng)目拓展,5.,項(xiàng)目小結(jié),6.,技能訓(xùn)練,一 項(xiàng)目,描述,本項(xiàng)目學(xué)習(xí)要點(diǎn),CSS,的常用選擇器,；,CSS 3,新增選擇器,；,偽類選擇器,。,CSS,的引用方法,；,二 知識(shí)準(zhǔn)備,CSS 3,基本語(yǔ)法,；,CSS 3,引用方法,；,CSS 3,新增選擇器,。,CSS 3,常用選擇器,；,
2、二 知識(shí)準(zhǔn)備,CSS,（,Cascading Style Sheet,）稱為層疊樣式表，也稱為,CSS,樣式表（或樣式表），文件擴(kuò)展名為,.css,。,CSS,發(fā)展到今天的最新版本是,CSS 3.0,，,CSS 3,具有強(qiáng)大的功能。,CSS 3,是對(duì)頁(yè)面布局、字體、顏色、背景和其他圖文效果的實(shí)現(xiàn)提供更加精確控制的一種技術(shù)。以前需要使用圖片或者,JavaScript,來(lái)實(shí)現(xiàn)的效果，現(xiàn)在只需要幾句,CSS,代碼就能完成。,CSS 3,基本語(yǔ)法,CSS 3,樣式表是由若干條規(guī)則組成的，這些規(guī)則可以應(yīng)用到 的元素或文檔，來(lái)定義它們顯示的外觀。,每一條樣式規(guī)則由三部分組成：選擇器（,selector,）
3、、屬性（,properties,）和屬性值（,value,），格式如下：,選擇器,樣式屬性,:,屬性值,;,選擇器，可以采用多種形式，可以為文檔中的,HTML,標(biāo)簽，如,、,等，也可以是,class,、,id,標(biāo)簽。,樣式屬性，是選擇器指定的標(biāo)簽所包含的屬性。,屬性值，如果定義選擇器的多個(gè)屬性，則屬性和屬性值為一組，組與組之間用分號(hào)（,;,）隔開。格式如下：,CSS 3,基本語(yǔ)法,選擇器,樣式屬性,1:,取值,1;,樣式屬性,2:,取值,2;,例如下面的一條樣式規(guī)則：,pfont-size:12px;color:red;,該樣式規(guī)則表示：,選擇器是,p,，即為段落標(biāo)簽,提供樣式，,font-s
4、ize,為文本設(shè)置字體大小，,12px,為屬性值；,color,為文字設(shè)置顏色，,red,為屬性值。,CSS 3,引用方法,1.,行內(nèi)樣式,使用行內(nèi)樣式的具體方法是直接在,HTML 5,標(biāo)簽中使用,style,屬性，該屬性的內(nèi)容是,CSS,的屬性和值。盡管行內(nèi)樣式簡(jiǎn)單，但是不常使用，因?yàn)檫@樣添加無(wú)法完全發(fā)揮樣式文件的“內(nèi)容結(jié)構(gòu)與樣式控制代碼”分離的優(yōu)勢(shì)，而且這種方式也不利于樣式的重用，后期維護(hù)成本高，故不推薦使用。格式如下：,段落文字,CSS 3,引用方法,2.,內(nèi)嵌樣式,內(nèi)嵌樣式是將,CSS,樣式代碼添加到,與,之間，并且用,和,標(biāo)簽進(jìn)行聲明。這種寫法雖然沒有完全實(shí)現(xiàn)頁(yè)面內(nèi)容和樣式控制代碼完
5、全分離，但可以設(shè)置一些比較簡(jiǎn)單的樣式，并統(tǒng)一頁(yè)面樣式。格式如下：,p,color: red;,font-size: 12px;,CSS 3,引用方法,3.,鏈接樣式,鏈接樣式是,CSS,中使用頻率最高，也是最實(shí)用的方法，它能很好地將“頁(yè)面內(nèi)容”和“樣式風(fēng)格代碼”分離成兩個(gè)文件或多個(gè)文件，實(shí)現(xiàn)了頁(yè)面框架,HTML 5,代碼和,CSS 3,代碼的完全分離，使前期制作和后期維護(hù)都非常方便。,鏈接樣式是指在外部定義,CSS,樣式表并形成以,.css,為擴(kuò)展名的文件，然后在頁(yè)面中通過,鏈接標(biāo)簽鏈接到頁(yè)面中，而且該鏈接語(yǔ)句必須放在頁(yè)面的,標(biāo)簽中，格式如下：,其中,rel,指鏈接到樣式表，其值為,style
6、sheet,；,type,表示樣式類型為,CSS,樣式表；,href,指定,CSS,樣式表所在的位置。,CSS 3,引用方法,3.,鏈接樣式,【,例,6-1】CSS,引用方法實(shí)例，代碼如下所示（示例文件,6-1.html,）。,在,HTML5,中使用,CSS,的方法,p,color: red;,font-size: 14px;,這是使用行內(nèi)樣式的文字樣式,這是使用內(nèi)嵌樣式的段落文字樣式,這是使用鏈接樣式的文字樣式,在,chrome,瀏覽器中預(yù)覽,CSS 3,引用方法,4.,優(yōu)先級(jí)問題,【,例,6-2】CSS 3,優(yōu)先級(jí)實(shí)例，代碼如下所示（示例文件,6-2.html,）,。,CSS3,優(yōu)先級(jí)實(shí)例
7、,p,color: red;,font-size: 12px;,樣式優(yōu)先級(jí)測(cè)試：,行內(nèi)樣式優(yōu)先級(jí)大于內(nèi)嵌樣式,樣式優(yōu)先級(jí)測(cè)試：,內(nèi)嵌樣式優(yōu)先級(jí)大于鏈接樣式,p,font-size,: 20px;,color:green,;,在,chrome,瀏覽器中預(yù)覽,作業(yè),一、選擇題,1.CSS,樣式表由選擇器、屬性和屬性值組成，下列,_,是,CSS,的正確格式。,A h1color:red; B h1color:red;,C,h1(color:red;) D h1/color:red;/,2.,如果將多種樣式寫在同一個(gè)選擇器中，應(yīng)該用,_,符號(hào)分隔。,A,驚嘆號(hào)（?。?B,冒號(hào)（：）,C,分號(hào)（；）,D,逗號(hào)（，）,3.,當(dāng)一個(gè),HTML,文件同時(shí)應(yīng)用了三種聲明方式并有重復(fù)樣式時(shí)，優(yōu)先級(jí)是,_,。,A,行內(nèi)樣式,內(nèi)嵌樣式,鏈接樣式,B,內(nèi)嵌樣式,行內(nèi),樣式,鏈接,樣式,C,內(nèi),嵌樣式,鏈接,樣式,行內(nèi),樣式,D,鏈接,樣式,內(nèi)嵌樣式,行,內(nèi)樣式,二、上機(jī)實(shí)訓(xùn),上機(jī)完成例,6-1,和例,6-2,的實(shí)例操作。,End,
工信版（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-1電子課件
