CSS « 香港網頁開發網誌

CSS 的 overflow 屬性

阿恆於 2009 年 06 月 05 日 15:38 發表 -

從 DOM 技術的角度看，網頁中每一件物件都是「箱」狀的，一段文字、一幅圖像、一個連結，它們的長度、闊度、位置等等都可以由 CSS 控制，若果你沒有設定箱子的大小，它會隨著內容的多寡而自行調整，確保容納並顯示所有內容，但若果箱子的大小被限制了，卻又無法容納所有內容的時候，這時便是 CSS 的 overflow 屬性發揮作用的時候。

CSS Tricks 網站上 Chris Coyier 有一篇文章介紹 CSS 的 overflow 屬性，文章說，Overflow 的值可以是：visible (預設)、hidden、scroll 及 auto，它還有兩個「姊妹」屬性 overflow-x 及 overflow-y，但不是所有瀏覽器都支援。繼續閱讀 »

20 個帶領 CSS 成為主流技術的網站

阿恆於 2009 年 03 月 24 日 11:00 發表 -

未有迴響
分類: CSS

你對那些研究 CSS 的網站印象最深刻？Tim Wright 在 SitePoint 網站列舉 20 個推動 CSS 成為主流技術的網站，Tim 把這份名單分為「明顯」和「不那麼明顯」兩部份，前者是一些大部分人馬上想到的網站，遺漏了任何一個都可能會引發一場論戰；後者則包含一些我們可能會忽略，但是對推動 CSS 有重大貢獻的網站。

開始編製這份名單的時候，Tim 認為很多人都推動過 CSS 的發展，這份名單應該不難製作，但隨著他明白他要列舉的是網站，而非背後推動的人，而研究 CSS 技術的網站多如恆河沙數，無論如何，他還是製作了一份很值得參考的 CSS 網站名單。繼續閱讀 »

為超連結加上有意義的圖示

阿恆於 2009 年 01 月 06 日 15:12 發表 -

未有迴響
分類: CSS, JavaScript

正當你在網上愉快地瀏覽著，按了一下超連結後，瀏覽器突然跳出一個視窗，詢問你是否要儲存一個壓縮檔案，這是多麼不爽的事！若果你的訪客一早知道這個超連結會開啟一個壓縮檔案（你當然有很好的理由送出一個壓縮檔案，例如這是一個軟件包之類），他們的感受會好得多，也可以讓他們自行決定是否開啟，或者什麼時候開啟。傳統的作法是在超連結後面加上一個檔案類型的提示，這可以是一句文字，也可以是一個小圖示，但要把所有這類型的超連結加上提示，除了手動以外，有沒有更方便快捷又不會出錯的方法？Toby Somerville 在 SitePoint 有一篇教學文件介紹兩個作法。

方法一：使用 CSS3 屬性選擇器

這是一個純 CSS 的作法，但必須在支援 CSS3 的瀏覽器才適用，所有優秀的瀏覽器都支援這個作法，包括 Firefox、Safari 和 Opera，以下是一個範例：繼續閱讀 »

CSS 技巧 ── 絕對位置、相對位置

阿恆於 2007 年 07 月 27 日 16:15 發表 -

未有迴響
分類: CSS

若果你要做一個網頁，左邊是一個固定寬度的選單，右邊是一個佔用所有餘下空間的主內容，兩邊的長度都剛好是瀏覽器視窗的高度，選單和主內容都會隨著視窗的大小而自動調整大小，不用 JavaScript 的話，你會怎麼做？

本來最直接的方法是寫一段 JavaScript，每次載入頁面或者變更瀏覽器大小之後，JavaScript 會從新調整 div 的高度，可惜這樣做我們要在window.innerHeight、document.documentElement.clientHeight、和 document.body.clientHeight 之間選擇合適的函數，也要考慮不同瀏覽器中事件處置器的不同使用方法，若果有純 CSS 的解決方案，並不用頭疼這些問題了。繼續閱讀 »

