《HTML5CSS3項(xiàng)目開發(fā)案例教程》教學(xué)課件項(xiàng)目一《HTML5+css3項(xiàng)目開發(fā)案例教程》

1、HTML5與CSS3基礎(chǔ)知識(shí)項(xiàng)目1第1頁，共80頁。在HTML技術(shù)發(fā)展之初，因?yàn)楦鳛g覽器沒有統(tǒng)一的標(biāo)準(zhǔn)，導(dǎo)致它們解析網(wǎng)頁的方式互不相同，增加了網(wǎng)站開發(fā)人員的負(fù)擔(dān)。直到2014年，萬維網(wǎng)聯(lián)盟發(fā)布了通用的互聯(lián)網(wǎng)標(biāo)準(zhǔn)，也就是HTML5。它具有跨平臺(tái)使用的特性，為如今發(fā)達(dá)的網(wǎng)頁制作技術(shù)奠定了堅(jiān)實(shí)的基礎(chǔ)，差不多與其同時(shí)出現(xiàn)的還有CSS和JavaScript等網(wǎng)頁前端開發(fā)技術(shù)。本項(xiàng)目將介紹HTML5與CSS3的基礎(chǔ)知識(shí)。項(xiàng)目導(dǎo)讀第2頁，共80頁。學(xué)習(xí)目標(biāo)了解HTML與CSS的發(fā)展歷程。 掌握HTML5的文檔結(jié)構(gòu)與基本語法。掌握創(chuàng)建HTML5文檔的方法。 掌握在HTML5頁面中添加CSS3樣式的方法。 掌握

2、CSS3選擇器的使用方法。 了解CSS3的繼承性與層疊性。第3頁，共80頁。內(nèi)容概覽任務(wù)1.1HTML5基礎(chǔ)任務(wù)1.2CSS3基礎(chǔ)任務(wù)1.3CSS3中的選擇器第4頁，共80頁。 網(wǎng)站前端開發(fā)技術(shù)HTML的發(fā)展歷程HTML5的文檔結(jié)構(gòu) HTML5基本語法HTML5主結(jié)構(gòu)元素HTML5基礎(chǔ)任務(wù)第5頁，共80頁。1.1.1 網(wǎng)站前端開發(fā)技術(shù)1HTMLHTML全稱hypertext markup language，即超文本標(biāo)記語言。使用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)。瀏覽器能夠識(shí)別并解析這些文檔。2CSSCSS全稱cascading style sheets，即層疊樣

3、式表。它是一種能夠定義網(wǎng)頁樣式的語言，可以直接寫在HTML文檔中或是單獨(dú)存放為樣式表文件。當(dāng)CSS樣式表單獨(dú)存放時(shí)，多個(gè)頁面可以使用同一個(gè)樣式表文件，這樣不僅可以輕松地統(tǒng)一多個(gè)頁面的風(fēng)格，同時(shí)還減輕了HTML文檔的負(fù)擔(dān)。第6頁，共80頁。3. JavaScriptJavaScript是一種解釋性腳本語言，簡稱JS。它可以收集頁面上的數(shù)據(jù)，并記錄用戶對頁面的操作等，從而使原本靜態(tài)的頁面具有交互性。在網(wǎng)頁制作中，HTML屬于網(wǎng)頁的結(jié)構(gòu)層部分，用于確定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容；CSS屬于網(wǎng)頁的表現(xiàn)層部分，用于設(shè)置網(wǎng)頁的樣式，主要包括各元素的外觀、大小和位置等。兩者既相互獨(dú)立又相互聯(lián)系，熟練掌握它們就能制作出

4、各種靜態(tài)的網(wǎng)頁。JavaScript在網(wǎng)頁制作中主要起錦上添花的作用，使用它可以為網(wǎng)頁添加更復(fù)雜的動(dòng)畫和交互效果。第7頁，共80頁。1.1.2 HTML的發(fā)展歷程HTML在20世紀(jì)90年代發(fā)展迅速，從版本發(fā)展到版本、版本，再到版本。就在版本發(fā)布的當(dāng)年，W3C對HTML未來的發(fā)展做了分析，他們認(rèn)為HTML的形式與內(nèi)容無法分離，且標(biāo)記單一，前途堪憂。于是W3C轉(zhuǎn)向語言更加規(guī)范的XML，但是從1991年HTML出現(xiàn)到1999年的8年時(shí)間里，互聯(lián)網(wǎng)上已經(jīng)有成千上萬由HTML編寫的網(wǎng)頁，直接轉(zhuǎn)向XML是不現(xiàn)實(shí)的，所以W3C只能放慢腳步，開始HTML到XML的過渡，因此出現(xiàn)了XHTML。第8頁，共80頁。

5、1轉(zhuǎn)向XHTML萬維網(wǎng)聯(lián)盟（world wide web consortium，W3C）在2000年推出了，它以XML的語法重新整理了，使其具有XML那樣嚴(yán)謹(jǐn)?shù)恼Z法規(guī)則。而后在2002年推出了，但由于其沒有反映出網(wǎng)站開發(fā)人員在網(wǎng)頁上的交互操作，也未能將網(wǎng)頁上已有的內(nèi)容向后兼容等，最終宣告失敗。2HTML5的成功就在失敗的同時(shí)，HTML5的演化取得了成功。因?yàn)镠TML5在開發(fā)時(shí)就綜合考慮了當(dāng)前與未來需要進(jìn)行的開發(fā)任務(wù)，所以它向后兼容，且包含了的全部特性，并進(jìn)行了少量的修改與完善。2014年，W3C正式宣布，HTML5制作完成并公開發(fā)布。目前HTML5已經(jīng)得到主流瀏覽器的良好支持。第9頁，共80頁

