| |
第二個(gè)問題：在網(wǎng)頁(yè)制作中運(yùn)用CSS技術(shù)的幾種方法：
CSS按其類型可以分為3類：
•內(nèi)嵌樣式
•內(nèi)部樣式
•外部樣式
這三類也分別代表了運(yùn)用CSS的3種不同方法，首先來(lái)看第一種方法：
1、內(nèi)嵌樣式(Inline Style)
Inline Style是寫在標(biāo)簽里面的，內(nèi)嵌樣式只對(duì)所在的標(biāo)簽有效。
看如下例子：
＜html>
＜head>＜title>內(nèi)嵌式樣式(Inline Style)＜/title>＜/head>
＜body>
＜P style="font-size:20pt; color:red">這個(gè)內(nèi)嵌樣式(Inline Style)定義段落
里面的文字是20pt字體，字體顏色是紅色。＜/p>
＜P>這段文字沒有使用內(nèi)嵌樣式。＜/p>
＜/body>
＜/html>
本例在瀏覽器中顯示效果如下：
如上圖，我們可以看到，這種方式使用CSS是將style作為HTML標(biāo)簽的一個(gè)屬性加入的，也就是說(shuō)，它還是沒有真正的把結(jié)構(gòu)和表現(xiàn)分開，所以，這種方法用的比較少。下面我們來(lái)看第二種方法：
2、內(nèi)部樣式(Internal Style Sheet)
內(nèi)部樣式是寫在網(wǎng)頁(yè)的＜head>＜/head>標(biāo)簽對(duì)中的，內(nèi)部樣式只對(duì)當(dāng)前運(yùn)用該樣式的網(wǎng)頁(yè)有效，在網(wǎng)頁(yè)中使用內(nèi)部樣式的基本語(yǔ)法如下：
注：上圖綠色部分就是CSS代碼，注意它是如何加入到頁(yè)面中的，至于具體這些CSS代碼如何書寫，這個(gè)是我們后面要學(xué)習(xí)的內(nèi)容，現(xiàn)在可以先不管它。下面我們來(lái)看第三種方法：
3、外部樣式(External Style Sheet)
如果很多網(wǎng)頁(yè)需要用到同樣的樣式（回想我們以前在DREAMWEAVER中學(xué)習(xí)的模板），用什么方法呢？我們可以將樣式寫在一個(gè)以.css為擴(kuò)展名的文件中，然后在每個(gè)需要用到這些樣式的網(wǎng)頁(yè)中引用該文件就可以了，這種方法就是外部樣式表方法。那么，我們?nèi)绾尾拍茉谝粋�(gè)頁(yè)面中引用事先準(zhǔn)備好的樣式表文件呢？通常我們有2種方法，一種稱為“鏈接”，另一種稱為“導(dǎo)入”，這里我們先介紹“鏈接”的方法，另一種在后面的學(xué)習(xí)中再去理會(huì)。在一個(gè)頁(yè)面中“鏈接”一個(gè)樣式表文件的語(yǔ)法格式如下：
注意：上圖中的URL是指的被引用的CSS文件的URL，而且LINK語(yǔ)句還有別的屬性，這里暫時(shí)先不加以說(shuō)明，后面我們學(xué)習(xí)到的時(shí)候再詳細(xì)討論。
補(bǔ)充說(shuō)明：被引用的CSS樣式文件中應(yīng)該只有基本的CSS語(yǔ)句，不要其他任何東東。例如我們要實(shí)現(xiàn)和第一個(gè)例子一樣的效果，我們可以新建一個(gè)記事本文件，輸入如下代碼：p{font-size:20pt;color:red}然后將這個(gè)文件的擴(kuò)展名改為"css"，這樣就做好這個(gè)樣式文件了。至于這條語(yǔ)句究竟是什么意思，相信聰明的你已經(jīng)猜到了，對(duì)的，沒錯(cuò)，它的意思是將所有的P標(biāo)簽（段落）中的文本外觀變?yōu)樽痔?hào)：20PT，顏色：紅色，當(dāng)然了，如果實(shí)在不明白也沒關(guān)系，后面我們會(huì)一一介紹。
3種樣式表使用方法對(duì)比：
使用外部(Extenal)樣式表，相對(duì)于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點(diǎn) ：
a.樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁(yè)共用。
b.便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁(yè) 。
c.提高網(wǎng)頁(yè)顯示的速度。如果樣式寫在網(wǎng)頁(yè)里 ，會(huì)降低網(wǎng)頁(yè)顯示的速度，如果網(wǎng)頁(yè)引用一個(gè)CSS文件，這個(gè)CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁(yè)早已經(jīng)引用過它)，網(wǎng)頁(yè)顯示的速度就比較快。
課外練習(xí)：
將上面介紹的幾種方法逐一實(shí)現(xiàn)，理解每種方法的原理，腦袋里面多問自己幾個(gè)問題，想想每種方法各自有什么優(yōu)缺點(diǎn)。本新聞共 2頁(yè),當(dāng)前在第 2頁(yè) 1 2 |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
