螞蟻的 CSS

CSS 速查表

2009-08-06T08:30:00.010+08:00

.csstbl {width:90%; border-collapse:collapse} .csstbl TH {background:blue; border:solid 1px white; padding:4px} .csstbl TD {border:solid 1px white; padding:4px} 元素說明 :ACTIVE, :FOCUS, :HOVER, :LANG, :LINK, :VISITED利用元素的狀態來選取元素，設計不同的風格。 :AFTER, :BEFORE, :first-letter, :FIRST-LINE利用元素的位置，設計不同的風格。 :EMPTY有空的內容，不含子元素或文字。 :FIRST, :LEFT, :RIGHT設定列印時的風格。 :FIRST-CHILD, :LAST-CHILD, :NTH-CHILD, :

box-sizing

2009-03-27T21:39:00.007+08:00

box-shadow | box-sizing box-sizing此特徵可改變元素預設的矩形格子模型（box model）其計算高與寬的方法。這是 CSS3 建議的特徵。IE8 使用 box-sizing；Safari, Chrome 用 -webkit-box-sizing；Firefox 用 -moz-box-sizing。可設的值有： content-box：矩格的寬與高只包括內容，不含內緣（padding），邊線（border），外緣（margin）。此為預設值。 padding-box：矩格的寬與高包括內容加上內緣。CSS3 無此項，只有 Firefox 支援此項。 border-box：矩格的寬與高包括內容加上內緣與邊線。 .box {width: 200px; height: 200px;

CSS 飛兒

2009-03-21T07:37:00.001+08:00

#fir1 {background:no-repeat url(http://1.bp.blogspot.com/_66l2ZxYOqcM/ScQpUSvZZUI/

CSS 小精靈

2009-03-19T21:28:00.014+08:00

:HOVER :HOVER 是準類別中的動態準類別，當滑鼠指標指著一個元素，但尚未啟用這個元素時，會採用此設計的風格。 .hvr:hover {background:green; color: red; font-size: 120%; width: 300px; } BUTTON 滑鼠移過來 INPUT RADIO DIV 滑鼠移過來 P 滑鼠移過來 SPAN 滑鼠移過來 dumpSample('spHOVER') IE6 失敗；IE8, Firefox3.0, Safari, Chrome 都成功。IE6 只能在超連結元素 Anchor 使用 :hover，請參見範例。使用 javascript 模擬 :

text-overflow

2009-03-09T17:40:00.001+08:00

text-overflow 文字超出邊界時的處理方法，須配合 overflow:hidden 使用。可設為： clip：切去超出的部分不顯示，此為預設值。 ellipsis：用 "..." 表示後面還有文字未顯示出來。 ellipsis-word：使用 "a€|" 表示後面還有文字未顯示出來。主要瀏覽器都沒支援此項。 inherit：繼承父元素的特徵值。 .ovf {width:160px; border:solid 1px red; overflow:hidden; margin:8px 0px; } 子曰：學而時習之，不亦說乎？子曰：學而時習之，不亦說乎？ ask not what your country cna do for you ask not what

text-shadow

2009-03-09T14:34:00.006+08:00

text-shadow 設定文字的陰影效果，看起來像立體字。此特徵在 CSS2 有定義，因為不佳所以在 CSS2.1 被拿掉；CSS3 加以改善，重新定義。瀏覽器對此特徵的支援並不完整，Firefox3.5 才有此項。可設為： none：沒有陰影，此為預設值。陰影：可設陰影的顏色，沒有設定時使用 color 特徵的值。可設定兩個長度。第一個長度是水平位移，向右為正值。第二個長度是垂直位移，向下為正值。可以選擇性的加上第三個長度作為模糊半徑。可以設定多組陰影，用”,”分開，依先後秩序重疊。Safari 只能有一層陰影。 inherit：繼承父元素的特徵值。加上陰影不會改變元素的矩形格子（box）之大小。子曰：學而時習之，不亦說乎？子曰：有朋自遠方來，不亦樂乎？子曰：人不知而不慍，不亦君子乎？ FLAME

英文顏色名稱

2009-03-09T09:30:00.005+08:00

英文顏色名稱，共有 124 個。 aliceblue antiquewhite aquamarine azure beige bisque blanchedalmond blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue &

border art 的應用：背景圖

2009-03-06T17:46:00.002+08:00

研究了一下發現邊線藝術在網頁的應用很有困難。一個網頁要吸引人，最好是找一些美美的照片作為素材，邊線藝術的作品可能有點差距。但是邊線圖案有一個優點就是省空間。例如下面範例的這張圖，我用 print-screen 拷貝到小畫家；清除多餘的只保留邊線圖，然後以不同檔案格式存檔。下面是不同圖檔格式的檔案大小。 24 bit BMP 檔：585 KB。 GIF 檔：4.38 KB。存檔時顏色略有失真。 JPEG 檔：7.9 KB。存檔時顏色失真。 PNG 檔：6.54 KB。 TIFF 檔：24.2 KB。邊線藝術文字檔：457 Bytes。由上面數據可知，產生下面邊線圖的文字總共是 457 Bytes，這是 PNG 圖檔的十分之一；這可以省下不少通信費。事實上這些文字在傳輸前還會壓縮的更小。所以在吸引網友的美美圖片與通信費之間，你常常須要作出取捨；而有些情況下，邊線圖也許是最好的選擇。

border-radius

2009-03-06T09:40:00.001+08:00

border-radius 此特徵可用來作元素矩形格子的圓角。這是 CSS3 建議的特徵，發展還不成熟。Safari, Chrome 用 -webkit-border-radius；Firefox 用 -moz-border-radius。IE 無此項。可設的值有：圓角半徑：可設一至四個圓角半徑，半徑值可是長度或百分比；百分比是相對於矩格的寬度。四個半徑值的順序是：左上，右上，右下，左下；少於四個值時，取對角相同。在 Safari, Chrome 可設兩個長度值，依序是圓角的水平與垂直半徑；四個角使用相同的水平與垂直半徑。只設一個值時，水平與垂直半徑相同。Safari, Chrome 不能使用百分比。 inherit：繼承父元素特徵。 .cnr4 {-moz-border-radius: 10px 20px 40%;

box-shadow

2009-03-06T06:47:00.011+08:00

box-shadow | box-sizing box-shadow此特徵可用來作元素矩形格子的投影效果。這是 CSS3 建議的特徵，發展還不成熟。Safari, Chrome 用 -webkit-box-shadow；Firefox3.5 用 -moz-box-shadow。可設的值有：投影參數：兩個長度表示 x, y 的偏移量，這兩個數字必須有。可加上第三個長度，表示模糊半徑（blur radius），預設為 0px。可再加第四個長度，表示散播半徑（spread radius），預設為 0px。可加上顏色，未設時使用 color 特徵的值。還可以加上 inset，將投影放在矩格內，預設是矩格外。可以作多層投影，放多組投影參數，然後用”,”分開。實測發現，Safari 可接受只設兩個長度；Chrome 則必須有三個長度。Safari,

邊線藝術

2009-03-05T08:26:00.005+08:00

在網路上發現一篇文章 CSS Border Art，講的是用邊線組圖的方法，其中有幾幅令人讚嘆的作品。此練習參考 Slants，示範一些簡單的圖案做法。第一個範例顯示將 width, height 都設為 0px，就可以製成方形。其中 line-height:0px 必須設，否則 IE6 無法產生方形。 .b1 {border-top:solid 40px maroon; border-right:solid 40px white; border-bottom:solid 40px aqua; border-left:solid 40px gold; line-height:0px; margin-right:20px; float:left; }

word-wrap

2009-03-04T11:00:00.003+08:00

word-wrap 指定是否可以將完整的長字分為二，以免長字超出邊界。適用於英文，通常英文用音節規則來斷字。可設為： break-word：可以任意斷字，不依循音節規則。 normal：長字會維持原狀，超出邊界，此為預設值。 inherit：繼承父元素特徵。使用此項，必須先將 text-wrap 特徵設為 normal 或 suppress。例外的是 IE 沒有 text-wrap，一律可以用此項。 John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [WhatYouCanDoForYourCountry]. John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [

:lang()

2009-03-03T14:44:00.004+08:00

:LANG() 此為準類別的語言準類別；會檢查元素的屬性 LANG，當語言符合時，會採用此設計的風格。其語法是： lang(語言標籤) P[lang] {color:white; width:80%; } P:lang(zh) {background:blue; font-size:140%; } P:lang(zh):before {content:'中文：'; background:red; } P:lang(en) {background:green; font-style:italic; } P:lang(en):before {

:TARGET

2009-02-25T16:37:00.006+08:00

:TARGET 元素上有設為超連結的錨，使用者點選超連結，跳到此元素時，會展現設計的風格。 #game:target { color:red; background:white; } #kfj:target { color:white; background:green; } 好玩遊戲，請點選此。孔子說，請點選此。射擊遊戲，賽車遊戲，益智遊戲，武打遊戲。孔子說：有朋自遠方來，不亦樂乎！ dumpSample('spAFTER') IE6 無此項；Firefox, Safari, Chrome 皆成功。將 :target 狀態傳給子元素與下一個元素。下例用到 E + F 規則。 .vs {border:solid 4px green; margin:6px} .vs

FIRST-OF-TYPE, LAST-OF-TYPE, NTH-OF-TYPE, NTH-LAST-OF-TYPE, ONLY-OF-TYPE

2009-02-24T20:53:00.002+08:00

:FIRST-OF-TYPE | :LAST-OF-TYPE | :NTH-OF-TYPE | :NTH-LAST-OF-TYPE | :ONLY-OF-TYPE 以上為準類別（Pseudo-classes）的子型態準類別。主要用在控制子元素的展現風格。另外有一組子元素準類別也是控制子元素的風格。 :FIRST-OF-TYPE 父元素的子元素清單中，第一個有此型態的子元素，會應用此設計的風格。 .fst I:first-OF-TYPE {background:green; color:red; font-size:140% } 第一個 Q 元素第一個 I 元素第二個 I 元素第三個 I 元素第二個

:FIRST-CHILD, :LAST-CHILD, :NTH-CHILD, :NTH-LAST-CHILD

2009-02-24T18:05:00.003+08:00

:FIRST-CHILD | :LAST-CHILD | :NTH-CHILD | :NTH-LAST-CHILD 以上為準類別（Pseudo-classes）的子元素準類別。主要用在控制子元素的展現風格。 :FIRST-CHILD 指定的元素為父元素的第一子元素時，會應用此設計的風格。 .fst I:first-child {background:green; color:red; font-size:140% } 第一子元素第二子元素第三子元素 dumpSample('spFIRS') IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。 <

水平與垂直置中

2009-02-24T16:00:00.009+08:00

此練習探討不同的置中方法。要將一段文字或一張圖片放在矩形格子（box）的中央，最簡單的方法是用 TABLE 元素，然後在 TD 元素宣告 text-align:center。vertical-align:middle 為預設值，所以可以免宣告。 .tbl td {width:350px; height:250px; border:solid 1px red; } dumpSample('SPtable') 單行文字的置中。以下方法都不使用 TABLE 元素，而是要在 DIV 元素置中。單行文字的置中，其水平置中可用 text-align:center。垂直置中可以將 line-height 宣告與 height 相同，此法只能用在單行文字的情形。 :FOCUS :FOCUS 是準類別中的動態準類別，當 INPUT 元素或 ANCHOR 元素被聚焦時，會應用此設計的風格。可以用滑鼠點選，或用 TAB 輪選元素而聚焦。:focus 用在 TAB 輪選的效果最明顯，筆者就常遇到 TAB 失蹤的情形。 .key:focus {background:green; color: red; font-size: 120%; width: 300px } TEXT： BUTTON： CHECKBOX： FILE： IMAGE： PASSWORD： RADIO： RESET： SUBMIT： ANCHOR：滑鼠點此 dumpSample('spFOCUS') IE6 沒有支援 :

語音組

2009-02-18T18:53:00.001+08:00

語音組：下列特徵用在語音控制，但是主要瀏覽器都沒有支援。 AZIMUTH：指定發聲水平方位，以角度表示。 CUE：指定兩個聲音資源的網址。 CUE-AFTER：在元件之後發出聲音。 CUE-BEFORE：在元件之前發出聲音。 ELEVATION：指定發聲高度，以角度表示。 PAUSE：可以一次宣告 pause-after, pause-before。 PAUSE-AFTER：以語音說出元件的內容之後，停頓的時間。 PAUSE-BEFORE：以語音說出元件的內容之前，停頓的時間。 PITCH：指定語音發聲的音高。 PITCH-RANGE：指定語音發聲的平均音高的變化範圍。 PLAY-DURING：指定語音發聲的背景聲音。 RICHNESS：指定語音發聲的豐富性。 SPEAK：設定文字的語音功能。 SPEAK-HEADER：設定報表的表頭是否要讀出聲音。 SPEAK-NUMERAL：

font-size, font-size-adjust, font-stretch

2009-02-17T08:04:00.008+08:00

font-size | font-size-adjust | font-stretch | line-height font-size設定實體字的尺寸。絕對尺寸（absolute-size）：可設為 xx-small, x-small, small, medium, large, x-large, xx-large，預設值為 medium。在螢幕上，兩級字間差 1.2 倍。相對尺寸（relative-size）：可設為 larger, smaller，以父元素為準。長度：用長度設定字的尺寸，不可為負值。百分比：相對於父元素字型尺寸的百分比。 inherit：繼承父元素特徵。設定字型大小，最佳是用 em, ex 長度單位。第二選是用 px 長度單位。以上單位，在不同瀏覽器的差異比較小。絕對尺寸。 SPAN[style~='

position

2009-02-15T15:00:00.013+08:00

position | bottom, left, right, top position設定元素的矩形格子（box）之位置，通常會配合 top, bottom, left, right 四個特徵使用。可設為 static, relative, absolute, fixed：（一）static：依照正常流程佈局，top, bottom, left, right 四個特徵失效。此為預設值。好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。 dumpSample('SPstatic') （二）relative：先計算元素矩格的正常位置，再加上 top, right, bottom, left 設定的相對距離，而得到最後的位置。請參考各特徵的詳細說明。其後的元素矩格會忽略它，

閃爍 CSS

2009-02-15T07:59:00.005+08:00

此練習利用改變 CSS 的特徵值，達成動態變化。此練習用到以下的特徵與方法： getElementById(id)：取得元素的物件。 style 物件：元素的風格物件，可利用此物件讀取或設定元素的風格。使用此物件時要注意：雖然風格表的特徵在 style 物件的命名有一定的規則，但是也有少數例外，例如 float。style 物件在不同瀏覽器，其儲存的資料格式有差異。所以使用時要多測試。 className：讀取或設定元素的 CLASS 屬性字串。 setTimeout()：設定變化的時間間隔。 toggleCSS(id, pty, v1, v2, ms)：這是一個自定函式，用來改變元素的風格值。它有五個參數：id 是元素的識別名。pty 是風格的特徵名。v1, v2 是要變換的兩個特徵值。ms 是微秒時間，為變化的時間間隔。 toggleClass(id, c1, c2, ms)：

邊線衝突解決法

2009-02-13T14:59:00.004+08:00

邊線衝突解決法（border conflict resolution）是指，當 TABLE 元素設為 collapse 時；TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TR, TD, TH 等元素，都可以各自設定邊線。當多層的父子元素設置不同邊線時，會依下列原則決定小格子（cell）的邊線。 border-style 設為 hidden，有最高優先權。會蓋過父子元素的邊線。 border-style 設為 none，其優先權最低。會在父子元素間被其它設定蓋掉。父子元素全都是 none 時才會有效。寬的邊線設定，其優先權高於細的邊線。邊線寬度相同時，border-style 的優先順序是：double, solid, dashed, dotted, ridge, outset, groove, inset。當

border, border-color, border-style, border-width

2009-02-12T09:53:00.018+08:00

border | border-color | border-style | border-width border-style border-top-style border-right-style border-bottom-style border-left-style 設定邊線的型態。 border-style 可以一次設定四個邊線型態，其順序是上右下左；只有一個值時，則四邊相同；如果少於四個時，則上下相同與左右相同。 border-top-style 設定上邊線的型態。 border-right-style 設定右邊線的型態。 border-bottom-style 設定下邊線的型態。 border-left-style 設定左邊線的型態。由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，

DIV+CSS 網頁佈局

2009-02-10T20:46:00.004+08:00

很多網頁都是採用 TABLE 元素來佈局，將頁面分成不同的功能區。現在業界提倡改用 CSS+DIV 的佈局方式。引導這個趨勢的原因有幾個： TABLE 元素，必須其內含的所有內容都下載完成，才能開始展現，所以比較慢。使用 TABLE 佈局，其標籤碼較多，而有些搜尋引擎會依據內容對標籤碼的比率，評價網頁；比率低的網頁，會給予較低評價。 CSS+DIV 的佈局方式很簡單，由下面的範例就可以看出來。範例的下方有幾個 DIV 元素構成的區塊。每一個 DIV 區塊是一個特定功能的容器，下面分成了：標題，邊欄，主文，頁底。接著就是要設定每一個區塊的位置，這就要用到 CSS 風格表。在下面的風格表中有幾個特徵用於排列位置： margin:0px auto：此一設定可以將 DIV 區塊排在水平中央。 float:left：原本 DIV 區塊是上下排列，此設定可將 DIV 區塊左右並排。下例中，

展開式選單

2009-02-09T15:03:00.017+08:00

此練習試作一個可展開與隱藏的選單。此練習只用到 CSS，你也可以用 javascript 作展開式選單，其顯示效果不同，可以依需要選用最適合的方法。此練習使用的元素與特徵有： DIV：容納文字與元素的容器。 UL：建立一個沒有編號的清單。 height：設定元素矩格的高度。初值設為 30px。 overflow:auto：內容超出元素矩格範圍時的風格表。 :hover：滑鼠游標在元素上移動時的風格表。 .first {height:30px; overflow:hidden; width:200px; border:solid 1px red; } .first:hover {height:auto} 請點選下列項目：動作遊戲長劍客戰骷髏坦克衝鋒戰競速遊戲摩托車飛峽谷

橫列的清單

2009-02-09T10:36:00.004+08:00

此練習試作一個橫列的清單。使用 OL, UL 製作清單時，預設是垂直排列。如果要水平排列，可以用 float 達成。 OL：建立一個編號的清單。 float:left：元素向左靠，後續內容接在右邊。如果使用 float:right，則會由右向左排列。 list-style-position:inside：項目的編號數字放在元素矩框內。 .row {font-size:18px; list-style:inside decimal; } .row LI.first {float:left; border:solid 1px red; } 射擊遊戲射火雞暴力流浪漢益智遊戲移方塊算術練習英文單字賽車遊戲摩托車

background-position

2009-01-29T08:51:00.007+08:00

background-color | background-position | background-repeat background-position當背景圖有設定時，此特徵指定背景圖的初始位置。沒有設 background-position 時，背景圖放在元素矩框的左上角。特徵值可設為：：百分比。可以用兩個百分比表示水平與垂直的起點。也可以只用一個百分比表示水平位置，垂直位置則由系統內定，預設是 50%。可用負值。：長度值。可以用兩個長度值表示水平與垂直的起點。也可以只用一個長度表示水平位置，垂直位置則由系統內定，預設是 50%。可用負值。 top, center, bottom：擇其一，設定垂直位置。left, center, right：擇其一，設定水平位置。缺一項時，預設值是 center。使用此法，

background-repeat

2009-01-29T08:11:00.010+08:00

background-color | background-position | background-repeat background-repeat當背景圖有設定時，指定背景圖是否要重複。特徵值可設為： repeat：背景圖在水平與垂直重複，此為預設值。 repeat-x：背景圖只在水平重複。 repeat-y：背景圖只在垂直重複。 no-repeat：不重複。 inherit：繼承父元件特徵。使用 no-repeat 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. dumpSample('SPnorepeat') 使用 repeat-x 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.

background-color

2009-01-29T07:37:00.010+08:00

background-color | background-position | background-repeat background-color設定元件背景的顏色，通常簡化成 background:顏色值。特徵值可設為：：顏色值。 transparent：透明，此為預設值。 inherit：繼承父元件特徵。射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. Not ask what your country can do for you, ask what you can do for your country. dumpSample('SPcolor') 使用 transparent 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲,

CSS hack 區塊

2009-01-23T08:21:00.007+08:00

單一特徵 | 區塊 | 註解條件式 html* html* 在 IE7（及以下版本）, Safari, Chrome 會解讀為 html *；但是在 Firefox 會視為錯誤，而忽略其設定。 * html * html 語意是 html 是子元素，這在大部分瀏覽器都是錯誤，但是 IE6 卻解讀成功。 *+html *+html 語意是 html 接在 * 之後，這在大部分瀏覽器都是錯誤，但是 IE7 卻解讀成功。 .hksphtml { color:red } HTML* .hksphtml { color:yellow } *+HTML .hksphtml { color:green } *HTML .hksphtml { color:blue } 此段文字，在

CSS hack 單一特徵

2009-01-23T08:00:00.005+08:00

單一特徵 | 區塊 | 註解條件式寫 HTML, CSS 最傷腦筋的就是：不同的瀏覽器，展現的效果常有差異。這裡只舉一例，childNodes 的差異；這差異會使得展現出來的高度不同，尤其是加了不同的背景色時最為明顯；對一般技術性的網站可能不重要，但是對美工設計的網站，統一性與美感就差了些。瀏覽器各有使用者，例如 Firefox 有將近 20% 的佔有率，以台灣人口來算，約有四百萬人。筆者原本用的是 IE8，想想 IE8 都出來了，IE6 該絕跡了吧；後來筆者由來訪者的統計資料中發現 IE6, IE7 可是大戶，學校中的老舊電腦，都還是跑著 IE6。所以跨瀏覽器的技術就變的重要了。有很多方法可以調整不同瀏覽器的差異，在此處講的是用於 CSS 的調整法。CSS hack 主要是利用瀏覽器的錯誤來作分別，此法的缺點是，錯誤有可能在未來更正。 * IE

@import

2009-01-22T16:54:00.007+08:00

@import 輸入風格表的檔案，其語法是： @import 外部風格檔案媒體型態集; 外部風格檔案可用 url() 或字串；下面兩行，結果相同。使用 url() 時，可不加 ' 或 "。CSS 檔案中不要加。媒體型態集可放多個媒體型態；IE 沒有支援 @import 後接媒體型態集。風格檔之內還可以放 @import 讀入風格檔，此時 @import 之前不可有風格規則，但是可以有其它 @規則。根據 Yahoo! 的研究，在 IE 中使用 LINK 讀取風格檔會優於 @import。以下範例均在個人電腦測試成功，因為部落格無法上傳 css 檔案，所以無法顯示效果。 /* @import "c1.css"; */ @import url(c1.css);

:empty

2009-01-22T14:28:00.004+08:00

:empty 元素必須符合的條件：有空的內容，不含子元素或文字。 .blk SPAN:empty {display:block; width:150px; height:150px; background:blue; } 好玩遊戲，射擊遊戲，賽車遊戲，益智遊戲。 dumpSample('SPblk') IE6 失敗；Firefox, Safari, Chrome 都成功。可以配合 :before，:after，content 加上新的內容。 .cls I:empty:before {content:'新增文字'; color:red} / /

:root

2009-01-22T13:48:00.003+08:00

:root 用來宣告文件的根元素，而網頁的根元素一定是 HTML；所以只有兩種使用情形：（一）:root。（二）HTML:root。 HTML:root {font-size:120%} dumpSample('SProot') 由於上面的設定，此頁的字較其它頁大。此為筆者在個人電腦的測試結果，移到部落格就失效了。 IE6 失敗；Firefox, Safari, Chrome 都成功。 CSS hack：由於 IE（IE8 及以下版本）沒有支援 :root，含有 :root 的選擇器會解讀失敗而被略過；所以被設計師用來分別 IE 與 Firefox。下面的範例依循兩個原則：（一）後宣告的值會蓋過先宣告的值。（二）解讀失敗的宣告會被忽略。 DIV.cls1 {color:blue}

:not()

2009-01-22T13:14:00.004+08:00

not() 用來否定選擇條件，其語法是： :not( 選擇條件 ) 選擇條件必須是規則集合。 .cls:not(:first-child) {color:red} 第一子元素第二子元素第三子元素 dumpSample('SPnot') IE6 失敗；Firefox, Safari, Chrome 都成功。 :HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 .hvr {border:solid 1px red} .hvr:hover TD:not(:empty) {background:red} .hvr:active TD:empty:before {content:'空格';

!important

2009-01-21T13:25:00.008+08:00

!important 風格表有三種來源：作者定義的，用戶指定的，與展現程式的預設值。預設的串聯規則是：作者定義的風格表會取代用戶定義的風格表，而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用 !important，改變預設的串聯規則。依據 CSS2 標準，如果用戶的風格表中，有使用 !important 的規則，則其優先權會高過作者的風格表，即便作者的風格表中有加上 !important。其語法是： css 特徵：值 !important; .imp {color:red !important;} 重要不重要 dumpSample('SPimportant') 上例中，紅色優先權蓋過綠色。 CSS hack 1：IE6 及舊版 IE，處理 !important 時出現一點小問題。

調色板

2009-01-21T12:37:00.004+08:00

此調色板將紅, 藍, 綠三原色作成三度座標。平面是 X, Y 軸，單支的是 Z 軸。點選 Z 軸會改變 X, Y 平面的顏色面。點選 X, Y 平面的顏色，會輸出其顏色值，可以用在網頁風格表。下方還有一個點選區，可以調整紅, 藍, 綠對應 X, Y, Z 三軸的方式。 td.cc2 {color:white;width:12px;height:12px; text-align:center;line-height:0px} td.cc3 {color:white;width:12px;height:12px; font-size:12px; text-align:center;line-height:12px} var Cwidth=Cheight=32; var inCLR=256/Cwidth; var inCLR1=

動態 CSS

2009-01-21T10:03:00.001+08:00

CSS expressions 可作動態的 CSS，例如元素的位置隨著滑鼠移動；隨時變動的顏色。expression IE5, IE6, IE7 有支援，IE8 以後不再支援；其它瀏覽器也沒有支援。expression 需要大量的動態計算，所以可能會讓你的網頁變慢。使用時要考慮前述兩個因素。其語法是： css 特徵: expression( javascript 指令 ); function cssColor() { with(Math) { var r=floor(random()*256)<<16; var g=floor(random()*256)<<8; var b=floor(random()*256); } return r+g+b; } .exp { width:expression(

table-layout

2009-01-20T14:20:00.002+08:00

table-layout 指定報表佈局的規則，可設為： auto：由直行的數個小方格中，以最寬的小方格的寬度為準。此為預設值。 fixed：報表的寬度，以設定的寬度為準，或以第一橫欄的寬度為準。此法展現速度較快。 inherit：繼承父元件的特徵值。 .tbl { width:45px; border-collapse: separate} .tbl TD { border:red solid 1px} 11.4 0.8 100.345 11.4 0.8 100.345 dumpSample('SPlayout') 第二個報表設了 table-layout:auto，內容會決定寬度。 javascript 應用。可以用 style 物件的特徵 tableLayout 讀取或設定特徵值。 opacity 設定元素是否可以透明看穿。數值：（一）0 或小於 0，完全透明。（二）0 < 數值 < 1，可看穿。（三）數值 >= 1，完全不透明，此為預設值。 inherit：繼承父元素。可以使用 style 物件的特徵 opacity 讀取或設定透明度。 IE6 沒有 opacity 此特徵，但是 IE 有提供 alpha filter，可以作 opacity 的效果。反之 Firefox, Safari, Chrome 沒有支援 filter。其用法是： filter:alpha(opacity=數值) 數值由 0 到 100。0 為預設值，為透明。100 為不透明。元素必須成為 hasLayout 狀態，才可使用 filter。指定元素成為 hasLayout 的方法很多，通常使用 zoom:1，這樣對其它瀏覽器沒有影響。可以用元素物件.

ime-mode

2009-01-20T10:53:00.004+08:00

ime-mode IME（Input Method Editor）用來控制中文，韓文，日文的輸入。 auto：不改變當下的輸入狀態，此為預設值。 normal：IME 的狀態為正常。IE 無此項。 active：開始時啟動 IME，用戶可停止之。Linux 版的 Firefox 無此項。 inactive：開始時不啟動 IME，用戶可啟動之。Linux 版的 Firefox 無此項。 disabled：停用 IME，用戶不能啟動之。 dumpSample('SPime') IE6, Firefox 有支援；Safari, Chrome 無此項。 javascript 應用。可以用 style 物件的特徵 imeMode 讀取或設定特徵值。 var os=

text-align, text-decoration, text-indent, text-shadow, text-transform

2009-01-20T09:02:00.010+08:00

text-align | text-decoration | text-indent | text-shadow | text-transform text-align 設定區塊中的文字行內容，如何對齊，可設為： left：向左靠。此為預設值。 right：向右靠。 center：排在中央。 justify：兩邊對齊。會自動在文字之間加入空白，使兩邊的字都對齊邊界。字串：用在報表（TABLE）。設定一個字串，報表小方格的內容，會依字串對齊。 inherit：繼承父元素的特徵值。 text-align:left。此為預設值。 text-align:right text-align:center text-align:justify：兩邊對齊。 John F. Kennedy said: ask not what

white-space

2009-01-20T08:47:00.017+08:00

white-space 文字中的空白的處理方法。空白字包括：空白，TAB，跳行字（line feed, carriage return, form feed）。可設為： normal：連續的空白字都縮減為一個空白，長行遇到右邊界會跳行分為兩行，此為預設值。 pre：不縮減空白字，維持原狀。 pre-line：Firefox, Safari, Chrome 的定義是，連續的空白字會縮減為一個空白；跳行字（newline）保留，會跳行；長行也會跳行。IE 的定義是，連續的跳行會保留。 pre-wrap：Firefox, Safari, Chrome 的定義是，不縮減空白字；跳行字會跳行；長行也會跳行。IE 的定義是，連續的跳行字會縮減為一個跳行。 nowrap：連續的空白字會縮減為一個空白，不跳行。 inherit：繼承父元素的特徵值。前述特徵值主要控制三項：

width, max-width, min-width

2009-01-20T07:16:00.008+08:00

max-width | min-width | width 設定元素矩形格子的寬。另外可以用 height 設定矩格的高。 width 設定區塊元素矩格的寬度，不可為負值。min-width, max-width 會改寫 width。可設為：長度：用長度設定元素的寬度。百分比：相對於包納區塊寬度的百分比，也就是父元素的寬度。如果包納區塊的寬度沒有宣告，而是由內容決定其寬度，則此參數與 auto 相同。 auto：依據其它特徵決定寬度，此為預設值。 inherit：繼承父元素特徵。 John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country. dumpSample('SPwidth

等寬字

2008-12-11T02:26:00.003+08:00

等寬字最適合用在程式語言。顯示程式語言的字型要注意 l, 1, i 與 0, o, O 容易分辨。在此只列出了一小部分等寬字，以可在主要瀏覽器上使用為主。等寬字要配合

...

規則集合

2008-11-17T15:35:00.022+08:00

規則集合（Rule sets）用在區塊風格表與外部風格表檔案。規則集合由選擇器與風格定義區塊組成。其語法是：選擇器 { 風格定義區塊 } 選擇器可設定各種選擇條件，當 HTML 的元素符合選擇條件時，才會採用其定義的風格。風格定義區塊接在選擇器之後，頭尾用兩個”{” ”}”包夾。區塊內含多組特徵與值，特徵與值用”:”相連；兩組特徵與值間用”;”分開。可用”/*”與”*/”加入解說。選擇器在 HTML 文件是不分大小寫；在 XML 則大小寫不同。選擇器的基本語法如下： * | E | E F | E > F | E:準類別 | E ~ F | E + F | E, F | E[att]

取用風格表的方法

2008-11-17T10:16:00.004+08:00

風格表有三種取用法：使用外部風格表檔案：可將主要的，泛用的風格表定義存在檔案中。如此可以讓多個類似的網頁文件，讀取同一個風格表檔案。讀取外部風格表檔案要用 LINK 元件或 @import 。風格表檔案中不必加上。使用 LINK 元件：使用 @import：在網頁文件中植入 STYLE 區塊風格表： .tbl TD { border:solid 1px blue; color:red} 土豆網蘋果日報統一發票

play-during

2008-11-16T18:16:00.002+08:00

play-during 指定語音發聲的背景聲音，可設定的值有： URI ：指定聲音檔案的網址。加 mix 表示，會與父元件的背景聲音混合。加 repeat 表示，重複背景聲音直到元件語音發聲結束。 auto：使用父元件的背景聲音，此為預設值。 none：停止所有背景聲音。 inherit：繼承父元件的特徵值。

z-index

2008-11-16T16:39:00.018+08:00

z-index 設定重疊的元素矩形格子其層次，可設為：整數：元素矩格在重疊堆（stack）中的層次，可用負值。展現時數字大的在上，會蓋住數字小的。元素內的子元素不論是否設定 z-index，與父元素放在同一層，不須與外界的元素相比。同層的元素依先後次序堆疊，後來的蓋過先來的。 auto：等同於 0 層，元素矩格的層次與父元素相同。元素內的子元素其 z-index 設為整數時，會與父元素及外界的元素相比。此為預設值。 inherit：繼承父元素的特徵值。要將多個元素重疊，要用到 position 特徵的 relative, absolute, fixed，及 top, right, bottom, left 四個特徵。z-index 必須配合 position 設為 relative, absolute, fixed 使用；其它情形 z-index 沒有效果

volume

2008-11-16T15:44:00.001+08:00

volume 設定音量，可設為： 0 至 100 的音量數字。百分比：對比於繼承值的百分比。 silent：靜音。 x-soft(0), soft(25), medium(50), loud(75), x-loud(100)：由小至大的音量。 inherit：繼承父元件的特徵值。

table-layout

2008-11-16T15:22:00.000+08:00

table-layout 指定報表佈局的規則，可設為： auto：由小方格的寬度決定報表的寬度，此為預設值。 fixed：水平寬度固定法第一橫欄的寬度作為報表寬度，較快。 inherit：繼承父元件的特徵值。 .tbl { width:45px; border-collapse: separate} .tbl TD { border:red solid 1px} 11.4 0.8 100.345 11.4 0.8 100.345 dumpSample('SPlayout') 第二個報表設了 table-layout:auto，內容會決定寬度。

speak, speak-header, speak-numeral, speak-punctuation

2008-11-16T09:12:00.002+08:00

speak 設定文字的語音功能，可設為： normal：正常拼音發聲，此為預設值。 none：一律不發聲。 spell-out：以字母發聲。 inherit：繼承父元件的特徵值。 speak-header 設定報表的表頭是否要讀出聲音？可設為： once：只讀一次，此為預設值。 always：每個小格都要讀出。 inherit：繼承父元件的特徵值。 speak-numeral 設定數字的語音功能，可設為： continues：加上拾百千萬等發音，此為預設值。 digitals：一個數字一個音。 inherit：繼承父元件的特徵值。 speak-punctuation 設定逗點符號的語音功能，可設為： code：發音。 none：不發音，此為預設值。 inherit：

marks, orphans, widows, size

2008-11-16T09:02:00.004+08:00

marks | orphans | widows | size | marks 設定列印時是否在每頁上印出切割線或對齊線，可都印。前述兩線只能在絕對的頁框中被印出，可用 size 特徵設定絕對的頁框。此特徵可設為： crop：列印切割線。 cross：列印對齊線。 none：不印上述兩線，此為預設值。 inherit：繼承父元件的特徵值。 orphans 指定列印時，一段文字最少幾行要印在此頁底部。ophan 用在排版術語，表示一段文字（paragraph），此頁只印了一行（孤兒），其餘都印在下一頁。orphans 可以將孤兒移到下一頁。可設為：整數：最少行數，預設值為 2。 inherit：繼承父元件的特徵值。 widows 指定列印時，一段文字最少幾行要印在下一頁頂端。widow 用在排版術語

pitch, pitch-range, richness, speech-rate, stress, voice-family

2008-11-16T07:59:00.005+08:00

pitch 指定語音發聲的音高，可設定的值有：頻率：用平均頻率表示音高。 x-low, low, medium, high, x-high：由低音到高音的值，預設值為 medium。 inherit：繼承父元件的特徵值。 pitch-range 指定語音發聲的平均音高的變化範圍，可設定的值有： 0 到 100 數字。0 表示無變化的單調音。預設值為 50。 inherit：繼承父元件的特徵值。 richness 指定語音發聲的豐富性，可設定的值有： 0 到 100 數字。0 表示平順，柔和的音。預設值為 50。 inherit：繼承父元件的特徵值。 speech-rate 指定語音發聲的速度，可設定的值有：數字：每分鐘的字詞數。 x-slow, slow,

:first, :left, :right

2008-11-16T07:15:00.001+08:00

:first 設定列印時第一頁的風格。 @page :first { font-family:標楷體 } :left 設定雙面列印時左頁的風格。 @page :left { font-family:細明體 } :right 設定雙面列印時右頁的風格。 @page :right { font-family:新細明體 }

pause, pause-after, pause-before

2008-11-16T06:57:00.001+08:00

pause 可以一次宣告 pause-after, pause-before，可設定的值有： pause-after, pause-before 的組合。 inherit：繼承父元件的特徵值。 pause-after 以語音說出元件的內容之後，停頓的時間，可設定的值有：時間：單位是 ms 或 s。百分比：以平均每詞的時間為準，乘上百分比，得出時間。 inherit：繼承父元件的特徵值。 pause-before 以語音說出元件的內容之前，停頓的時間，可設定的值有：時間：單位是 ms 或 s。百分比：以平均每詞的時間為準，乘上百分比，得出時間。 inherit：繼承父元件的特徵值。

page, page-break-after, page-break-before, page-break-inside

2008-11-14T22:02:00.003+08:00

下述特徵用在控制印表機。 page 指定一個元件可以展現在特定型態的分頁，可設為：識別名稱：特定分頁型態的識別名稱。 auto：此為預設值。 page-break-after 指定產製矩框後是否要跳至新頁，可設為： always：在產製矩框後跳頁。 auto：順其自然，此為預設值。 avoid：在產製矩框後不跳頁。 left：在產製矩框後跳頁，下一頁為左頁。 right：在產製矩框後跳頁，下一頁為右頁。 inherit：繼承父元件的特徵值。 page-break-before 指定產製矩框前是否要跳至新頁，可設為： always：在產製矩框前跳頁。 auto：順其自然，此為預設值。 avoid：在產製矩框前不跳頁。 left：在產製矩框前跳頁，下一頁為左頁。 right：在產製矩框前跳頁，下一頁為右頁。

visibility

2008-11-14T21:32:00.006+08:00

visibility 設定元素的矩形格子可見，或隱藏。可設為： visible：顯現矩格，此為預設值。 hidden：隱藏矩格，但依然佔有版面空間。要完全消去任一元素所佔的空間，要用 display:none。 collapse：隱藏矩格，但依然佔有版面空間。只有用在報表（TABLE）時，會縮減空間。IE6 不能用 collapse。 inherit：繼承父元素的特徵值。圖一圖二圖三圖四 dumpSample('SPvisibility') 上面的圖一與圖二設為 hidden, collapse，所以看不見，但佔有空間。圖三則外加 TABLE 元素，且此 TABLE 元素設了 visibility:collapse，因此看不見也不佔空間。Firefox 符合前述規則。在 IE6 圖二與圖三都會顯現

overflow, overflow-x, overflow-y

2008-11-14T20:55:00.009+08:00

overflow overflow-x overflow-y 針對區塊層元素，當元素內容超出元素的矩形格子時，要如何展現。overflow-x 可設定水平方向，超出矩格時的展現法。overflow-y 可設定垂直方向，超出矩格時的展現法。overflow 同時設定水平與垂直方向，超出矩格時的展現法。可設為： visible：超出矩格的內容，會顯示在矩格外。此為預設值。 hidden：超出矩格的內容，會裁去，不會產生捲軸。 scroll：一律展現捲軸，即便內容沒有超出矩格。 auto：當元素內容超出元素的矩格時，才展現捲軸。 inherit：繼承父元素的特徵值。測試 overflow。 overflow:visible 超出矩格的內容，會顯示在矩格外。此為預設值。射擊遊戲，益智遊戲，武打遊戲

outline, outline-color, outline-offset, outline-style, outline-width

2008-11-14T20:14:00.009+08:00

設定元素輪廓線的風格。由於 outline-style 的預設值為 none，沒有輪廓線；所以一定要將此特徵設為其它值，才能畫出輪廓線。 IE6 沒有支援 outline。 outline | outline-color | outline-offset | outline-style | outline-width outline 可以一次設定輪廓線的寬度，型態，顏色。個別設定值請參考後面說明。此特徵可設為： outline-color, outline-style, outline-width 的組合。 inherit：繼承父元素的特徵值。子曰：學而時習之，不亦說乎？ dumpSample('SPoutline') 上例中，border 是白色，outline 是藍色。

orphans, widows

2008-11-14T15:56:00.005+08:00

orphans 指定列印時，一段文字最少幾行要印在此頁底部。ophan 用在排版術語，表示一段文字（paragraph），此頁只印了一行（孤兒），其餘都印在下一頁。orphans 可以將孤兒移到下一頁。可設為：整數：最少行數，預設值為 2。 inherit：繼承父元件的特徵值。 widows 指定列印時，一段文字最少幾行要印在下一頁頂端。widow 用在排版術語，表示一段文字，大部分印在此頁，只有一行（寡婦）印在下一頁。可設為：整數：最少行數，預設值為 2。 inherit：繼承父元件的特徵值。

@charset, @font-face, @media, @page

2008-11-14T15:20:00.024+08:00

@charset | @font-face | @import | @media | @page @import 請參考說明與範例。 @charset 指定外在風格表檔案的文字編碼。其語法是： @charset 文字編碼字串; @charset 只能用在外在風格表檔案。每一個外在風格表檔案只能有一個 @charset，要放在檔案最前面。請參考 IANA 文字編碼。可能的使用情形是，你的 HTML 檔案是用 unicode 編碼，然後要讀入一個用 latin-1 編碼的 CSS 檔案；這時在 CSS 檔案的第一行就要加上： @charset "ISO-8859-1"; 小心！不要少了行尾的";"。另外一個解決辦法是：將這個 CSS 檔案用 unicode 重新存檔，同一個網站的檔案用相同的編碼即可。由於部分字碼包容 ASCII 字集，

marks

2008-11-14T14:46:00.001+08:00

marks 設定列印時是否在每頁上印出切割線或對齊線，可都印。前述兩線只能在絕對的頁框中被印出，可用 size 特徵設定絕對的頁框。此特徵可設為： crop：列印切割線。 cross：列印對齊線。 none：不印上述兩線，此為預設值。 inherit：繼承父元件的特徵值。

padding, padding-bottom, padding-left, padding-right, padding-top

2008-11-14T14:20:00.011+08:00

padding | padding-bottom | padding-left | padding-right | padding-top padding 可以一次設定元素矩形格子的上右下左內緣寬度。內緣是指元素的邊線內徑與內容的距離。個別的設定值請參考後面的說明。此特徵可設為：依上右下左秩序，設定內緣寬度：只設一個值時，四邊同寬。少於四個值時，取左右相同，與上下相同。 inherit：繼承父元素的特徵值。外緣外緣外緣 dumpSample('SPpadding') 上例中，第一張圖設了 padding:0px；第二張圖與第三張圖設為非零值。第三張圖還設了 margin 與背景色，背景色的塗色包括內緣；這與外緣（margin）不同，外緣區是透明。 margin 可以一次設定元件矩框的上右下左外緣寬度。外緣是指元件的邊線與外界內容的距離，此區間為透明。個別的設定值請參考後面的說明。此特徵可設為：依上右下左秩序，設定外緣寬度：只設一個值時，四邊同寬。少於四個值時，取左右相同，與上下相同。可設負值。 inherit：繼承父元件的特徵值。外緣外緣外緣 dumpSample('SPmargin') 上例中，第二張圖與第三張圖有設 margin，而且第三張圖設了負值。這第三張圖超出父元素矩形格子的部分，在 IE6 會被切去；在 Firefox, Safari, Chrome 會顯示出來。還要請注意 IE6 沒有

list-style, list-style-image, list-style-position, list-style-type, marker-offset

2008-11-14T10:39:00.011+08:00

list-style | list-style-image | list-style-position | list-style-type | marker-offset list-style 可以一次設定 list-style-image, list-style-position, list-style-type 三個參數。個別的設定值請參考後面的說明。此特徵可設為： list-style-image, list-style-position, list-style-type 的組合。 inherit：繼承父元素的特徵值。 list-style-image 設定項目單的標誌的圖像檔案的網址，可設為：：標誌的圖像檔案的網址。 nono：沒有標誌，此為預設值。 inherit：繼承父元素的特徵值。 vertical-align 此特徵用在文字行（inline）元素與報表的小方格（cell），指定元素在父矩格中的垂直對齊方式。可設為： baseline：元素的基準線，與父矩格的基準線對齊。如果此元素沒有基準線，則以其底部對齊。此為預設值。長度：元素矩格的基準線，與父矩格的基準線的距離。正值向上，負值向下。百分比： line-height 乘上百分比，得出上面的基準線距離。 top：元素矩格的頂線，與父元素的頂線對齊。 middle：元素矩格的中線，與父矩格的基準線加 x-height/2 對齊。 bottom：元素矩格的底線，與父元素的底線對齊。 text-top：元素矩格的頂線，與父元素文字的頂線對齊。 text-bottom：元素矩格的底線，與父元素文字的底線對齊。 sub：設定下標字位置。 super：設定上標字位置。 inherit：

line-height

2008-11-14T07:34:00.014+08:00

font-size, font-size-adjust, font-stretch | line-height line-height此特徵針對區塊元素內含的文字行元素，設定文字行矩格的最小高度。大部分瀏覽器也接受在文字行元素使用此特徵，參見下面的範例。可設為： normal：依據字型的高度計算矩格的高度，此為預設值。數值：字型的高度乘上此數值，不可用負數。此項在 Firefox, Safari, Chrome 必須用在區塊元素方有效果，下面實測時使用 SPAN 會失敗；但在 IE6 則可以用在文字行元素。長度：用長度設定矩格的高度，不可用負數。百分比：字型的高度乘上百分比，不可用負數。 inherit：繼承父元素的特徵值。 line-height: normal 子曰：有朋自遠方來，不亦樂乎？子曰：有朋自遠方來，不亦樂乎？

letter-spacing, white-space, word-spacing, word-wrap

2008-11-13T20:11:00.024+08:00

letter-spacing | white-space | word-spacing | word-wrap letter-spacing 設定字母的間距，可設為： normal：使用字型原有的字距。允許展現程式改變字距，以達到文字對齊之目的。此為預設值。長度：設定長度，加在原有字型的字距。可用負值。不允許展現程式再改變字距。 inherit：繼承父元件的特徵值。子曰：學而時習之，不亦說乎？子曰：有朋自遠方來，不亦樂乎？子曰：人不知而不慍，不亦君子乎？ dumpSample('SPletter') word-spacing 設定詞的間距。這對連續的中文沒有效果，要加上空白才會有效果。可設為： normal：使用字型或展現程式內定的詞距。此為預設值。長度：設定長度，

bottom, left, right, top

2008-11-13T16:20:00.018+08:00

position | bottom | left | right | top 設定元素的矩形格子（box）之位置。用在 position 特徵設為 relative, absolute, fixed 時使用。 bottom（一）當元素的 position 設為 absolute 或 fixed 時，此特徵指定元素外緣（margin）的底邊，距離包納區塊（containing block，通常是父矩格或是視窗）底邊的長度。也就是底邊到底邊的距離。（二）當元素設為 position:relative 時，會先計算元素的正常位置，再向上移動 bottom 的值。此特徵可為負值。可設為：長度：設定距離。百分比：相對於包納區塊的高度的百分比。

height, max-height, min-height

2008-11-13T13:54:00.016+08:00

height | max-height | min-height 設定元素矩形格子的高。可以用 width 設定矩格的寬。 height 設定元素的高度，不可為負值。min-height, max-height 會改寫 height。可設為：長度：用長度設定元素的高度。百分比：相對於包納區塊（containing block）高度的百分比，也就是父元素的高度。如果包納區塊的高度沒有宣告，而是由內容決定其高度，則此參數與 auto 相同。 auto：依據其它特徵決定高度，此為預設值。 inherit：繼承父元素特徵。 John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.

font, font-family, font-style, font-variant, font-weight

2008-11-13T10:11:00.009+08:00

font | font-family | font-style | font-variant | font-weight font 可以一次設定 font-style, font-variant, font-weight, font-size, line-height, font-family。font 會先將所有字型特徵設為預設值，然後再依其後接的參數，設定個別值。其語法是： font: font-size font-family font-size, font-family 是最基本的兩項，一定要有。然後依序加上其它項目，秩序不對可能會導致失敗。 font: [ font-style | font-variant | font-weight ] font-size [ / line-height ] font-family 此特徵的值可設為：

float

2008-11-13T06:56:00.010+08:00

clear | float float指定元素是否浮動。可設定的值有：left：元素的矩格向容器的左邊靠。其它內容，則由此元素的右邊通過，開始位置與此元素的上方對齊；文字與文字行元素（inline）會圍繞此元素。display 特徵失效，除非是 display:none。 right：元素的矩格向容器的右邊靠。其它內容，則由此元素的左邊通過，開始位置與此元素的上方對齊；文字與文字行元素會圍繞此元素。display 特徵失效，除非是 display:none。 none：元素不浮動，此為預設值。 inherit：繼承父元素的特徵值。後面的元素要用 CLEAR 特徵，才能清除 float 元素的影響。 John F. Kennedy said: ask not what your country can do for you - ask

display

2008-11-13T06:20:00.014+08:00

display 指定元素的展現方式，可設定的值有： inline：指定元素產生數個文字行的矩格（box），前後都沒有跳行。此為預設值。 block：指定元素產生一個主要的區塊元素的矩格，前後都加跳行。 inline-block：放在文字行中的區塊。 list-item：將元素變成清單的一個項目元素，還會加上項目編號。之前的 LI 元素，也會影響到編號。 run-in：依據前後文的文理，決定產生文字行矩格或區塊矩格。如果一個 run-in 元素的矩格，後接一個區塊矩格，此區塊沒設為 float，也沒設為 position:absolute；則此 run-in 元素變成此區塊的第一個文字行矩格。其它情形時，此 run-in 元素是區塊矩格；雖然官方手冊說是區塊矩格，但是後面的測試結果，則是文字行矩格。 compact：依據前後文的文理，

direction, unicode-bidi

2008-11-12T20:19:00.019+08:00

direction | unicode-bidi direction 此特徵可以指定區塊元素的文字書寫方向，及文字行（inline）元素的展現方向。unicode-bidi 必須設為 embed 或 bidi-override 才能使此特徵產生效果。 ltr：文字或其它元素由左向右展現，此為預設值。 rtl：文字或其它元素由右向左展現。 inherit：繼承父元素的特徵值。 .rtl {direction:rtl; unicode-bidi:bidi-override; width:200px } John F.

cursor

2008-11-12T16:47:00.008+08:00

cursor 指定滑鼠游標的型態。其語法是： cursor:游標型態 cursor: [x y] ,游標型態可設多個，兩個用”,”分隔。如果第一個找不到，會用第二個，依此類推。每一個可選擇性設 x, y 作為指標位置，兩個必須同時設，缺一會導致失敗。x, y 為數值，是以游標圖形的左上角為 (0, 0) 原點之座標值。最後設定一個游標型態，當都失敗時，可用此游標。使用最後一定要接一個游標型態，否則會失敗。在 IE 瀏覽器，兩個之間還可以插入游標型態，這在 Firefox 會導致失敗，建議勿用。可設定的值有： URI：指定游標圖檔的網址。游標型態：auto, default, none。context-menu, help, pointer

cue, cue-after, cue-before

2008-11-12T16:13:00.003+08:00

用來產生聲音輸出。 cue 可設定的值有：：指定兩個聲音資源的網址，依先後秩序分別為 cue-before, cue-after。只設一個網址時，兩者用相同值。 inherit：繼承父元件的特徵值。 cue-after 在元件之後發出聲音，可設定的值有：：指定聲音資源的網址。 none：沒有聲音。 inherit：繼承父元件的特徵值。 cue-before 在元件之前發出聲音，可設定的值有：：指定聲音資源的網址。 none：沒有聲音。 inherit：繼承父元件的特徵值。

counter-increment, counter-reset

2008-11-12T15:46:00.016+08:00

counter-reset | counter-increment 這兩個特徵用在計數器，作文章章節的自動編號。IE6 沒支援計數器；IE8, Firefox3.0, Safari, Chrome 都有支援。 counter-reset 宣告重設計數器的條件；如果一個條件式同時增加與重設計數器時，會先重設計數器再增加其值。可設定的值有： identifier integer：指定計數器名稱與整數重設值。可以不設重設值，用預設的值 0。可以一次宣告多個計數器名稱與其重設值。 none：無計數器。 inherit：繼承父元素的特徵值。讀取計數器值的語法是： counter(計數器名稱, list-style-type) list-style-type 指定編號的型態；可不設 list-style-type，使用預設的數字編號。可用在

quotes

2008-11-12T13:36:00.005+08:00

quotes 此特徵宣告左括號（open-quote）與右括號（close-quote），可以配合 content 特徵使用。可設定的值有：：設定字串。宣告一對字串，用作左括號與右括號。可以一次宣告數個字串對，前面的用在外層，後面的用在內層。 none：沒有括號。 inherit：繼承父元素的特徵值。第一層第二層第三層夾括號角括號箭括號 dumpSample('SPq') 上例 Firefox 成功；IE6, Safari, Chrome 失敗。配合 :after, :before, content 使用。 .quo {quotes:' { ' ' } ' ' [ ' ' ] ' ' ( ' ' ) ' } .quo SPAN:before {

content

2008-11-12T10:57:00.007+08:00

content 此特徵配合 :after, :before 使用，可以在文件中加入內容。可設定的值有：：設定字串。：設定資源網址，可設多個 url(網址)。：設定計數器。請參考計數器的說明與範例。 attr(X)：可將 X 屬性的內容取出。 open-quote：加上 quotes 特徵所宣告的左括號字串。 close-quote：加上 quotes 特徵所宣告的右括號字串。 no-open-quote：不加括號字串，但增加一層括號巢（nesting）。 no-close-quote：不加括號字串，但減少一層括號巢。 inherit：繼承父元件的特徵值。測試字串與 attr(X)。 .cls:before { content: attr(title)"："; color:blue }

color

2008-11-12T10:07:00.005+08:00

color 設定元素的前景色，也就是文字的顏色。可設定的值有：：設定顏色。 inherit：繼承父元素的特徵值。子曰：學而時習之，不亦說乎？子曰：有朋自遠方來，不亦樂乎？子曰：人不知而不慍，不亦君子乎？ dumpSample('SPcolor') :HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 .hvr {width:200px; height:100px; border:solid 1px red; } .hvr:hover {color:red;} .hvr:active {color:blue;} 射擊遊戲, 好玩遊戲, 賽車遊戲, 小遊戲

clip

2008-11-12T09:45:00.007+08:00

clip 設定一塊矩形格子（box），元素的內容可以顯示在其中，超出部分會隱藏。預設為元素的矩格。使用 clip 必須將 position 設為 absolute 或 fixed。可設定的值有：：可以設為矩形 rect(上, 右, 下, 左)。上右下左是相對於元素矩格的左上角的距離。上右下左可設為或是 auto。auto 是與元素矩格相同。 auto：切割區尺寸與元素的矩格相同，此為預設值。 inherit：繼承父元素的特徵值。下面的第二張圖像設了 clip: rect(10px, auto, 170px, 40px);

clear

2008-11-12T08:08:00.010+08:00

clear | float clear當元素的前面有浮動元素（float）時，可以清除浮動的效力。只能用在區塊（block）層元素；實際測試發現，IE6 的 SPAN 加上 clear，也有效果；但是 Firefox, Safari, Chrome 則沒效果。可設定的值有： none：此元素可以與前面所有浮動元素左右鄰接，此為預設值。 left：如果此元素前有元素設為 float:left，則清除其效力。此元素接在前面所有左浮元素的下方。 right：如果此元素前有元素設為 float:right，則清除其效力。此元素接在前面所有右浮元素的下方。 both：清除所有 float 的效力。此元素一律接在前面所有浮動元素的下方。 inherit：繼承父元素的特徵值。下面的圖形設為 floar:right，所以文字的繞著圖。請參考 float 的說明。 caption-side 指定報表（TABLE）的標題放置的方位。此特徵只有 Firefox 有完整支援。可設定的值有： top：標題放在報表的上方，此為預設值。 bottom：標題放在報表的下方。 left：標題放在報表的左側。 right：標題放在報表的右側。 inherit：繼承父元件的特徵值。測試 top .tbl {width:40%} .tbl TD {border:2px solid red} 歌星蔡依林曾沛慈周杰倫蕭敬騰 dumpSample('SPtop') 測試 bottom 歌星蔡依林曾沛慈周杰倫蕭敬騰 dumpSample('SPbottom') Firefox, Safari, Chrome 會將標題”歌星”放在報表的下方；IE

border-collapse, border-spacing, empty-cells

2008-11-11T21:23:00.012+08:00

以下特徵可以用來設定報表（TABLE）內的小格子（cell）的邊線之展現方法。另外也可以用 border, padding, outline 設定格子的邊界。 border-collapse | border-spacing | empty-cells border-collapse 設定報表（TABLE）內的格子的邊線，有兩種風格，可設定的值有： collapse：所有的邊線都連在一起，此為預設值。TABLE 元素的邊線重疊時，要依據邊線衝突解決法。 separate：每一個格子都有各自的邊線。雖然官方手冊說 collapse 是預設值，可是下面的範例顯示，主要的瀏覽器都將 separate 定為預設值。 inherit：繼承父元件的特徵值。 .clp {width:40%} .clp TD {border:2px

border, border-color, border-style, border-width

2008-11-11T19:44:00.020+08:00

設定元件邊線的風格。由於 border-style 的預設值為 none，沒有邊線；所以一定要將此特徵設為其它值，才能畫出邊線。有關元素的邊界請參考 border, margin, padding, outline。 border | border-上右下左 | border-color | border-style | border-width border 一次設定四周邊線的三個特徵：寬（border-width），顏色（border-color），型態（border-style）。設定時，會先將所有邊線相關特徵設為預設值，然後再依後接的值設定個別的特徵；沒有個別設定值的特徵，就使用預設值。可設的特徵值請參考各項的說明。好玩遊戲，射擊遊戲，空戰遊戲，賽車遊戲，益智遊戲 dumpSample('SPborder') 上例中，

background, background-attachment, background-image

2008-11-11T15:48:00.016+08:00

設定元件的背景風格。 background | background-attachment | background-image background 可以同時設定背景的 background-attachment, background-color, background-image, background-position, background-repeat。使用此特徵時，會先將所有背景的特徵設為初值，然後再依據後接的特徵值設定個別的特徵。可設的特徵值，請參考各個特徵的說明。射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. dumpSample('SPscroll') background-attachment 當背景圖有設定時，

空間性能： azimuth, elevation

2008-11-11T13:34:00.003+08:00

azimuth | elevation | 這兩個特徵主要用在立體聲音的產生。主要瀏覽器都沒有支援。 azimuth 用來指定發聲水平方位，以角度表示。可將聲音訊號分送給不同的通道，以不同的音量播出，然後作出發聲位置的變化感。初值為 center。特徵值可設為：：用數值表示的角度。 left-side：等於 270deg。 far-left：等於 300deg。 left：等於 320deg。 center-left：等於 340deg。 center：等於 0deg。 center-right：等於 20deg。 right：等於 40deg。 far-right：等於 60deg。 right-side：等於 90deg。 leftwards：依據現在角度左移 20deg。 rightwards：依據現在角度右移 20deg。

特徵值表示法

2008-11-11T10:02:00.022+08:00

長度 | 百分比 | URI | 計數器 | 顏色 | 角度 | 時間 | 頻率 | 字串長度長度的格式為，一數值加上單位符號。數值可是整數或有小數點，前可加上 + 或 -。長度分為：絕對長度：只能用在特定的輸出裝置。in，英吋。cm，公分。mm，公厘。pt，等於 1/72 英吋。pc，等於 12 pt。相對長度：可在不同的輸出裝置轉換。em 是元素字型的大小（1em 等於 font-size）。ex 是小寫字母的高度（1ex 等於 x-height）。px 是圖素。ch 是字母 0 的寬度，限 Firefox 使用。 .len DIV {background:blue; float:left; margin:0 4px; padding:0;

[att], [att=val], [att~=val], [att|=val], [att^=val], [att$=val], [att*=val]

2008-11-11T05:57:00.011+08:00

att | att=val | att~=val | att|=val | att^=val | att$=val | att*=val 針對元素的屬性，符合指定的條件時，設計特別的風格。 IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。 [att] 當元素有設定屬性 att 時，會採用此設計的風格。 I[title] { color:red } 孔子說：有朋自遠方來，不亦樂乎！孔子說：有朋自遠方來，不亦樂乎！ dumpSample('spi1') 例中第二句用了 TITLE 屬性，所以採用了設計的風格，用紅色。 [att=val] 元素有設定屬性 att，而且其值等於 val，會採用此設計的風格。 I[lang='

:AFTER, :BEFORE, ::FIRST-LETTER, ::FIRST-LINE, ::SELECTION

2008-11-10T17:02:00.023+08:00

:AFTER | :BEFORE | ::FIRST-LETTER | ::FIRST-LINE | ::SELECTION :AFTER:BEFORE :AFTER 指定一個元素的結束點之後，設計獨特的風格。:BEFORE 指定一個元素的開始點之前，設計獨特的風格。可以配合 CONTENT 特徵，加上文字或其它內容。有些特徵不能用在 :after, :before 後：例如 position, float, list 特徵組, table 特徵組。 I:before { content:open-quote; color:red } I:after { content:close-quote; color:red } .quo:before { content:'＜' ; color:red } .quo:after {

:ACTIVE, :FOCUS, :HOVER, :LANG, :LINK, :VISITED

2008-11-10T14:14:00.037+08:00

:ACTIVE | :FOCUS | :HOVER | :LANG() | :LINK | :VISITED 準類別（Pseudo-classes）利用元素的狀態來選取元素，設計不同的風格。準類別的大小寫字母相同。可分為：子元素準類別：FIRST-CHILD, LAST-CHILD, NTH-CHILD, NTH-LAST-CHILD，指定的元素為某元素的子元素。子型態準類別：FIRST-OF-TYPE, LAST-OF-TYPE, NTH-OF-TYPE, NTH-LAST-OF-TYPE, ONLY-OF-TYPE，指定的元素為某元素的子元素。超連結準類別：LINK, VISITED，依超連結元素的狀態分類。動態準類別：ACTIVE, FOCUS, HOVER，對於用戶施於互動式元素的不同行動，可以設計不同的展現風格。語言準類別：LANG()，依元素的屬性