有用的 CSS 提示

阿恆於 2006 年 09 月 25 日 13:56 發表 -

未有迴響
分類: CSS

Jonathan Snook 根據他個人經驗和習慣，總結了一些有用的 CSS 提示，包括是否應該使用像素作為字型大小的單位、把 CSS 宣告寫成單行、適當地縮排、只需支援最新的瀏覽器等等，這些提示很大程度上是 Jonathan 的個人偏好，正如他自己說：「我希望把我在 CSS 上的工作習慣與大家分享，但我必須提醒你，這裡所說的可能很有爭議性，但不活在危機之中生命有甚麼意義呢？（對的，當 CSS 被視為「危機」的時候，我的確活得很刺激。）」

Jonathan 的提示包括：

用像素作為字型大小的單位：為了廣大 IE 的使用者，由於 IE 不懂得調節字型大小，請不要用像素作為字型大小的單位繼續閱讀 »

如何編寫動態網頁：結合 HTML、JavaScript 和 CSS 的範例

阿恆於 2006 年 06 月 27 日 12:36 發表 -

未有迴響
分類: CSS, JavaScript, Web design

在 IBM developWork 有一連兩篇的文章介紹如何編寫動態網頁，內文舉出了幾個常見的例子，包含詳細的說明和原始碼，對於希望令自己編寫的網頁有更多互動效果、更多姿多采，卻對於 JavaScript、CSS 等不甚了了的人來說，這是一份不錯的教學文件。

這份文件介紹以下六種動態網頁效果：矩形彈出視窗、tooltip、隱形／顯示段落、分頁、統計圖表等。

矩形彈出視窗

DHTML 矩形彈出視窗

tooltip

DHTML tooltip

隱藏／顯示段落

DHTML hide/show content

分頁

DHTML tabs

統計圖表

DHTML charts

用 CSS 產生語法高亮顯示效果

阿恆於 2006 年 06 月 06 日 10:18 發表 -

未有迴響
分類: Browsers, CSS

語法高亮顯示（syntax highlighting）幾乎是每一個技術網站都必備的功能，比較以下兩個例子便很容易明白沒有這項功能是多麼令人懊惱的事：

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>My Page</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

  <h1>Heading%lt;/h1>

  <p>HTML source without syntax highlighting, is it easy to read?</p>

</body>>

</html>

 HTML |   copy code | ?  
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03 <head>
04   <title>My Page</title>
05   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
06 </head>
07 <body>
08   <h1>Heading</h1>
09   <p>HTML source without syntax highlighting, is it easy to read?</p>
10 </body>
11 </html>

大部分系統實現這項功能的方法都是倚靠特定的函數來加插顏色到原始碼中，例如使用一個 highlight_html($input_str) 把一段 HTML 字串加插顏色效果，這個方法違反了把表達層和運算層分開的軟件設計理念，而且這種為特定系統編寫的函數移植到其他系統也有一定的困難，而且由編程語言直接生成 HTML 原始碼，使維護和修改顏色方案時十分困難。

Dean Edwards 利用「CSS 擴充行為」替特別標籤的 HTML 段落進行語法增強顯示，現時 IE 和 Mozilla 系列瀏覽器均支援這些「行為」，啟用這種「行為」的步驟是：

編寫一個「行為檔」（.htc），它基本上是一堆 JavaScript。
在 CSS 中把特定的 HTML 標籤與這個「行為檔」聯繫起來。

為了令寫給 IE 的「行為檔」也能在 Mozilla 上執行，Dean Edwards 寫了一個 XBL wrapper，除此以外，他還提供了一大堆「行為檔」來支援不同的語言，包括 HTML、CSS、PHP、JavaScript、XML 等，只要把有關的段落的 class 適當地標示，便能自動產生語法高亮顯示的效果。以下的例子示範怎樣使用：