6、。1.1.3 HTML5的文檔結(jié)構(gòu)HTML5使用元素描述頁面結(jié)構(gòu)，元素一般由一個(gè)或兩個(gè)標(biāo)簽（用尖括號括起來的代碼）組成，由兩個(gè)標(biāo)簽組成的元素包括一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽（結(jié)束標(biāo)簽中帶有一個(gè)斜杠）。最基本的HTML5文檔結(jié)構(gòu)如下： HTML5實(shí)例 HTML5的文檔結(jié)構(gòu) 最基本的文檔結(jié)構(gòu)第10頁，共80頁。通過瀏覽器可以查看該文檔的頁面效果（如無特殊說明，本書默認(rèn)使用谷歌瀏覽器展示頁面效果），具體效果如下圖1-1所示。下面介紹該文檔的基本組成部分。第11頁，共80頁。1DOCTYPE聲明提示：如果省略DOCTYPE聲明，大多數(shù)瀏覽器也能夠正確顯示文檔內(nèi)容，但是編寫網(wǎng)頁代碼時(shí)不應(yīng)依賴于瀏覽器的處理

7、，需要保持良好的編寫習(xí)慣，正確聲明文檔所使用的標(biāo)準(zhǔn)規(guī)范。DOCTYPE聲明位于文檔首行，標(biāo)簽為，它不屬于文檔的結(jié)構(gòu)部分。DOCTYPE聲明用于向?yàn)g覽器說明當(dāng)前文檔使用的標(biāo)準(zhǔn)規(guī)范，“”即表示當(dāng)前文檔使用HTML5標(biāo)準(zhǔn)。第12頁，共80頁。2html元素html元素是HTML5頁面的根元素，用于告知瀏覽器自身是一個(gè)HTML5文檔，標(biāo)簽標(biāo)志著HTML5文檔的開始，標(biāo)簽標(biāo)志著HTML5文檔的結(jié)束，它們之間的內(nèi)容即為文檔的頭部結(jié)構(gòu)和主體內(nèi)容。第13頁，共80頁。head元素用于標(biāo)記HTML5文檔的頭部結(jié)構(gòu)，也稱為頭部標(biāo)記，它跟在標(biāo)簽之后，用于封裝其他位于文檔頭部的標(biāo)簽，這些標(biāo)簽中存儲(chǔ)著網(wǎng)頁的各種基本信息

8、，可以使瀏覽器快速解析頁面，其中的內(nèi)容一般不會(huì)顯示在頁面中。位于頭部的元素一般包括以下幾個(gè)。3head元素（3）網(wǎng)頁標(biāo)題。使用標(biāo)簽可以標(biāo)記網(wǎng)頁的標(biāo)題，瀏覽器會(huì)將標(biāo)簽中的內(nèi)容顯示在標(biāo)題欄或狀態(tài)欄中。網(wǎng)頁元信息。使用標(biāo)簽可以標(biāo)記網(wǎng)頁元信息，一般網(wǎng)站都會(huì)在其中設(shè)置描述和關(guān)鍵詞等屬性，以便搜索引擎檢索。它還可以標(biāo)記文檔的字符編碼，如上文的代碼“charset=utf-8”即表示將網(wǎng)頁文檔的字符編碼設(shè)置為“utf-8”。網(wǎng)頁視口。網(wǎng)頁的視口就是瀏覽器中顯示網(wǎng)頁頁面的那部分區(qū)域，通過設(shè)置視口的寬度、縮放比例等屬性可以使網(wǎng)頁適配移動(dòng)端。設(shè)置視口使用“”標(biāo)簽，具體內(nèi)容見節(jié)。第14頁，共80頁。提示：每一個(gè)頁面

9、中都需要含有標(biāo)簽，且該標(biāo)簽的內(nèi)容不具有任何格式。網(wǎng)頁標(biāo)題是搜索引擎識(shí)別網(wǎng)頁內(nèi)容的標(biāo)識(shí)，它可以影響網(wǎng)頁在搜索引擎中的排名，一個(gè)表達(dá)明確的網(wǎng)頁標(biāo)題可以為網(wǎng)站帶來更大的流量。第15頁，共80頁。4body元素body元素用于標(biāo)記HTML5文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。頁面中的所有文本、圖像、音頻或視頻等信息都必須寫在標(biāo)簽之內(nèi)。標(biāo)簽中的信息才是最終展示給用戶的內(nèi)容。html、head和body這3種元素在一個(gè)HTML5文檔中只能各出現(xiàn)一次，且和標(biāo)簽必須在標(biāo)簽之內(nèi)，標(biāo)簽位于標(biāo)簽之后，與標(biāo)簽并列。第16頁，共80頁。1.1.4 HTML5基本語法HTML5是使用標(biāo)簽來描述網(wǎng)頁的，HTML5文檔中實(shí)質(zhì)

