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

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

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

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

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

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

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

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

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

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

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

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