商務(wù)網(wǎng)頁第12課課件

1、第4章 CSS網(wǎng)頁式樣制作技術(shù)4.1 CSS基礎(chǔ)知識(shí)CSS翻譯成中文是層疊樣式表或樣式表，這么說大家可能不太容易理解。其實(shí)，CSS就是顯示樣式，專門用來設(shè)置各類元素的顯示效果。我們把元素的顯示效果事先采用CSS技術(shù)封裝成一個(gè)樣式，在主HTML文檔中調(diào)用這個(gè)樣式，就能得到這個(gè)事先設(shè)定的顯示效果。4.1.1 CSS的作用CSS是增強(qiáng)網(wǎng)頁顯示效果的超文本標(biāo)記語言，能夠起到代替和增強(qiáng)標(biāo)簽屬性的作用。CSS的突出特點(diǎn)是：簡(jiǎn)潔、易用、高效，可以重復(fù)使用，也可以繼承使用。傳統(tǒng)HTML代碼在設(shè)置網(wǎng)頁時(shí)，如果一個(gè)網(wǎng)頁具有很多個(gè)標(biāo)簽及實(shí)例，要求統(tǒng)一設(shè)置為宋體、字號(hào)大小為16px（像素）、藍(lán)色、加粗，則必須對(duì)每一個(gè)

2、標(biāo)簽的相關(guān)屬性做出同樣的設(shè)置，工作煩瑣效率低，代碼的可讀性差。如果使用CSS樣式表，就只需要設(shè)定一次就好了。而且還能在本網(wǎng)站的其他網(wǎng)頁中引用，大大提高了工作效率，代碼的可讀性也好。如果需要將字體顏色改為綠色、字號(hào)大小改為12px，則修改一次CSS規(guī)則即可，非常高效。CSS示例 h4 font-family:宋體; color: #0000CC; font-size:18px 第一個(gè)標(biāo)題h4實(shí)例 第二個(gè)標(biāo)題h4實(shí)例 第三個(gè)標(biāo)題h4實(shí)例 第四個(gè)標(biāo)題h4實(shí)例 第五個(gè)標(biāo)題h4實(shí)例上例中，標(biāo)簽與中的內(nèi)容就是一個(gè)具體的CSS樣式表實(shí)例，描述了標(biāo)題4的顯示屬性。然后，在網(wǎng)頁文檔體中只需要正常引用標(biāo)題4標(biāo)簽即

3、可，不必重復(fù)設(shè)置各個(gè)標(biāo)題4的顯示屬性。如果需要改變“標(biāo)題4”的外觀，例如把字號(hào)大小改為12px，字體顏色改為綠色，則只需要改動(dòng)CSS樣式表的相應(yīng)內(nèi)容即可。改動(dòng)部分如下： h4font:宋體; color:”green”; font-size:12px4.1.2 CSS的構(gòu)成規(guī)則CSS的樣式結(jié)構(gòu)比較簡(jiǎn)單易懂，具有模塊化的特點(diǎn)，由“選擇符”和“聲明”兩部分組成.其中，選擇符是CSS樣式必須定義的，相當(dāng)于樣式的名稱。網(wǎng)頁元素就是通過這個(gè)選擇符來確定其顯示樣式的，選擇符將在本章4.1.4小節(jié)中詳細(xì)介紹。聲明就是具體的顯示規(guī)則，通過設(shè)定各個(gè)屬性值，達(dá)到需要的顯示效果。為了養(yǎng)成良好的書寫習(xí)慣，便于閱讀，通

4、常采用如下書寫方式來書寫CSS代碼：h4 font-family:宋體； color:blue; font-size:16px； 4.1.3 CSS樣式類別CSS是配合HTML網(wǎng)頁文件使用的，如果沒有HTML，則CSS沒有任何作用。HTML使用CSS樣式時(shí)主要分以下幾種情況：內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式（鏈接樣式、導(dǎo)入樣式）。1內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式，也稱為“行內(nèi)樣式”，就是在HTML的標(biāo)簽中，直接定義并立即使用CSS樣式的應(yīng)用方式。內(nèi)聯(lián)樣式對(duì)改進(jìn)網(wǎng)頁制作效率方面幾乎沒有什么作用，所以很少使用。定義及引用內(nèi)聯(lián)樣式的方法是非常特殊的，需要通過“style”來定義，設(shè)置方法為這種應(yīng)用模式幾乎沒有對(duì)HTM