10、上只包含HTML標(biāo)簽和文本。瀏覽器的一個(gè)重要作用就是讀取HTML5文檔，并解釋其中的一個(gè)個(gè)標(biāo)簽，然后將其以“網(wǎng)頁”的形式顯示。1HTML5標(biāo)簽的分類節(jié)中提到的、與等都是HTML5標(biāo)簽，也稱為HTML5標(biāo)記?！皹?biāo)簽”和“元素”這兩個(gè)概念通常不做區(qū)分，但是一般來說，一個(gè)元素包括其對應(yīng)的標(biāo)簽及其中的內(nèi)容。HTML5的標(biāo)簽主要分為以下幾類。第17頁，共80頁。（1）雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的標(biāo)簽，基本語法格式為：內(nèi)容例如，就是一個(gè)雙標(biāo)簽。提示：標(biāo)簽不區(qū)分大小寫。例如，“標(biāo)簽的大小寫”在HTML5中是合法的。但是一般不建議這么寫，而是統(tǒng)一小寫。（2）單標(biāo)簽也稱為空標(biāo)簽，基本語法格式為：例如，就

11、是一個(gè)單標(biāo)簽，用于標(biāo)記一條水平線。單標(biāo)簽中的“/”可以省略。第18頁，共80頁。（3）注釋標(biāo)簽是HTML5中一種特殊的標(biāo)簽。使用注釋標(biāo)簽括起來的內(nèi)容不會(huì)顯示在頁面上，但是會(huì)保存在頁面的源代碼中。它的基本語法格式為：在各功能模塊的開頭和結(jié)尾處添加注釋可方便合作開發(fā)的人員修改和理解代碼。第19頁，共80頁。2HTML5標(biāo)簽的屬性在HTML5中，可以根據(jù)需要為標(biāo)簽設(shè)置屬性，比如在段落標(biāo)簽中設(shè)置該段落的文本顏色或字號大小等。設(shè)置標(biāo)簽屬性的語法格式為：內(nèi)容一個(gè)標(biāo)簽可以有多個(gè)屬性，標(biāo)簽名和屬性名之間要用空格隔開，屬性之間不分先后順序。標(biāo)簽的屬性省略時(shí)將使用它們的默認(rèn)值。第20頁，共80頁。（1）屬性值可省

12、略引號。在HTML5中，標(biāo)簽的屬性值兩側(cè)既可以用雙引號，也可以用單引號，當(dāng)屬性值不包含特殊字符的時(shí)候，引號可以省略。例如，以下3行代碼在HTML5中都是合法的。 （2）部分屬性的屬性名可以省略。例如： 上述代碼是等價(jià)的，可以省略屬性名的屬性還有readonly、defer與ismap等。第21頁，共80頁。3塊級元素與行內(nèi)元素body元素中的元素分為塊級元素和行內(nèi)元素。（1）塊級元素在屏幕上顯示時(shí)類似于首尾各有一個(gè)換行符。例如，圖1-1中顯示的兩行文本內(nèi)容，標(biāo)記它們的h1與p元素都是塊級元素，它們在新的行中顯示內(nèi)容，這些元素之后的內(nèi)容同樣也會(huì)另起一行。（2）行內(nèi)元素是可以出現(xiàn)在同一行中的元素。

13、例如，圖1-1中顯示的第一行文本內(nèi)容，其中標(biāo)記斜體的i元素就是一個(gè)行內(nèi)元素。行內(nèi)元素中不可以包含塊級元素，它只能位于塊級元素之內(nèi)。塊級元素既可以包含其他塊級元素，也可以包含行內(nèi)元素。第22頁，共80頁。1.1.5 HTML5主結(jié)構(gòu)元素HTML5中包含上百個(gè)標(biāo)簽。例如，節(jié)代碼中的是文本類的標(biāo)題標(biāo)簽，是文本類的段落標(biāo)簽，這些標(biāo)簽主要放置在body元素內(nèi)，具體應(yīng)用將在后面的項(xiàng)目中分別講解。在設(shè)計(jì)頁面時(shí)如果任意堆疊各種標(biāo)簽，會(huì)導(dǎo)致頁面的整體結(jié)構(gòu)變得散亂，不便于后期添加樣式。所以，為了方便設(shè)計(jì)頁面結(jié)構(gòu)，在對頁面排版時(shí)需要將它們放在下列表示結(jié)構(gòu)的元素中。（1）頁眉。（2）導(dǎo)航。表示頁眉的元素是header

14、，它用于標(biāo)記整個(gè)頁面的標(biāo)題欄或一個(gè)內(nèi)容塊的標(biāo)題區(qū)域。一個(gè)頁面可以包含多個(gè)header元素，它可以包含網(wǎng)站Logo、主導(dǎo)航或搜索框等。表示導(dǎo)航的元素是nav，它用來標(biāo)記頁面導(dǎo)航的鏈接組。一個(gè)頁面可以包含多個(gè)nav元素，導(dǎo)航性質(zhì)的鏈接都可以放置在nav元素中，比如主菜單鏈接、側(cè)邊欄導(dǎo)航或頁內(nèi)導(dǎo)航等。頁腳的導(dǎo)航可以不放在該元素中。第23頁，共80頁。表示導(dǎo)航的表示文章塊的元素是article，它用來標(biāo)記頁面中的一個(gè)獨(dú)立內(nèi)容，比如報(bào)紙文章、博客條目或用戶評論等。一個(gè)頁面可以包含多個(gè)article元素，在article元素中也可以包含一個(gè)或多個(gè)article元素。元素是nav，它用來標(biāo)記頁面導(dǎo)航的鏈接組

