武林網(www.companysz.com)文章簡介:初學CSS的基礎教程:在網頁中使用CSS.
教程說明:
本教程系個人抽工作之余所作,按照我個人的想法我是想將一些基本的東西以較為輕松的語言描述出來,做成一個系列教程(這需要時間,我會努力抽空更新的),爭取讓每一個看這個東東的人都能有所收獲,但是因作者本人水平有限,不妥當之處敬請留言批評指正。
------------------------------------------------------分割線----------------------------------------------------------
1、正式開始學習之前的幾句啰嗦話:
2、本小結您將學習的內容:
-------------------------------------------------華麗的分割線------------------------------------------------------
第一個問題:CSS到底是什么東東,有何作用?
在解決這個問題之前,我們先來看看網站中一個頁面的基本組成:通常,一個頁面(前臺)由一下三個部分組成:結構,表現和行為。
注:
注:上面的代碼如果看不懂也沒關系,后面我們會深入的講解。
---------------------------------------------更加華麗的分割線--------------------------------------------------
第二個問題:在網頁制作中運用CSS技術的幾種方法:
•內嵌樣式
•內部樣式
•外部樣式
Inline Style是寫在標簽里面的,內嵌樣式只對所在的標簽有效。
看如下例子:
<html>
<head><title>內嵌式樣式(Inline Style)</title></head>
<body>
<P style="font-size:20pt; color:red">這個內嵌樣式(Inline Style)定義段落
里面的文字是20pt字體,字體顏色是紅色。</p>
<P>這段文字沒有使用內嵌樣式。</p>
</body>
</html>
本例在瀏覽器中顯示效果如下:
如上圖,我們可以看到,這種方式使用CSS是將style作為HTML標簽的一個屬性加入的,也就是說,它還是沒有真正的把結構和表現分開,所以,這種方法用的比較少。下面我們來看第二種方法:
內部樣式是寫在網頁的<head></head>標簽對中的,內部樣式只對當前運用該樣式的網頁有效,在網頁中使用內部樣式的基本語法如下:
注:上圖綠色部分就是CSS代碼,注意它是如何加入到頁面中的,至于具體這些CSS代碼如何書寫,這個是我們后面要學習的內容,現在可以先不管它。下面我們來看第三種方法:
如果很多網頁需要用到同樣的樣式(回想我們以前在DREAMWEAVER中學習的模板),用什么方法呢?我們可以將樣式寫在一個以.css為擴展名的文件中,然后在每個需要用到這些樣式的網頁中引用該文件就可以了,這種方法就是外部樣式表方法。那么,我們如何才能在一個頁面中引用事先準備好的樣式表文件呢?通常我們有2種方法,一種稱為“鏈接”,另一種稱為“導入”,這里我們先介紹“鏈接”的方法,另一種在后面的學習中再去理會。在一個頁面中“鏈接”一個樣式表文件的語法格式如下:
注意:上圖中的URL是指的被引用的CSS文件的URL,而且LINK語句還有別的屬性,這里暫時先不加以說明,后面我們學習到的時候再詳細討論。
補充說明:被引用的CSS樣式文件中應該只有基本的CSS語句,不要其他任何東東。例如我們要實現和第一個例子一樣的效果,我們可以新建一個記事本文件,輸入如下代碼:p{font-size:20pt;color:red}然后將這個文件的擴展名改為"css",這樣就做好這個樣式文件了。至于這條語句究竟是什么意思,相信聰明的你已經猜到了,對的,沒錯,它的意思是將所有的P標簽(段落)中的文本外觀變為字號:20PT,顏色:紅色,當然了,如果實在不明白也沒關系,后面我們會一一介紹。
---------------------------------------------本小節最后一條分割線--------------------------------------------------
3種樣式表使用方法對比:
使用外部(Extenal)樣式表,相對于內嵌(Inline)和內部式(Internal)的,有以下優點 :
a.樣式代碼可以復用。一個外部CSS文件,可以被很多網頁共用。
b.便于修改。如果要修改樣式,只需要修改CSS文件,而不需要修改每個網頁 。
c.提高網頁顯示的速度。如果樣式寫在網頁里 ,會降低網頁顯示的速度,如果網頁引用一個CSS文件,這個CSS文件多半已經在緩存區(其它網頁早已經引用過它),網頁顯示的速度就比較快。
---------------------------------------------SORRY,還有一條分割線,哇哈哈哈-------------------------------
課外練習:
將上面介紹的幾種方法逐一實現,理解每種方法的原理,腦袋里面多問自己幾個問題,想想每種方法各自有什么優缺點。
|
新聞熱點
疑難解答