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

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

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

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

•內(nèi)嵌樣式

•內(nèi)部樣式

•外部樣式

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

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

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

看如下例子：

＜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標簽的一個屬性加入的，也就是說，它還是沒有真正的把結(jié)構(gòu)和表現(xiàn)分開，所以，這種方法用的比較少。下面我們來看第二種方法：

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

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

CSS

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

3、外部樣式(External Style Sheet)

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

CSS

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

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

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

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

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)頁顯示的速度就比較快。

課外練習：

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

本新聞共2頁,當前在第2頁 1 2

【收藏】【打印】【進入論壇】

相關(guān)文章：

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