15、。一個(gè)頁面可以包含多個(gè)nav元素，導(dǎo)航性質(zhì)的鏈接都可以放置在nav元素中，比如主菜單鏈接、側(cè)邊欄導(dǎo)航或頁內(nèi)導(dǎo)航等。頁腳的導(dǎo)航可以不放在該元素中。（5）區(qū)塊。表示區(qū)塊的元素是section，它用來標(biāo)記文檔中的節(jié)，對內(nèi)容進(jìn)行分區(qū)，比如文檔中的章節(jié)、頁眉、頁腳等，可以將其嵌套在article元素中。section元素標(biāo)記的是頁面中的特定區(qū)域，可對其中的內(nèi)容進(jìn)行操作，如存儲(chǔ)到數(shù)據(jù)庫里或輸出到Word文檔中。（3）主要區(qū)域。（4）文章塊。表示主要區(qū)域的元素是main，它用于標(biāo)記一個(gè)頁面的主要內(nèi)容。一個(gè)頁面中只能包含一個(gè)main元素。main元素不能被放在header、nav、article、aside或

16、footer元素中，在標(biāo)簽中設(shè)置role屬性的值為main可以幫助閱讀器定位頁面的主要區(qū)域。第24頁，共80頁。表示頁腳的元素是footer，它用來標(biāo)記文檔或節(jié)的頁腳，如版權(quán)信息、作者信息等。當(dāng)footer元素作為整個(gè)文檔即body元素的頁腳時(shí)，一般位于頁面底部。（6）附欄。（7）頁腳。表示附欄的元素是aside，它用來標(biāo)記一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，將它單獨(dú)拆分出來后不會(huì)影響整體內(nèi)容。例如，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告等。除上述結(jié)構(gòu)元素之外，HTML5中還有兩個(gè)無語義容器，分別是div元素和span元素。div元素是塊級的無語義容器；span元素是行內(nèi)的無語義容器

17、，靈活使用它們可以制作出更具結(jié)構(gòu)化的頁面樣式。第25頁，共80頁。1使用記事本創(chuàng)建HTML5文檔2使用Dreamweaver CC 2020創(chuàng)建HTML5文檔任務(wù)實(shí)施創(chuàng)建第一個(gè)HTML5文檔第26頁，共80頁。 CSS3的發(fā)展歷程 CSS3的語法規(guī)則在HTML5頁面中添加CSS3樣式CSS3基礎(chǔ)任務(wù)第27頁，共80頁。1994年，哈坤利提出了CSS的最初設(shè)想，并和伯特波斯一拍即合，決定共同開發(fā)CSS。在這一年的年底，哈坤在芝加哥的一次會(huì)議上展示了CSS的設(shè)想，并于次年再次向業(yè)內(nèi)展示。當(dāng)時(shí)剛成立的W3C對此很感興趣，為此組織了討論會(huì)。1996年12月，W3C發(fā)布了CSS的第一個(gè)版本CSS1。19

18、97年，W3C組織專門負(fù)責(zé)CSS的工作組開始討論CSS1中沒有涉及的問題。1998年5月，W3C發(fā)布了CSS2。2005年12月，W3C開始制定CSS3的標(biāo)準(zhǔn)，到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。雖然完整的CSS3標(biāo)準(zhǔn)還未發(fā)布，但主流瀏覽器已經(jīng)開始支持其中的大部分特性。1.2.1 CSS3的發(fā)展歷程第28頁，共80頁。CSS3的語法規(guī)則是由選擇器和聲明組成的，通過選擇器匹配HTML文檔中的不同元素，并對它們應(yīng)用聲明中設(shè)置的樣式屬性。CSS3的語法規(guī)則如下圖1-16所示。1.2.2 CSS3的語法規(guī)則第29頁，共80頁。（1）選擇器用于匹配應(yīng)用聲明的某個(gè)或某些元素。（2）聲明可以有若干個(gè)，聲明之間用

19、分號隔開并放置在一對大括號中，它們命令瀏覽器如何渲染指定對象。聲明由屬性和屬性值兩部分組成。（3）屬性是CSS3提供的樣式選項(xiàng)，屬性名一般由一個(gè)或多個(gè)單詞組成，多個(gè)單詞中間用連字符連接。（4）屬性值是設(shè)置屬性效果的參數(shù)，可以是數(shù)值、單位或關(guān)鍵字。下面分別介紹各組成部分。圖1-16中的CSS3樣式表示將body元素中的字號大小設(shè)置為20 px，文本顏色設(shè)置為淺藍(lán)色。第30頁，共80頁。1行內(nèi)樣式表行內(nèi)樣式也稱為內(nèi)聯(lián)樣式，是直接為HTML標(biāo)簽設(shè)置style屬性，具體格式為：內(nèi)容其中，style是標(biāo)簽的屬性，它自身又包括了多個(gè)屬性，這些屬性與屬性值的規(guī)范與CSS3樣式規(guī)則相同。行內(nèi)樣式只對其所在的標(biāo)

