任務(wù)4-構(gòu)建網(wǎng)站層疊樣式表-動畫版課件

1、任務(wù)4 : 構(gòu)建網(wǎng)站層疊樣式表網(wǎng)頁設(shè)計與制作(HTML+CSS+Javascript)網(wǎng)頁設(shè)計與制作課程組目標TARGET知識目標了解CSS3簡介；掌握CSS樣式設(shè)置規(guī)則；掌握CSS樣式的調(diào)用方法；掌握CSS基礎(chǔ)選擇器的使用方法；掌握CSS3新增選擇器的使用方法;掌握CSS的繼承與層疊性的應(yīng)用。 1 任務(wù)描述 2 初識CSS3 3 CSS的使用 4 CSS3選擇器 5 CSS的繼承與層疊 6 綜合實例 7 任務(wù)實施 8 任務(wù)拓展1任務(wù)描述Part使用CSS實現(xiàn)門戶網(wǎng)站導航 本任務(wù)就是在任務(wù)3的基礎(chǔ)之上，編寫基本的CSS3樣式表，實現(xiàn)網(wǎng)站頭部的頁面效果。任務(wù)描述：使用CSS實現(xiàn)門戶網(wǎng)站導航2初識

2、CSS3Part CSS3簡介主流瀏覽器對CSS3的支持情況CSS3簡介CSS即層疊樣式表，是CascadingStyle Sheet的縮寫。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。例如：禪意花園（/tr/zh-cn/）。舉例演示禪意花園 http:/tr/zh-cn/CSS3簡介核心內(nèi)容：盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效、多欄布局等。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。

3、盒子模型列表模塊超鏈接方式語言模塊背景邊框多欄布局文字特效主流瀏覽器瀏覽器就是一種把再互聯(lián)網(wǎng)上的文本文檔和其他文件翻譯成網(wǎng)頁的軟件，通過瀏覽器可以快捷地閱讀Internet上的內(nèi)容。IEFireFoxChromeOperaSafariCSS3模塊名稱Chrome30Safari5Firefox3.6Opera11IE10RGBA（RGB色彩模式+Alpha透明度）HSLA（HSL色彩模式+Alpha透明度）Multiple Backgrounds（多背景）Border Image（邊框圖像）Border Radius（邊框半徑/圓角）Box Shadow（盒陰影）Opacity（不透明度）CS

4、S Animations（CSS動畫）CSS Columns（CSS多列布局）CSS Gradients（CSS漸變）CSS Reflections（CSS映像）CSS Transforms（CSS 轉(zhuǎn)換）CSS Transforms 3D（CSS 3D轉(zhuǎn)換）CSS Transitions（CSS 過渡）CSS FontFace（CSS 字體）3CSS的使用PartCSS樣式設(shè)置規(guī)則CSS樣式的調(diào)用CSS基礎(chǔ)選擇器 CSS樣式設(shè)置規(guī)則CSS樣式設(shè)置規(guī)則由選擇器和聲明部分組成。語法：選擇器 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;選擇器綠色部分為選擇器，大括號部分為聲明部分，包