從 http://dean.edwards.name/download/star-light.zip 下載最新的 1.0.3 版語法高亮顯示包
把整個包解壓到一個獨立的目錄，例如 style/start-light

在你的 CSS 中加上

1 @import url("star&minus;light/star&minus;light.css");

在你的 HTML（或由 PHP 生成的 HTML）中，需要進行語法高亮顯示的段落，前後加上 <pre class="xxxxx"> 和 </pre> 標籤，其中的 xxxxx 可以是 htm、html、css、php、xml 等

這樣便大功告成了。

這個方法的優點是它獨立於網頁編程語言，也獨立於伺服器的架構，唯一的要求是瀏覽器支援 CSS 擴充行為這個 W3C 標準。

用 PHP 控制 CSS

阿恆於 2006 年 06 月 04 日 1:08 發表 -

未有迴響
分類: CSS, PHP

在 thecssweblog 有一篇由 Amber Rhea 寫的有關使用 PHP 來動態控制 CSS 的文章。文章引述 Patrick Fitzgerald 另一篇有關使用 PHP 來控制顏色的文章。

Amber Rhea 說：「用途可以說是數之不盡，例如你可以建立一個動態的外觀主題系統，每個星期自動更換網站的主題顏色，在特別的日子例如耶誕節和情人節使用特別的佈景主題等。

至於 Patrick Fitzgerald 控制 CSS 中的顏色的方法是：

把所有顏色用變量來表示，例如：

 PHP |   copy code | ?  
1 $white = "#fff";
2 $black = "#000";

所有顏色用抽象的功能性名稱來命名，例如 "base"（基本色）、"highlight"（高亮）等，達到內容和表達分家的目的。
由一種基本色自動生成其他深淺色調。
自動調整前景顏色的反差，使它在背景顏色上顯示時比較清晰

他也解釋了如何在 CSS 檔案中使用 PHP：

把 style.css 改名為 style.php，並且在檔案的開頭加上

 PHP |   copy code | ?  
1 <?php header("Content-type: text/css"); ?>

在 HTML 把 style.css 改名為 style.php，例如：

 HTML |   copy code | ?  
1 <link rel="stylesheet" type="text/css" media="screen" href="style.php">

說到前景和背景顏色的反差問題，Patrick Fitzgerald 參考了 W3C 的有關指引，裡面對於這兩種顏色的「亮度差別」和「顏色差別」均有特定要求，並且提供了計算這兩個數值的數學方程式。

一篇關於 DHTML 和 DOM 的長文

阿恆於 2006 年 05 月 20 日 0:45 發表 -

未有迴響
分類: CSS, JavaScript

From DHTML to DOM scripting by Christian Heilmann

忘了在哪兒見到這篇文章的介紹，當時 click 入去看一看，竟然分為 20 來個章節，PDF 版本有 40 大頁，心想：「大作啊！」第一個反應就是把網址記下，然後離開。

昨天找了這篇大作出來閱讀，內容是講解編寫動態網頁的方法，從舊式的 DHTML 到新興的 DOM scripting，兩者其實都是使用 Javascript, CSS 來使網頁達到互動的效果，但卻無需每次到 server 更新頁面。

DOM 是由 W3C 提出的公開標準，透過 Javascript 來改變 DOM 結構，在跨平台和跨瀏覽器的兼容性上，自然比傳統 DHTML 使用瀏覽器製造商的專屬架構來得優勝，文中不乏 DHTML 和 DOM scripting 的例子，對於不熟悉 DHTML 和 DOM scripting 的人來說應該有啟迪作用，但對於那些對 Javascript, CSS, DOM 等有認識的人來說，可能有點沉悶冗長。

讀一篇 40 頁的長文來認識 DHTML 和 DOM scripting，個人認為效率偏低，這可能是英國人「吹水」功夫的另一個證明吧。

方法一：使用 CSS3 屬性選擇器

矩形彈出視窗

tooltip

隱藏／顯示段落

分頁

統計圖表

阿恆的檔案

分類