5、L文檔有任何改進(jìn)，文檔依舊龐大、煩瑣，易讀性差。只是使用了CSS規(guī)則讓功能增強(qiáng)一些，不建議使用。CSS行內(nèi)樣式示例 CSS標(biāo)題h4實(shí)例 2內(nèi)部樣式內(nèi)部樣式，也稱為“內(nèi)嵌樣式”，是指將CSS代碼內(nèi)嵌在HTML文檔頭中的應(yīng)用方式。該方式能夠簡(jiǎn)化HTML的文檔代碼，提高HTML的制作效率。實(shí)現(xiàn)方法是將CSS代碼封裝在和之間，形成一個(gè)CSS代碼模塊，整體嵌入在HTML文檔的文檔頭中，也就是嵌入在標(biāo)簽與之間。定義內(nèi)部樣式，需要使用標(biāo)簽及相關(guān)屬性，設(shè)置方法為：選擇符名屬性1:屬性1的值;屬性2:屬性2的值;內(nèi)部樣式主要用于CSS樣式內(nèi)容比較簡(jiǎn)單、內(nèi)容較少的情況。實(shí)際的應(yīng)用場(chǎng)景較少，多用于教學(xué)、演示等。引用

6、內(nèi)部樣式（包括外部樣式），就是指定HTML中的元素套用哪一個(gè)CSS樣式，并通過選定樣式選擇符（在下小節(jié)中講解）來指定。引用內(nèi)部樣式選擇符的方法為對(duì)于標(biāo)簽選擇符，HTML中會(huì)根據(jù)標(biāo)簽自動(dòng)套用CSS中定義的該標(biāo)簽選擇符，無須額外編寫任何引用標(biāo)簽選擇符的代碼，最簡(jiǎn)單；對(duì)于類選擇符，需要使用class=類選擇符名來指定，設(shè)置方法為對(duì)于ID選擇符，需要使用id=ID選擇符名來指定，設(shè)置方法為 CSS內(nèi)嵌式樣示例 /* 定義CSS開始 */ h4 /* 定義h4選擇符 */ font-family:宋體; /* 聲明 */ color: #000099; /* 聲明 */ font-size:25px /

7、* 聲明 */ 有CSS選擇符的標(biāo)題h4實(shí)例 沒有CSS選擇符的標(biāo)題h3實(shí)例3外部樣式外部樣式是指把CSS代碼存儲(chǔ)在HTML的文件外部，以“.css”文件格式獨(dú)立存儲(chǔ)的應(yīng)用方式。當(dāng)HTML需要引用CSS樣式時(shí)，需要以鏈接或者導(dǎo)入的方式將CSS文件中定義的樣式全部集成到HTML的文檔頭中，就像在一個(gè)HTML文件中一樣。后續(xù)的引用方法與內(nèi)部樣式的引用方法相同。外部樣式又分為外部鏈接樣式和外部導(dǎo)入樣式兩種類型。（1）外部鏈接樣式外部鏈接樣式是最常用、最實(shí)用的一種CSS使用方法，將HTML網(wǎng)頁內(nèi)容和CSS顯示規(guī)則分離，形成“一個(gè)網(wǎng)頁文件+一個(gè)CSS文件（如果必要，可以形成多個(gè)CSS文件）”的形式。這種

8、分離非常有利于項(xiàng)目人員之間的分工協(xié)作，代碼編寫人員側(cè)重于網(wǎng)頁功能的實(shí)現(xiàn)，美工人員側(cè)重于頁面的美化設(shè)計(jì)，工作效率大大提高。而且，這種分離使得HTML代碼極其精煉，易于項(xiàng)目后期的升級(jí)與維護(hù)。定義外部鏈接樣式分兩部分：一部分是在HTML文檔頭中做外部CSS樣式的鏈接聲明，明確需要連接的外部樣式文件（.css源文件）的名稱及其存放路徑；另一部分是在CSS源文件中定義顯示樣式（定義選擇符及其聲明）。CSS源文件通常是由多個(gè)選擇符及其聲明組成的，數(shù)量沒有限制，需要多少就定義多少。在CSS源文件中編寫CSS樣式的語法規(guī)則與內(nèi)部樣式的編寫規(guī)則是一樣的，等同于把內(nèi)部樣式中選擇符及聲明的內(nèi)容統(tǒng)一打包在CSS源文件