20、簽起作用。1.2.3 在HTML5頁面中添加CSS3樣式第31頁，共80頁?！纠?-1】 為任務(wù)中創(chuàng)建的“1-1.html”文檔添加行內(nèi)樣式，設(shè)置標(biāo)題、段落標(biāo)簽的字號與文本顏色。代碼如下： 第一個(gè)HTML5文檔 第一個(gè)標(biāo)題 第一個(gè)段落第32頁，共80頁。上述代碼的頁面效果如下圖1-17所示。行內(nèi)樣式雖然看起來簡單，但其中也存在著一些缺陷比如每一個(gè)標(biāo)簽在設(shè)置樣式時(shí)都需要添加style屬性，增加的代碼會(huì)使頁面體積變大，并沒有解決HTML5頁面的臃腫問題。第33頁，共80頁。2內(nèi)嵌樣式表內(nèi)嵌樣式是將CSS3代碼寫在HTML5文檔的頭部標(biāo)簽中，并且用標(biāo)簽標(biāo)記，具體格式為： 屬性1:屬性值1;屬性2:屬

21、性值2; 其中，type屬性值為“text/css”表示標(biāo)簽所包含的是樣式代碼，該屬性只有這一個(gè)屬性值，在HTML5中可以將其省略。提示：在該格式中，標(biāo)簽一般位于標(biāo)簽中的標(biāo)簽之后，雖然實(shí)際上它可以寫在文檔的任意位置，但由于瀏覽器是從上到下解析代碼的，所以一般會(huì)將樣式代碼寫在頭部，便于瀏覽器最先識(shí)別并解析。第34頁，共80頁。 第一個(gè)HTML5文檔 h1font-size:40px;color:red; pfont-size:30px;color:green; 第一個(gè)標(biāo)題 第一個(gè)段落【例1-2】使用內(nèi)嵌樣式為“1-1.html”文檔設(shè)置樣式。代碼如下：內(nèi)嵌樣式相對于行內(nèi)樣式的優(yōu)勢是可以作用于其所

22、在的整個(gè)頁面，但是當(dāng)需要設(shè)計(jì)一個(gè)網(wǎng)站時(shí)，使用內(nèi)嵌樣式仍然不能發(fā)揮出CSS3的最大優(yōu)勢。第35頁，共80頁。3鏈接樣式表鏈接樣式是將所有樣式放在一個(gè)或多個(gè)擴(kuò)展名為“.css”的外部樣式表文件中，然后使用標(biāo)簽將樣式表文件鏈接至HTML5文檔中，具體格式為：其中，標(biāo)簽需放在標(biāo)簽中，href屬性指定CSS文檔的位置，type與rel屬性用于表明連接是一個(gè)CSS3樣式表文件。第36頁，共80頁。步驟2將“1-1.css”文檔使用記事本打開，在編輯窗口中輸入以下代碼，然后保存文檔。h1font-size:40px;color:red;pfont-size:30px;color:green;【例1-3】 使

23、用鏈接樣式為“1-1.html”文檔設(shè)置樣式。步驟1在“1-1.html”文檔的存儲(chǔ)目錄下新建一個(gè)文本文檔，將其重命名為“1-1.css”。使用鏈接樣式時(shí)需要先創(chuàng)建一個(gè)CSS3文檔，這里介紹使用記事本創(chuàng)建CSS3文檔的方法。第37頁，共80頁。步驟4保存“1-1.html”文檔，在瀏覽器中查看它的頁面效果。步驟3在“1-1.html”文檔的頭部標(biāo)簽中添加以下代碼。第38頁，共80頁。使用DW創(chuàng)建樣式表文件，并將其鏈接至HTML5文檔的方法。任務(wù)實(shí)施為“1-2.html”文檔設(shè)置樣式第39頁，共80頁。 基本選擇器組合選擇器屬性選擇器偽類選擇器 CSS3的繼承性和層疊性CSS3中的選擇器任務(wù)第4

24、0頁，共80頁。1標(biāo)簽選擇器HTML文檔是由很多標(biāo)簽組成的，標(biāo)簽選擇器就是直接引用標(biāo)簽名的選擇器。使用標(biāo)簽選擇器可以統(tǒng)一設(shè)置使用某類標(biāo)簽設(shè)置的元素的樣式。例如，以下代碼使用了body標(biāo)簽選擇器。bodyfont-size:20px;color:lightblue;標(biāo)簽選擇器是最常用的選擇器，通常用它來統(tǒng)一設(shè)置某些元素的基本樣式。1.3.1 基本選擇器第41頁，共80頁。CSS3中有一個(gè)特殊的選擇器通配選擇器，它使用“*”表示，用于匹配所有標(biāo)簽。例如，以下代碼表示重置瀏覽器的部分默認(rèn)樣式。*margin:0;padding:0;border:0;list-style:0;第42頁，共80頁。類選

