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

rss

  • Businesswing Design BLOG
  • Assist to join the global market.
3-6-3如何定義不同的樣式

Date:三月 9, 2010 | Author:bwingnet

當我們在定義樣式時,除了網頁標籤外,我們還可自訂class或id名稱,而這兩者有何不同呢?

有些當我們在設定樣式時,有些標籤可能會有不同的樣式設定,例如前面我們提到,可能在一篇文章裡,我們就需要字型15pt與12pt,兩種字型也有不同的顏色,那我們該怎麼設定呢?class與id可以幫助您做到這一件事情。

樣式以class方式宣告與使用

當我們要使用class方式宣告樣式,我們得在樣式名稱前面加上句點(.),例如以下的網頁:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>使用class1</title>
<style type="text/css">
.normalfont{font-size: 12pt; color: #0000ff}
.largefont {font-size: 15pt;color: #d77c1a}
</style>
</head><body> 
<font class="normalfont">PHP圖書</font><br>
<font class="largefont">歡迎來到php6的世界</font>
</body></html>

如此這兩段同用<font>標籤的文字就會套用不同的樣式。

+Read more

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: , , ,
        
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)。

+Read more

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: , ,
        
3-6-1 CSS用途

Date:三月 8, 2010 | Author:bwingnet

前半章的練習裡,您看到了PHP網頁內有一組標籤為< ? ?>,這是PHP所使用的標籤,代表這樣的的語法會先由Web Server先執行分析後完這一個標籤區塊後,再將資料送到瀏覽器上顯示。除了< ? ?>區塊外,其他的<>代表什麼意思?

<>代表的是網頁的標籤,網頁就是由這些標籤組合起來的,透過瀏覽器的解釋,就可以透過瀏覽器呈現出來了。一個網頁基本上的結構如下:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>網頁的主題</title>
</head><body>
在瀏覽器上呈現的部分
</body></html>

php_ch3-14【圖14 網頁的基本架構】

+Read more

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: , , ,
         top