9、中。定義與引用外部式樣，分以下3個(gè)步驟：在HTML的頭文檔中做外部鏈接樣式的聲明，需要使用標(biāo)簽及其相關(guān)屬性。設(shè)置方法為其中，標(biāo)簽的主要屬性如下表：屬性值描述hrefURL規(guī)定被鏈接文檔的位置relAlternateAuthorHelpIconLicenceNextPingbackPrefetchPrevSearchSidebarStylesheettag規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系。通常需要設(shè)置為“Stylesheet”typeMIME_type規(guī)定被鏈接文檔的MIME類型。最常用的值是“text/css”在CSS源文件中定義選擇符及其聲明，完成外部樣式的定義工作。在CSS源文件中定義選

10、擇符及其聲明，設(shè)置方法為：選擇符名屬性1:屬性1的值;屬性2:屬性2的值;在HTMl中引用選擇符在HTML文檔體中引用外部樣式中的選擇符與引用內(nèi)部樣式中的方法是一樣的。應(yīng)用外部鏈接樣式HTML代碼示例如下：應(yīng)用外部樣式CSS代碼示例如下（存儲(chǔ)在CSS_example.css文件中）：h4 /* 定義h4選擇符 */ font-family:宋體; /* 聲明 */ color: #000099; /* 聲明 */ font-size:25px /* 聲明 */ CSS外部鏈接應(yīng)用示例 有CSS選擇符的標(biāo)題h4實(shí)例 沒有CSS選擇符的標(biāo)題h3實(shí)例 上述示例代碼中，文檔頭中聲明了“CSS_exam

11、ple.css”文件，然后在HTML代碼就能引用“CSS_example.css”中定義的CSS樣式了。（2）外部導(dǎo)入樣式外部導(dǎo)入樣式與外部鏈接樣式的基本作用是相同的，CSS源文件的代碼規(guī)則也完全相同，只是引用CSS代碼文件的技術(shù)實(shí)現(xiàn)方式不同：一種是外部鏈接方式，一種是外部導(dǎo)入方式。但外部導(dǎo)入樣式也有其優(yōu)點(diǎn)，不僅可以導(dǎo)入到HTML中，也可以導(dǎo)入到CSS樣式中。外部導(dǎo)入樣式特別適用于對(duì)IO訪問要求高、網(wǎng)頁響應(yīng)速度快的場(chǎng)景。定義并引用外部導(dǎo)入樣式，需要使用“import”來實(shí)現(xiàn)，導(dǎo)入到文件頭中的與之間。也可以理解為，把內(nèi)部樣式中的定義中的“選擇符”和“聲明”部分打包成CSS源文件，用導(dǎo)入的方法將其導(dǎo)回來。定義和引用外部導(dǎo)入樣式與定義和引用外部鏈接樣式類似，同樣分兩部分：一部分是在HTML文檔頭中做外部導(dǎo)入樣式的聲明，另一部分是在CSS源文件中定義選擇符及其聲明。在HTML文檔頭中做外部導(dǎo)入樣式的聲明，需要使用“import”及其相關(guān)屬性。設(shè)置方法為： import url(CSS文件名);需要注意的是，結(jié)尾必須以分號(hào)“;”結(jié)尾，與聲明外部鏈接樣式不同，這是為什么呢？因?yàn)橥獠挎溄訕邮绞褂玫氖菢?biāo)簽,而外部導(dǎo)入樣式使用的是一個(gè)特殊的功能語句。在CSS文件中定義選擇符及其聲明內(nèi)容。在CSS文件中定義外部導(dǎo)入樣式中選擇符及其聲明的方法與外部鏈接樣式的方法完全一樣。設(shè)置