25、擇器以“.”為前綴，跟隨一個(gè)自定義類名。類選擇器可以使不同的元素?fù)碛邢嗤臉邮?，也可以使相同的元素?fù)碛胁煌臉邮健ｎ愡x擇器可以通過設(shè)置class屬性實(shí)現(xiàn)，就是說在定義好選擇器后，還需要為標(biāo)簽設(shè)置class屬性值（class屬性可以包含類列表，多個(gè)屬性值之間用空格隔開）為類選擇器的名稱，這樣才能將類選擇器樣式應(yīng)用于標(biāo)簽。此外，還可以把標(biāo)簽與類捆綁在一起，來限定類的適用范圍，這種限定方式稱為指定類選擇器。2類選擇器為了能夠識(shí)別各種標(biāo)簽，可以設(shè)置標(biāo)簽的class或id屬性來賦予它們額外的語義。class屬性可以應(yīng)用于頁面中任意數(shù)量的元素，適合用來標(biāo)識(shí)樣式相同的對象。id屬性用來標(biāo)識(shí)頁面上固定存在的結(jié)

26、構(gòu)性元素，或者區(qū)分語義相近的元素，它的屬性值必須是唯一的。第43頁，共80頁?！纠?-4】 使用類選擇器設(shè)置樣式，頁面效果如下圖1-21所示。第44頁，共80頁。步驟1創(chuàng)建HTML5文檔，在標(biāo)簽中輸入以下代碼，構(gòu)建詩文內(nèi)容的結(jié)構(gòu)。無題相見時(shí)難別亦難，東風(fēng)無力百花殘。春蠶到死絲方盡，蠟炬成灰淚始干。曉鏡但愁云鬢改，夜吟應(yīng)覺月光寒。蓬山此去無多路，青鳥殷勤為探看。第45頁，共80頁。步驟2在標(biāo)簽中添加標(biāo)簽，在其中輸入以下代碼，使用類選擇器為各p元素設(shè)置不同的樣式。ptext-align:center;font-size:18px;/*設(shè)置標(biāo)簽選擇器p中文本居中對齊，字號為18 px*/.bfont

27、-weight:bold;/*設(shè)置類選擇器b的字體加粗顯示*/.p1font-family:楷體;font-size:30px;/*設(shè)置類選擇器p1的字體為楷體，字號為30 px*/p.p1text-decoration-line:underline;font-size:20px;/*設(shè)置標(biāo)簽選擇器p的類p1中，文本增加下劃線，字號為20 px*/.p2font-family:宋體;font-size:22px;/*設(shè)置類選擇器p2的字體為宋體，字號為22 px*/第46頁，共80頁。ID選擇器以“#”為前綴，跟隨一個(gè)自定義的ID名。ID選擇器可以通過設(shè)置id屬性實(shí)現(xiàn)，就是在定義好ID選擇器后

28、，需要設(shè)置標(biāo)簽的id屬性值為ID選擇器的名稱，以將ID選擇器應(yīng)用于標(biāo)簽。ID選擇器的使用方式與類選擇器基本相同，區(qū)別在于ID選擇器只能應(yīng)用于HTML文檔中的一個(gè)元素，而類選擇器可以應(yīng)用于多個(gè)元素。3ID選擇器第47頁，共80頁。1包含選擇器1.3.2 組合選擇器包含選擇器通過空格連接兩個(gè)選擇器，前面選擇器表示包含的祖先元素，后面選擇器表示被包含的后代元素。第48頁，共80頁?！纠?-5】 使用包含與子選擇器設(shè)置元素樣式，頁面效果如下圖1-22所示。子選擇器通過“”連接兩個(gè)選擇器，前面選擇器表示要匹配的父元素，后面選擇器表示被包含的子元素。2類選擇器第49頁，共80頁。步驟1創(chuàng)建HTML5文檔，

29、在標(biāo)簽中輸入以下代碼，構(gòu)建文本內(nèi)容的結(jié)構(gòu)。重中之重重中之重步驟2 在標(biāo)簽中添加標(biāo)簽，在其中輸入以下代碼，分別使用包含與子選擇器設(shè)置strong元素的樣式。h1,h2font-size:30px;h1 strongfont-size:40px;/*使用包含選擇器*/h2strongfont-size:40px; /*使用子選擇器*/第50頁，共80頁。提示：多個(gè)選擇器之間用英文逗號隔開時(shí)，稱為選擇器的集體聲明。當(dāng)多個(gè)選擇器設(shè)置的樣式完全相同時(shí)，可以這些選擇器歸為一組，并用英文逗號隔開以進(jìn)行集體聲明，從而提高代碼的效率和速度，同時(shí)也可以降低代碼的冗余。相對于子選擇器而言，包含選擇器的作用范圍更廣，

30、在祖先元素之下的所有后代元素都將受影響。子選擇器只能影響父元素的下一級中的元素。在例1-5中，應(yīng)用了包含選擇器的h1元素中，所有strong元素都受影響。而應(yīng)用了子選擇器的h2元素中，包含在i元素中的strong元素沒有受影響，因?yàn)樗辉趆2元素的下一級中。第51頁，共80頁。相鄰選擇器通過“+”連接兩個(gè)選擇器，只有滿足這個(gè)連接順序的、同級的、相鄰的元素才會(huì)成功匹配。3相鄰選擇器兄弟選擇器通過“”連接兩個(gè)選擇器，它在相鄰選擇器的基礎(chǔ)上，通過連接順序匹配相鄰的元素之后，會(huì)將后續(xù)同級別的該類型元素一同匹配。4兄弟選擇器相鄰選擇器與兄弟選擇器的區(qū)別在于，相鄰選擇器會(huì)嚴(yán)格按照連接順序匹配相鄰的元素，成

