Click here to
get yummy grain feed
delivered to your RSS oven

rss

  • Businesswing Design BLOG
  • Assist to join the global market.
3-6-2 CSS宣告與檔案引用

Date:三月 9, 2010 | Author:bwingnet

當您設計PHP網頁時,可能需參考其他網頁的風格,這時,您就需要瞭解其他網頁內樣式表。若該網頁的樣式表是寫在網頁內,而非外部檔案,您可參考網頁裡的<style type="text/css"><style>這一個區塊內容。可是,我要如何新增修改呢?

首先,我們來看一下樣式要如何定義:

網頁標籤或自訂id、class名稱 { 屬性名稱 : 設定值 }

我們前一例中的樣式:font { font-size:9pt }。就是指將font這一個網頁標籤裡的font-size屬性設定為9pt。也就是將使用<font>標籤的文字的字型大小設定為9pt。所以,只要我們知道網頁標籤與他的屬性,就可以設定他的樣式。

如果在其他網頁內看不到樣式的宣告,那是否代表這個網頁沒有使用樣式表呢?那可不一定!樣式表除了可寫在網頁內外,也可以將樣式表儲存成獨立的css檔案(副檔名為css)。

寫成獨立的檔案有何好處呢?假設您有十個網頁的字型大小要設定為9pt,五個網頁字型大小要設定為6pt,請問您會怎麼做?寫在網頁內?假如有一天,老闆或老師或網友們覺得字太小了,希望您將9pt改為15pt,6pt改為12pt,那您是不是要一頁一頁的改?樣式表寫成獨立的檔案,好處就是維護方便,您只要修改一個css檔案,所有網頁上已定義的樣式就會全部重新定義,不需一個一個改。

css檔案的編碼必須與網頁的編碼相同,換句話說,網頁若是UTF-8編碼,css檔的編碼也必須是UTF-8。那要如何引用獨立的css檔案呢?引用css檔案有兩種方法,一種是利用「超連結」的方式,另外一種是「匯入」的方式。讓我們來瞧瞧這兩種方式的差異。光碟片「3」資料夾內有一個「font.css」檔案,這就是我們要引用的樣式表檔案,我們可以來看看這個檔案的內容,因為想要引用這個css檔的網頁編碼是utf8,所以css檔案內容編碼也必須是utf8。

font { font-size:9pt }

css檔案內請不用加入<style type="text/css"></style>這樣的標籤,您只要把您想執行的樣式寫入即可。

若以「超連結」的方式,網頁會是這樣:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超連結方式呼叫css</title>
<link rel=stylesheet  type="text/css"  href="font.css">
</head><body> 
<table width="40%" border="1"><tr>
<td><font>PHP圖書</font></td></tr>
<tr><td><font>歡迎來到php6的世界</font><br>
沒有font標籤的文字會如何顯示呢?</td></tr>
</table></body></html>

若以「匯入」的方式,網頁會是這樣

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>網頁裡顯示文字css</title>
<style type="text/css">
@import url(font.css);
</style>
</head><body> 
<table width="40%" border="1"><tr>
<td><font>PHP圖書</font></td></tr>
<tr><td><font>歡迎來到php6的世界</font><br>
沒有font標籤的文字會如何顯示呢?</td></tr>
</table></body></html>

您可以依照您的習慣,使用超連結或匯入的方式引用css檔案。而當您參考其他網頁時,您就可以找到該網頁所引用的樣式。

葉建榮 jiannrong@gmail.com

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

  Categories: 網頁程式PHP, 網頁設計 | Tags: , ,
    

Leave a Reply

     top