5、括屬性與屬性值。聲明由屬性和值兩部分組成。屬性和值用英文冒號“：”鏈接。多個“鍵值對”之間用英文分號“；”進行區(qū)分，最后一個分號可以省略，為了規(guī)范最好保留。舉例： P color: red; font-size: 18px; line-height: 30px; 聲明部分屬性屬性值注意：選擇器命名統(tǒng)一使用英文、英文簡寫或者統(tǒng)一使用拼音。選擇器命名盡量不縮寫，除非是一看就懂得單詞。在編寫CSS代碼時，為了提高代碼的可讀性，通常會加上CSS注釋，可以使用/*/（斜杠和星號）。CSS樣式中的類和id選擇器嚴格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習慣一般將“選擇器、屬性和值”都采用小寫的方式 。

6、多個屬性之間必須用英文狀態(tài)下的分號隔開，最后用的分號可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。 例如： pfont-family: microsoft yahei;CSS常見命名規(guī)則名稱含義名稱含義header頁頭container容器footer頁腳nav導航aside或sidebar側(cè)邊欄column欄目wrapper或wrap頁面外圍控制整體布局寬度left左側(cè)right右側(cè)center中間loginbar登錄條logo標志banner廣告main頁面主體hot熱點news新聞download下載subna

7、v子導航menu菜單submenu子菜單search搜索friendlink友情鏈接copyright版權(quán)scroll滾動content內(nèi)容tab標簽頁list列表msg提示信息title欄目標題joinus加入guild指南service服務(wù)register注冊status狀態(tài)vote投票partner合伙伙伴 CSS樣式的調(diào)用方法01行內(nèi)樣式表02內(nèi)部樣式表03鏈接樣式表插入樣式表的方法：行內(nèi)樣式表、內(nèi)部樣式表、鏈接樣式表。 1. 行內(nèi)樣式表語法：舉例：直接在HTML代碼行中加入樣式規(guī)則。適用于指定網(wǎng)頁內(nèi)的某一小段文字的顯示規(guī)則，效果僅可控制該標簽。舉例演示【實例4-1】行內(nèi)樣式表應(yīng)用。注

8、意：行內(nèi)樣式也可以通過標簽的屬性來控制樣式，由于沒有做到結(jié)構(gòu)與表現(xiàn)的分離，所以，不建議使用。只有在樣式規(guī)格較少且只在該元素上使用一次，或者需要臨時修改某個樣式規(guī)則時使用。 2. 內(nèi)部樣式表語法：選擇器樣式屬性:屬性值;內(nèi)部樣式表是將樣式表嵌入到HTML文件的文件頭中的方式。舉例：pcolor:red;舉例演示【實例4-2】內(nèi)部樣式表。注意：行內(nèi)樣式表與內(nèi)部樣式表的引用方法都屬于引用內(nèi)部樣式表，即樣式表規(guī)則的有效范圍只限于該HTML文件，在該文件以外將無法使用。但這也具有一定的局限性，對于一個網(wǎng)站的構(gòu)建，不建議使用這種方式，因為它不能體現(xiàn)CSS代碼的重用優(yōu)勢。3. 鏈接樣式表語法： 鏈接樣式表將

9、一個外部樣式表鏈接到HTML文檔中。鏈接的CSS文件的位置文檔的類型鏈接樣式表舉例演示【實例4-3】鏈接樣式表。 基礎(chǔ)選擇器 1. 標簽選擇器語法：標簽名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;標簽選擇符也稱為類型選擇符，是指用HTML標簽名稱作為選擇器，HTML中的所有標簽都可以作為標簽選擇符。舉例：td font-size: 14px;color: #ff0000;line-height:18px;font-family: 微軟雅黑;2.類選擇器語法：.類名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;類選擇器能夠把相同的元素分類定義成不同的樣式。定義類選擇符

10、時，在自定義類的前面需要加一個英文點號“.”。舉例：定義h3標簽選擇器為“.redtitle”，例如：.redtitle font-size: 20px;color: #ff0000;調(diào)用的方法是通過標簽的class屬性調(diào)用，例如：類選擇器舉例演示【實例4-4】類選擇器的使用。注意：類名的第一個字符不能使用數(shù)字，并且嚴格區(qū)分大小寫，一般采用小寫的英文字符。3. ID選擇器語法：#id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;id選擇器是用來對某個單一元素定義單獨的樣式。id選擇器使用“#”進行標識，后面緊跟id名。舉例：定義h3標簽選擇器為“.redtitle”，例如：#re

11、dtitle font-size: 20px;color: #ff0000;調(diào)用的方法是通過標簽的id屬性調(diào)用，例如：類選擇器舉例演示【實例4-5】id選擇器的使用。4. 標簽指定式選擇器語法： 標簽名.類名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 標簽名#id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;標簽指定選擇器又稱交集選擇器，由兩個選擇器構(gòu)成，其中第一個為標簽選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格。舉例演示【實例4-6】標簽指定式選擇器的使用。5.包含選擇器語法： 選擇器1 選擇器2 屬性1:屬性值1; 屬性2:屬性值2

12、; 屬性3:屬性值3;包含選擇器用來選擇元素或元素組的后代，也稱后代選擇器，其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔。注意中間的空格舉例演示【實例4-7】包含選擇器的使用。6. 群組選擇器語法： 選擇器1，選擇器2 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;群組選擇器是各個選擇器通過逗號”，”連接而成的。注意中間的逗號“，”如果某些選擇器定義的樣式完全相同或部分相同，就可以利用群組選擇器為它們定義相同的CSS樣式。7. 通配符選擇器語法： * 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;通配符選擇器用星形標示號“*”表示，它是所有選擇器中作用

13、范圍最廣的，能匹配頁面中所有的元素。注意星號“*”表示所有元素例如： *margin:0px; padding:0px;設(shè)置所有元素的外邊距margin和內(nèi)邊距padding都為0像素。4CSS3選擇器Part屬性選擇器關(guān)系選擇器鏈接偽類選擇器結(jié)構(gòu)偽類選擇器偽元素選擇器UI元素狀態(tài)偽類選擇器 屬性選擇器屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。包括三類:Eatt=”value”、E att$=”value”、E att*=”value”屬性名稱含義Eatt=”value”選擇名稱為E的標簽，且該標簽定義了att屬性，att屬性值包含前綴為value的子字符串。class屬性以font開頭

14、的h2元素 h2class=font font-family: 微軟雅黑; 例如：舉例演示屬性名稱含義E att$=”value”選擇名稱為E的標簽，且該標簽定義了att屬性，att屬性值包含后綴為value的子字符串。class屬性以title結(jié)尾的所有元素class$=title color: red; 例如：舉例演示屬性名稱含義E att*=”value”選擇名稱為E的標簽，且該標簽定義了att屬性，att屬性值包含value的子字符串。所有href屬性包含www字符串的a元素ahref*=www color: green; 例如：舉例演示 關(guān)系選擇器關(guān)系選擇器主要包含子代選擇器（EF）

15、、相鄰兄弟選擇器（E+F）、普通兄弟選擇器（EF）。屬性名稱含義子代選擇器（EF）選擇所有作為E元素的直接子元素F，對更深一層的元素不起作用，用“”表示。子代選擇器, E元素的直接子元素Fdiva color: red;例如：舉例演示屬性名稱含義兄弟相鄰選擇器（E+F）選擇緊貼在E元素之后的F元素，用“+”表示。選擇相鄰的第一個兄弟元素。相鄰兄弟選擇器，p元素相鄰的第一個兄弟span元素p+spantext-decoration: line-through;例如：舉例演示屬性名稱含義普通兄弟選擇器（EF）選擇E元素之后的所有兄弟元素F，作用于多個元素，用“”隔開。普通兄弟選擇器，p元素所有兄弟

16、span元素pspancolor: green;例如：舉例演示 鏈接偽類選擇器偽類不是真正意義上的類，但它確實作為一個類來使用。當在同一網(wǎng)頁中使用兩種以上不同樣式的超鏈接，就采用偽類與類名或者id相結(jié)合的方式實現(xiàn)。偽類名稱含義a:link未訪問時的超級鏈接的狀態(tài)a:visited訪問后的超級鏈接的狀態(tài)a:hover鼠標經(jīng)過、懸停時超級鏈接的狀態(tài)a:active鼠標單擊不動時超級鏈接的狀態(tài)超鏈接偽類及其含義舉例演示 結(jié)構(gòu)偽類選擇器1.基本的結(jié)構(gòu)性偽類選擇器表達式描述:root將樣式綁定到頁面的根元素中。所謂根元素，是指位于文檔樹中最頂層結(jié)構(gòu)的元素，在HTML頁面中就是指包含著整個頁面的部分。:n

17、ot想對某個結(jié)構(gòu)元素使用樣式，但想排除這個結(jié)構(gòu)元素下的子結(jié)構(gòu)元素，就是用:not偽類。:empty指定當元素內(nèi)容為空白時使用的樣式。:target對頁面中某個target元素指定樣式，該樣式只在用戶點擊了頁面中的鏈接，并且跳轉(zhuǎn)到target元素后生效。表達式描述:root將樣式綁定到頁面的根元素中。所謂根元素，是指位于文檔樹中最頂層結(jié)構(gòu)的元素，在HTML頁面中就是指包含著整個頁面的部分。：root偽類選擇器，使得所有文本為藍色:root color: blue;例如：表達式描述:not相對某個結(jié)構(gòu)元素使用樣式，但想排除這個結(jié)構(gòu)元素下的子結(jié)構(gòu)元素，就是用:not偽類。：not偽類選擇器，body

18、中標簽以外的文本都變成了紅色body *:not(h2)color: red;例如：表達式描述:empty指定當元素內(nèi)容為空白時使用的樣式。:empty偽類選擇器，使得標簽內(nèi)為空的元素背景顏色為紅色li:emptybackground-color: red;例如：舉例演示表達式描述:target對頁面中某個target元素指定樣式，該樣式只在用戶點擊了頁面中的鏈接，并且跳轉(zhuǎn)到target元素后生效。:target偽類選擇器，對某個target元素指定樣式:target background-color: yellow;例如：舉例演示子元素偽類選擇器表達式描述: first-child對父元素中

19、的第一個子元素指定樣式例如p:first-child表示第一個p元素的樣式: last-child對父元素中的最后一個子元素指定樣式例如 p:last-chidl表示倒數(shù)第一個p元素的樣式: only-child當某個父元素中只有一個子元素時使用的樣式: nth-child(n)對指定序號的子元素設(shè)置樣式(正數(shù))，表示第幾個子元素例如：p:nth-child(2) 表示第2個p元素的樣式: nth-last-child(n)對指定序號的子元素設(shè)置樣式(正數(shù)) ，表示倒數(shù)第幾個子元素例如：p:nth-last-child(2)表示倒數(shù)第2個p元素的樣式:nth-child(even)所有正數(shù)第偶

20、數(shù)個子元素，等同于:nth-child(2n):nth-child(odd)所有正數(shù)第奇數(shù)個子元素，等同于:nth-child(2n+1):nth-last-child(even)所有倒數(shù)第偶數(shù)個子元素:nth-last-child(odd)所有倒數(shù)第奇數(shù)個子元素:nth-of-type(n)用于匹配屬于父元素的特定類型的第n個子元素: nth-last-of-type(n)用于匹配屬于父元素的特定類型的倒數(shù)第n個子元素舉例演示01:before偽元素02after偽元素 偽元素選擇器 偽元素選擇器是針對CSS中已定義的偽元素使用的選擇器。CSS中主要使用的偽元素為“:before”偽元素選擇

21、器和“:after”偽元素選擇器。偽元素(雙冒號, 例如:before)，css3中的偽類是（單冒號:before ），通常兩種寫法都可以。 1. :before偽元素選擇器語法： element:before content:文字/url(); :before偽元素選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合“content”屬性來指定要插入的具體內(nèi)容。element表示元素，被選元素位于“:before”之前“ ”中的content屬性用來指定要插入的具體內(nèi)容，該內(nèi)容既可以為文本也可以為圖片，大家還可以根據(jù)其他需要添加相應(yīng)的樣式。 2. :after偽元素選擇器語法： element:

22、after content:文字/url(); :after偽元素選擇器用于在被選元素的內(nèi)容之后插入內(nèi)容，必須配合“content”屬性來指定要插入的具體內(nèi)容。舉例演示 UI（User Interface，用戶界面）元素狀態(tài)偽類選擇器，是指只有當元素處于某種狀態(tài)下時才能使用的樣式，默認狀態(tài)不起作用。不起作用。表達式描述E:hover鼠標指針移動到某個文本框控件上的樣式E:active元素被激活(鼠標在元素上按下還沒有松開)時使用的樣式E:focus元素獲得光標焦點時使用的樣式，主要是在文本框控件獲得焦點并進行文字輸入的時候使用E:enable指定當元素處于可用狀態(tài)時的樣式E:disable指定

23、當元素處于不可用狀態(tài)時的樣式E:read-only指定當元素處于只讀狀態(tài)時的樣式Firefox瀏覽器中要寫成 -moz-read-onlyE:read-write指定當元素處于非只讀狀態(tài)時的樣式Firefox瀏覽器中要寫成：-moz-write-onlyE:checked指定當表單中的radio單選框或checkbox復選框處于選取狀態(tài)時的樣子Firefox瀏覽器中要寫成：-moz-checkedE:default指定當頁面打開時默認處于選區(qū)狀態(tài)的radio或checkbox控件的樣式E:indeterminate指定當頁面打開時，如果一組單選框中任何一個單選框都沒有被設(shè)定為選取狀態(tài)時整組單選

24、框的樣式，如果用戶選取了一個單選框，則該樣式被取消E:selection指定當元素處于選中狀態(tài)時的樣式，這里需要注意的是:在Firefox瀏覽器下使用時，需要寫成-moz-selection的形式舉例演示5CSS的繼承與層疊PartCSS的繼承性 CSS的層疊性例如：bodycolor:red;font-size:20pt;HTML結(jié)構(gòu)文檔：好好學習天天向上在頁面顯示時，body標簽定義文本的顏色為紅色，文字大小為20pt，段落標簽雖然沒有定義樣式，但是里面的文字會繼承body的樣式，最終顯示為紅色，大小為20pt。這就是CSS的繼承性。 CSS的繼承性CSS的繼承性是被包含的子元素將擁有外層

25、元素的某些樣式。舉例演示注意：實際開發(fā)中，通常會對使用較多的字體、文本屬性等網(wǎng)頁中通用的樣式可以使用繼承。所以會在body元素中統(tǒng)一設(shè)置字體、字號、顏色、行距等樣式。并不是所有的屬性都可以繼承，對于元素的布局屬性、盒模型屬性都不能繼承。例如：背景屬性、邊框?qū)傩浴⑼膺吘鄬傩?、?nèi)邊距屬性、定位屬性、布局屬性、元素寬高屬性。例如： bodycolor:red;font-size:30pt;ptext-decoration:underline;spancolor:blue;HTML結(jié)構(gòu)文檔：好好學習天天向上 CSS的層疊性CSS的層疊性是指多種CSS樣式的疊加。權(quán)值計算法繼承樣式的權(quán)重=0分標簽選擇器

26、=1分偽元素或偽對象選擇器=1分類選擇器=10分屬性選擇器=10分ID選擇器=100分行內(nèi)樣式的權(quán)值最高 1000分 !important 的權(quán)值是無窮大處理層疊關(guān)系的使用優(yōu)先級別來判斷.1.當行內(nèi)樣式、內(nèi)部樣式和鏈接樣式同時應(yīng)用于同一個元素，就是使用多重樣式的情況，依據(jù)他們的權(quán)重來判斷。優(yōu)先級如下：鏈接樣式內(nèi)部樣式行內(nèi)樣式。舉例演示6綜合實例Part門戶網(wǎng)站導航設(shè)計 門戶網(wǎng)站導航設(shè)計【演示】通過CSS的樣式表的學習，運用CSS標簽選擇器、類選擇器、id選擇器，以及結(jié)構(gòu)選擇設(shè)計一個門戶網(wǎng)站的導航菜單。實現(xiàn)步驟 1 HTML結(jié)構(gòu)代碼設(shè)計 2 CSS樣式設(shè)計任務(wù)實施門戶網(wǎng)站導航設(shè)計1 HTML結(jié)構(gòu)

27、代碼設(shè)計舉例演示任務(wù)實施門戶網(wǎng)站導航設(shè)計2 CSS樣式設(shè)計舉例演示7任務(wù)實施Part使用CSS實現(xiàn)門戶網(wǎng)站導航【演示】結(jié)合CSS的繼承性、層疊性編寫網(wǎng)站的基礎(chǔ)樣式表，并實現(xiàn)網(wǎng)站頭部的頁面效果。實現(xiàn)步驟 1 任務(wù)分析 2 編寫頁面通用樣式 3 編寫頁面通用樣式 4 編寫nav區(qū)域與鏈接樣式任務(wù)實施使用CSS實現(xiàn)門戶網(wǎng)站導航1 任務(wù)分析區(qū)域的HTML代碼如下門戶首頁學校概況組織機構(gòu)招生就業(yè)科學研究招聘信息區(qū)域的HTML代碼，完成項目要分為以下幾步第一步：使用通配符編寫通用樣式，統(tǒng)一頁面中所有的文本樣式，統(tǒng)一頁面中的內(nèi)外邊距與邊框，統(tǒng)一樣式表的風格。第二步：根據(jù)需要可以在標簽內(nèi)添加2個標簽，第1個來放置整個導航信息，第2個來實現(xiàn)超級鏈接的頁面效果。第三步：設(shè)置nav區(qū)域中的超級鏈接的樣式。任務(wù)實施使用CSS實現(xiàn)門戶網(wǎng)站導航2 編寫頁面通用樣式舉例演示任務(wù)實施使用CSS實現(xiàn)門戶網(wǎng)站導航3 添加div并編寫樣式舉例演示任務(wù)實施使用CSS實現(xiàn)門戶網(wǎng)站導航4 編寫nav區(qū)域與鏈接樣式舉例演示8任務(wù)拓展Part實際元素與偽元素的轉(zhuǎn)化瀏覽器的兼容性處理【演示】項目中，header中添加了標簽。#headerbottom position: absolute;bottom: 0;left