31、功匹配后不會(huì)匹配該元素的后續(xù)元素，而是繼續(xù)檢索頁面對象，直到再次出現(xiàn)符合連接順序的元素，才會(huì)再次匹配相鄰元素。第52頁，共80頁?！纠?-6】 使用相鄰與兄弟選擇器設(shè)置元素樣式，頁面效果如圖1-23所示。第53頁，共80頁。創(chuàng)建HTML5文檔，參照以下代碼段分別在和標(biāo)簽中輸入代碼，分別使用相鄰與兄弟選擇器設(shè)置p元素的樣式。h1+pfont-size:20px;/*使用相鄰選擇器*/hrpfont-size:20px;/*使用兄弟選擇器*/無題相見時(shí)難別亦難，東風(fēng)無力百花殘。春蠶到死絲方盡，蠟炬成灰淚始干。曉鏡但愁云鬢改，夜吟應(yīng)覺月光寒。蓬山此去無多路，青鳥殷勤為探看。第54頁，共80頁?！纠?

32、-7】 創(chuàng)建一個(gè)簡單的導(dǎo)航示例，頁面效果如下圖1-24所示。屬性選擇器根據(jù)標(biāo)簽的屬性來匹配元素。CSS3中共有7種屬性選擇器，為便于后面講解，此處先創(chuàng)建一個(gè)簡單的HTML頁面，本節(jié)中后面使用的所有選擇器都將針對該頁面進(jìn)行操作。1.3.3 屬性選擇器第55頁，共80頁。步驟1創(chuàng)建HTML5文檔，在標(biāo)簽中輸入以下代碼，構(gòu)建導(dǎo)航示例的結(jié)構(gòu)。12345678910第56頁，共80頁。步驟2在標(biāo)簽中添加標(biāo)簽，在其中輸入以下代碼，設(shè)置導(dǎo)航示例的樣式。nav aborder:2px solid darkslategray;font-size:30px;display:inline-block;height:

33、35px;line-height:30px;width:40px;-moz-border-radius:20px;border-radius:20px;text-align:center;background:darkslategrey;color:#fff;margin-top:1px;margin-right:5px;text-decoration:none;/*設(shè)置超鏈接的樣式*/第57頁，共80頁。1Eattr選擇器Eattr選擇器是最基本的屬性選擇器，用于匹配所有擁有attr屬性的E元素，無論attr屬性值是什么。例如：nav aidborder:2px solid #2f4f4f;

34、background:white;color:cadetblue;上述代碼表示匹配nav元素中所有擁有id屬性的a元素，修改其邊框、背景顏色與文本顏色，頁面效果如下圖1-25所示。Eattr選擇器不僅能夠匹配單一屬性，還可以匹配多個(gè)屬性，如Eattr1 attr2。第58頁，共80頁。2Eattr=value選擇器Eattr=value選擇器用于匹配attr屬性值為“value”的E元素，它縮小了匹配范圍，能夠更加精確地匹配需要的元素。例如：nav aid=firstborder:2px solid #2f4f4f;background:white;color:cadetblue;上述代碼精確

35、地匹配了nav元素中id屬性值為“first”的a元素，修改其邊框、背景顏色與文本顏色，頁面效果如下圖1-26所示。與Eattr選擇器相同，它也可以匹配多個(gè)屬性，如Eattr1=value1 attr2=value2。第59頁，共80頁。3Eattr=value選擇器Eattr=value選擇器用于匹配attr屬性值列表中包含了“value”的E元素，不需要完全匹配。如果“value”是一個(gè)列表，需要用空格隔開。例如：nav atitle=webbackground:lightcyan;color:#2f4f4f;上述代碼表示匹配nav元素中所有title屬性值列表中包含了“web”的a元素，

36、修改其背景顏色與文本顏色，頁面效果如下圖1-27所示。第60頁，共80頁。4Eattr=value選擇器Eattr=value選擇器用于匹配attr屬性值以“value”開頭的E元素，例如：nav atitle=httpbackground:#ffffff;color:#2f4f4f;上述代碼表示匹配nav元素中title屬性值以“http”開頭的a元素，修改其背景顏色與文本顏色，頁面效果如下圖1-28所示。第61頁，共80頁。5Eattr$=value選擇器Eattr$=value選擇器與Eattr=value選擇器相反，用于匹配attr屬性值以“value”結(jié)尾的E元素，例如：nav at

37、itle$=linkbackground:lightcyan;color:#2f4f4f;上述代碼表示匹配nav元素中title屬性值以“l(fā)ink”結(jié)尾的a元素，修改其背景顏色與文本顏色。第62頁，共80頁。6Eattr*=value選擇器Eattr*=value選擇器用于匹配attr屬性值中包含字符串“value”的E元素，無論“value”在屬性值的什么位置。例如：nav atitle*=tbackground:lightcyan;color:#2f4f4f;上述代碼表示匹配nav元素中title屬性值含有“t”的a元素，修改其背景顏色與文本顏色，頁面效果如左圖1-29所示。提示： Eat

