當(dāng)前位置 : 首頁>軟件學(xué)院>程序開發(fā)>CSS>正文

初學(xué)CSS新手教程:在網(wǎng)頁中使用CSS

http://m.yibo1263.com　2009-12-5 11:12:31 　來源:東北IT網(wǎng) 　編輯:葉子

第二個問題：在網(wǎng)頁制作中運(yùn)用CSS技術(shù)的幾種方法：

CSS按其類型可以分為3類：

•內(nèi)嵌樣式

•內(nèi)部樣式

•外部樣式

這三類也分別代表了運(yùn)用CSS的3種不同方法，首先來看第一種方法：

1、內(nèi)嵌樣式(Inline Style)

Inline Style是寫在標(biāo)簽里面的，內(nèi)嵌樣式只對所在的標(biāo)簽有效。

看如下例子：

＜html>
＜head>＜title>內(nèi)嵌式樣式(Inline Style)＜/title>＜/head>
＜body>
＜P style="font-size:20pt; color:red">這個內(nèi)嵌樣式(Inline Style)定義段落
里面的文字是20pt字體，字體顏色是紅色。＜/p>
＜P>這段文字沒有使用內(nèi)嵌樣式。＜/p>
＜/body>
＜/html>

本例在瀏覽器中顯示效果如下：

CSS

如上圖，我們可以看到，這種方式使用CSS是將style作為HTML標(biāo)簽的一個屬性加入的，也就是說，它還是沒有真正的把結(jié)構(gòu)和表現(xiàn)分開，所以，這種方法用的比較少。下面我們來看第二種方法：

2、內(nèi)部樣式(Internal Style Sheet)

內(nèi)部樣式是寫在網(wǎng)頁的＜head>＜/head>標(biāo)簽對中的，內(nèi)部樣式只對當(dāng)前運(yùn)用該樣式的網(wǎng)頁有效，在網(wǎng)頁中使用內(nèi)部樣式的基本語法如下：

CSS

注：上圖綠色部分就是CSS代碼，注意它是如何加入到頁面中的，至于具體這些CSS代碼如何書寫，這個是我們后面要學(xué)習(xí)的內(nèi)容，現(xiàn)在可以先不管它。下面我們來看第三種方法：

3、外部樣式(External Style Sheet)

如果很多網(wǎng)頁需要用到同樣的樣式（回想我們以前在DREAMWEAVER中學(xué)習(xí)的模板），用什么方法呢？我們可以將樣式寫在一個以.css為擴(kuò)展名的文件中，然后在每個需要用到這些樣式的網(wǎng)頁中引用該文件就可以了，這種方法就是外部樣式表方法。那么，我們?nèi)绾尾拍茉谝粋€頁面中引用事先準(zhǔn)備好的樣式表文件呢？通常我們有2種方法，一種稱為“鏈接”，另一種稱為“導(dǎo)入”，這里我們先介紹“鏈接”的方法，另一種在后面的學(xué)習(xí)中再去理會。在一個頁面中“鏈接”一個樣式表文件的語法格式如下：

CSS

注意：上圖中的URL是指的被引用的CSS文件的URL，而且LINK語句還有別的屬性，這里暫時先不加以說明，后面我們學(xué)習(xí)到的時候再詳細(xì)討論。

補(bǔ)充說明：被引用的CSS樣式文件中應(yīng)該只有基本的CSS語句，不要其他任何東東。例如我們要實(shí)現(xiàn)和第一個例子一樣的效果，我們可以新建一個記事本文件，輸入如下代碼：p{font-size:20pt;color:red}然后將這個文件的擴(kuò)展名改為"css"，這樣就做好這個樣式文件了。至于這條語句究竟是什么意思，相信聰明的你已經(jīng)猜到了，對的，沒錯，它的意思是將所有的P標(biāo)簽（段落）中的文本外觀變?yōu)樽痔枺?0PT，顏色：紅色，當(dāng)然了，如果實(shí)在不明白也沒關(guān)系，后面我們會一一介紹。

3種樣式表使用方法對比：

使用外部(Extenal)樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點(diǎn) ：

a.樣式代碼可以復(fù)用。一個外部CSS文件，可以被很多網(wǎng)頁共用。

b.便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁。

c.提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度就比較快。

課外練習(xí)：

將上面介紹的幾種方法逐一實(shí)現(xiàn)，理解每種方法的原理，腦袋里面多問自己幾個問題，想想每種方法各自有什么優(yōu)缺點(diǎn)。

本新聞共2頁,當(dāng)前在第2頁 1 2

【收藏】【打印】【進(jìn)入論壇】

相關(guān)文章：

亚洲AV无码乱码在线观看不卡|最新大伊香蕉精品视频在线|亚洲不卡av一区二区|国产美女无遮挡免费