38、tr*=value選擇器與Eattr=value選擇器不同：Eattr=value選擇器匹配的值需要包含在值列表中并用空格隔開，而Eattr*=value選擇器沒有這個(gè)限制，“value”字符串出現(xiàn)在屬性值的任意位置都能夠匹配成功。第63頁，共80頁。7Eattr|=value選擇器Eattr|=value選擇器用于匹配attr屬性值為“value”或以“value”開頭的元素。例如：nav alang|=zhbackground:#ffffff;color:darkolivegreen;上述代碼表示匹配nav元素中l(wèi)ang屬性值為“zh”或是以“zh”開頭的a元素，修改其背景顏色與文本顏色，

39、頁面效果如下圖1-30所示。第64頁，共80頁。偽類是同一個(gè)標(biāo)簽的不同狀態(tài)，所以普通的偽類選擇器可以分為靜態(tài)偽類選擇器和動(dòng)態(tài)偽類選擇器，除此之外還有結(jié)構(gòu)偽類選擇器、狀態(tài)偽類選擇器等其他種類。偽類選擇器以冒號為前綴，跟隨偽類或偽類對象，在冒號前可以使用其他選擇器限制偽類應(yīng)用的范圍。1.3.4 偽類選擇器第65頁，共80頁。1靜態(tài)偽類選擇器靜態(tài)偽類選擇器只用于設(shè)置鏈接的樣式，包括“:link”和“:visited”，它們分別表示鏈接被訪問前的狀態(tài)與鏈接被訪問后的狀態(tài)?！纠?-8】 靜態(tài)偽類選擇器的應(yīng)用。創(chuàng)建HTML5文檔，參照以下代碼段分別在和標(biāo)簽中輸入代碼，設(shè)置鏈接訪問前的文本顏色為黑色，訪問后

40、的文本顏色為米黃色。 a:linkcolor:black; a:visitedcolor:beige;/style HTML5+CSS3項(xiàng)目開發(fā)案例教程微課視頻第66頁，共80頁。2動(dòng)態(tài)偽類選擇器動(dòng)態(tài)偽類選擇器可用于所有元素，包括“:hover”“:active”和“:focus”等，這3種偽類選擇器分別匹配鼠標(biāo)指針移動(dòng)至標(biāo)簽上時(shí)、鼠標(biāo)指針單擊標(biāo)簽區(qū)域但不松開時(shí)，以及某個(gè)標(biāo)簽獲得焦點(diǎn)時(shí)的樣式?！纠?-9】 動(dòng)態(tài)偽類選擇器的應(yīng)用。創(chuàng)建HTML5文檔，參照以下代碼段分別在和標(biāo)簽中輸入代碼，設(shè)置鼠標(biāo)指針移至鏈接上方時(shí)的背景顏色為淺藍(lán)色，單擊鏈接時(shí)的背景顏色為米黃色。 a:hoverbackgroun

41、d:lightblue; a:activecolor:beige; HTML5+CSS3項(xiàng)目開發(fā)案例教程微課視頻第67頁，共80頁。（1）:first-child。匹配父元素的第一個(gè)子元素。（2）:last-child。匹配父元素的最后一個(gè)子元素。（3）:nth-child()。按正序匹配父元素中的某個(gè)元素。（4）:nth-last-child()。按倒序匹配父元素中的某個(gè)元素。（5）:nth-of-type()。按正序匹配父元素下同種標(biāo)簽的某個(gè)元素。（6）:nth-last-of-type()。按倒序匹配父元素下同種標(biāo)簽的某個(gè)元素。（7）:first-of-type。匹配父元素下同種標(biāo)簽的第

42、一個(gè)元素。（8）:last-of-type。匹配父元素下同種標(biāo)簽的最后一個(gè)元素。（9）:only-child。匹配父元素下沒有兄弟元素的元素。（10）:empty。匹配沒有子元素的元素。（11）:root。匹配根元素。結(jié)構(gòu)偽類選擇器可以根據(jù)文檔的結(jié)構(gòu)來匹配元素，主要包括以下幾種。3結(jié)構(gòu)偽類選擇器第68頁，共80頁?！纠?-10】 結(jié)構(gòu)偽類選擇器的應(yīng)用，頁面效果如下圖1-31所示。第69頁，共80頁。無題相見時(shí)難別亦難，東風(fēng)無力百花殘。春蠶到死絲方盡，蠟炬成灰淚始干。曉鏡但愁云鬢改，夜吟應(yīng)覺月光寒。蓬山此去無多路，青鳥殷勤為探看。步驟1創(chuàng)建HTML5文檔，在標(biāo)簽中輸入以下代碼，構(gòu)建詩文內(nèi)容的結(jié)構(gòu)。步驟2在標(biāo)簽中添加標(biāo)簽，在其中輸入以下代碼，使用結(jié)構(gòu)偽類選擇器依次設(shè)置文檔中各p元素的字號。ptext-align:center;p:first-childfont-size:30px;p:nth-child(2)font-size:15px;p:nth-child(3)font-size:18px;p:nth-child(4)font-size:20px;p: