螞蟻的 CSS

URL, 計數器

長度 | 百分比 | URI | 計數器 | 顏色 | 角度 | 時間 | 頻率 | 字串

URI

URI 指到資源的位址。可用函式 url('資源網址') 指定。資源網址可用 ' ' 或 " " 作首尾標示；或不加標示也可。可用相對於風格表網址的資源網址。( ) , 空白 ' " 左列符號必須加上脫離字 \。也可用 URI 脫離字碼。

範例中，用 url() 指定一張圖像作為 P 元件的背景。

計數器

可用來計算章節或頁數。計數器起始值為 0。計數器可用 counter-increment, counter-reset 改變其值。計數器的值必須用 CONTENT 特徵擷取。

參用計數器的值的方法有：counter(identifier), counter(identifier, list-style-type)。參用數個巢狀式同名的計數器的方法有：counters(identifier, string), counters(identifier, string, list-style-type)。

IE6 沒有支援 counter；IE8, Firefox3.0, Safari, Chrome 都可用。 <style type='text/css'> p.ctr { counter-increment: pnum } h3.ctr { counter-reset: pnum } p.ctr:before { content: "＜"counter(pnum, upper-roman)"＞" } </style> <h3 class='ctr'>子曰：</h3> <p class='ctr'>學而時習之，不亦說乎？</p> <p class='ctr'>有朋自遠方來，不亦樂乎？</p> <p class='ctr'>人不知而不慍，不亦君子乎？</p>

範例中，計數器的名稱是 pnum。遇到類別為 ctr 的 H3 元件，pnum 會設為 0。遇到類別為 ctr 的 P 元件，pnum 會加 1，並且在其前面加上計數器值。文句多加上了 I, II, III 是計數器的值。

顏色第二頁

長度 | 百分比 | URI | 計數器 | 顏色 | 角度 | 時間 | 頻率 | 字串

顏色 2

顏色有七種表示法：

hsla(顏色, 飽和, 亮度, 透明)函式法：第四個參數透明值由 0（完全透明）至 1（完全不透明）。此函式是 CSS3 的提案，Firefox, Safari, Chrome 可用；IE6 無此項。 <div style='position:relative;'> 透明的可以看到底下的字。 <table style='position:absolute; top:0; left:0'> <tr> <td style='width:60px;background:hsla(120,100%,50%, 0.2)'> <td style='width:60px;background:hsla(120,100%,50%, 0.6)'> <td style='width:60px;background:hsla(120,100%,50%, 1)'> </table> </div>
用戶偏好顏色：展現程式會自用戶的圖形視窗中取得相關顏色，設定下面的顏色名稱：
- ActiveBorder：運轉視窗邊線。
- ActiveCaption：運轉視窗標題。
- AppWorkspace：多文件介面的背景色。
- Background：桌面背景色：
- ButtonFace：三度空間顯示元件的面色。
- ButtonHighlight：三度空間顯示元件的暗影。
- ButtonShadow：三度空間顯示元件的陰影顏色。
- ButtonText：按鈕上的文字，其顏色。
- CaptionText：標題的文字，其顏色。
- GrayText：灰色文字。
- Highlight：項目被選擇。
- HighlightText：被選擇項目，其文字的顏色。
- InactiveBorder：暫停視窗的邊線。
- InactiveCaption：暫停視窗的標題。
- InactiveCaptionText：暫停視窗的標題，其文字的顏色。
- InfoBackground：工具提示的背景色。
- InfoText：工具提示，其文字的顏色。
- Menu：選單的背景色。
- MenuText：選單，其文字的顏色。
- Scrollbar：捲軸的灰區。
- ThreeDDarkShadow：三度空間顯示元件的暗影。
- ThreeDFace：三度空間顯示元件的面色。
- ThreeDHighlight：三度空間顯示元件的強調色。
- ThreeDLightShadow：三度空間顯示元件的暗色。
- ThreeDShadow：三度空間顯示元件的陰影。
- Window：視窗背景色。
- WindowFrame：視窗框架的顏色。
- WindowText：視窗內，文字的顏色。
上述的顏色名稱可不分大小寫。

使用顏色要小心調整背景色與文字色，以免色盲者看不見。最佳辨識度的色組是：白色的背景與黑色的文字，粗體字會更好。

顏色（你正在看第二頁）

2013/01/09

顏色第一頁

長度 | 百分比 | URI | 計數器 | 顏色 | 角度 | 時間 | 頻率 | 字串

顏色 1

顏色有七種表示法：

預設的 16 個顏色的英文名稱：

	Black（#000000）		Silver（#C0C0C0）
	Gray（#808080）		White（#FFFFFF）
	Maroon（#800000）		Red（#FF0000）
	Purple（#800080）		Fuchsia（#FF00FF）
	Green（#008000）		Lime（#00FF00）
	Olive（#808000）		Yellow（#FFFF00）
	Navy（#000080）		Blue（#0000FF）
	Teal（#008080）		Aqua（#00FFFF）

擴充的英文顏色名稱：總共 124 個英文顏色名稱，此處只列出一小部分好記的。

Brown	Chocolate	Coral	Crimson	Cyan
Gold	Ivory	Linen	Orange	Orchid
Pink	Peru	Plum	Salmon	Seashell
Skyblue	Snow	Tomato	Violet	Wheat

十六進位數值：數值 #RRGGBB，以 # 為前導，每一個顏色兩位數（00 - FF）。 R 代表紅色（red），G 代表綠色（green），B 代表藍色（blue）。
數值 #RGB，每一個顏色一位數（0 - F）。此數值會自動擴展為 #rrggbb。

#ff0000 #f00 #00ff00 #0f0 #0000ff #00f
rgb(R, G, B)函式法：數值可用 0 到 255 的整數；或用百分比數 0.0% 至 100.0%。Firefox 使用百分比值，必須三個值都是百分比值；IE6, Safari, Chrome 則可以混用整數與百分比。下面第二列的第二個顏色 rgb(127,100%,0%)，在 Firefox 無法解讀。

   rgb(255,0,0)    rgb(255,255,0)    rgb(255,0,255)
   rgb(0%,100%,0%)    rgb(127,100%,0%)    rgb(0%,100%,50%)
   rgb(0,0,255)    rgb(127,0,255)    rgb(0,127,255)
rgba(R, G, B, 透明)函式法：第四個參數透明值由 0（完全透明）至 1（完全不透明）。此函式是 CSS3 的提案，Firefox, Safari, Chrome 可用；IE6 無此項。 <div style='position:relative;'> 透明的可以看到底下的字。 <table style='position:absolute; top:0; left:0'> <tr> <td style='width:60px;background:rgba(255,0,0, 0.2)'> <td style='width:60px;background:rgba(255,0,0, 0.6)'> <td style='width:60px;background:rgba(255,0,0, 1)'> </table> </div>

hsl(顏色, 飽和, 亮度)函式法：顏色值由 0 到 360。0 或 360 是紅色，120 是綠色，240 是藍色；中間值代表兩色的混合。飽和值由 0% 到 100%。亮度值也是由 0%（黑）到 100%（白），50% 為平均值。此函式是 CSS3 的提案，Firefox, Safari, Chrome 可用；IE6 無此項。

hsl(0,100%, 50%)	hsl(60,100%, 50%)	hsl(0,50%, 50%)	hsl(0,100%, 25%)
hsl(120,100%, 50%)	hsl(180,100%, 50%)	hsl(120,50%, 50%)	hsl(120,100%, 25%)
hsl(240,100%, 50%)	hsl(300,100%, 50%)	hsl(240,50%, 50%)	hsl(240,100%, 25%)

顏色（你正在看第一頁）

first-line

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

::FIRST-LINE

對一小段文字的第一行，設計獨特的風格。只能用在區塊元素。

改寫 ANCHOR，將 :hover, :active 狀態傳給子元素；如此在 IE6 中，也可以使用 :hover, :active 於一般元素。 <style type='text/css'> .akr {display:block; width:200px; color:white; } .akr:link {text-decoration:none; color:white; } .akr:visited {text-decoration:none} .akr:hover {background:black; color:white} .akr:hover P {border:solid 1px red} .akr:hover P:first-letter {font-size:2em; color:blue} .akr:active P {border:solid 4px green} .akr:active P:first-line {font-size:2em; color:red} </style> <a href='javascript:void(0)' class=akr> <p>Not ask what your country can do for you, ask what you can do for your country.</p> </a>

上例，在 Firefox 中 first-letter, first-line 失敗；IE6, Safari, Chrome 成功。
移到部落格後，在 IE6 出現 :link 的字不是白色的情形。

::SELECTION

使用者用滑鼠選一段文字，會應用此設計風格。Firefox 3.5 要用 ::-moz-selection；Safari, Chrome 要用 ::selection。此項可使用的特徵有 color, background, background-color；background-image 及其它特徵會被忽略。此項可能會從 CSS3 的草稿中拿掉。 <style type='text/css'> .sel::selection {color:blue; background:red; font-size:200%; } .sel::-moz-selection {color:blue; background:red; font-size:200%; } </style> <p class='sel'> 請用滑鼠選一段文字：射擊遊戲，賽車遊戲，益智遊戲，好玩遊戲，武打遊戲。</p>

IE6 無此項；Firefox, Safari, Chrome 皆成功。
上例中的 font-size 被忽略。

display 第三頁

display 3

測試 compact。 <style type='text/css'> .inl { width:250px; background:#337; font-size:80% } </style> <span style='display:compact'> John F. Kennedy said: </span> <span class=inl> ask not what your country can do for you </span> - ask what you can do for your country.

IE6, Firefox3.0 無法展現。IE8, Safari, Chrome 都正常展現。

測試 table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption。 <style type='text/css'> .tbl {display:table; border-spacing:16px} .tr {display:table-row} .td {display:table-cell; border:solid 4px red} </style> <div class=tbl> <div class=tr> <div class=td>益智遊戲</div> <div class=td>空戰遊戲</div> </div> <div class=tr> <div class=td>賽車遊戲</div> <div class=td>益智遊戲</div> </div> </div>

上例，IE6 失敗；Firefox, Safari, Chrome 成功。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:120px; background:blue; overflow:hidden; white-space:nowrap; } .hvr:hover {display:inline;} .hvr:active {display:inline-block; vertical-align:middle; white-space:pre; } </style> <p class='hvr'>好玩遊戲, 射擊遊戲, 賽車遊戲, 小遊戲. </p> 免費玩

上例，Firefox 完全成功；Safari, Chrome 失敗。

javascript 應用。可以用 style 物件的特徵 display 作動態變化。此範例使用到 toggleCSS()。 <div id='test' style='background:red; width:200px; height:150px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. </div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "display", "block", "inline", 1500); </script>

display（你正在看第三頁）

display 第二頁

display 2

測試 inline-block。 子曰：<span style='background:#733'> 學而時習之，<br />不亦說乎？</span>記性差 <p><br /> 子曰：<span style='display:inline-block; background:#733'> 人不知而不慍，<br />不亦君子乎？</span>沒人愛

測試 list-item。 <style type='text/css'> .lst {display:list-item; list-style-type:decimal; } </style> <span class=lst>射擊遊戲：<p>大戰火星人。</span> <span class=lst>競速遊戲：<p>狂飆快艇。</span>

上例的項目數字，在 IE6 是 2, 1；在 Firefox, Safari, Chrome 是 3, 4。

測試 run-in。 <style type='text/css'> .inl { width:250px; background:#337; font-size:80% } </style> <h3 style='display:run-in'>John F. Kennedy said:</h3> <span class=inl>ask not what your country can do for you </span> - ask what you can do for your country. <p> <h3 style='display:run-in'>John F. Kennedy said:</h3> <div class=inl>ask not what your country can do for you </div> - ask what you can do for your country.

上例，IE6, Firefox3.0 無法展現。IE8, Safari, Chrome 都正常展現。

display（你正在看第二頁）

2013/01/08

font-family

font | font-family | font-style | font-variant | font-weight

font-family

設定一組字型家族名稱或一般字型家族名稱，有相同的風格與尺寸。設定多個字型名稱時，兩個字型名稱用”,”隔開。瀏覽器會先用第一個字型，如果第一個字型找不到就用第二個字型，依此類推；通通找不到就用系統預設字型。

XP 系統的大陸版有附中文字型：宋体(simsun/nsimsun)，黑体(simhei)，楷体(simkai)，仿宋(simfang)。XP 系統的台灣版有附中文字型：細明體 (Mingliu)，新細明體 (PMingliu)，標楷體(DFKai-sb)，simsun，黑体(simhei)。

此特徵的值可設為：

字型家族：設定一組字型家族名稱或一般字型家族名稱。一般字型家族有：serif, sans-serif, cursive, fantasy, monospace。另有等寬字型。
inherit：繼承父元素特徵。

font-style

設定字的風格，可設為：

normal：預設值。
italic：斜體字。
oblique：將正常字傾斜。
inherit：繼承父元素特徵。

font-weight

font | font-family | font-style | font-variant | font-weight

font-weight

設定字體的粗細，可設為：

normal：等於 400，此為預設值。
bold：粗體字，等於 700。
bolder：粗些，以父元素的字為準。
lighter：細些，以父元素的字為準。
100 到 900 的數字，由細到粗。
inherit：繼承父元素特徵。

數字粗細。 <span style='font-weight: 100' >100</span> <span style='font-weight: 300' >300</span> <span style='font-weight: 500' >500</span> <span style='font-weight: 700' >700</span> <span style='font-weight: 900' >900</span>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:200px; height:150px; border:solid 1px red; font-weight:100; } .hvr:hover {font-style:italic;} .hvr:active {font-weight:900;} </style> <div class=hvr> 射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </div>

javascript 應用。可以用 style 物件的特徵 font, fontFamily, fontStyle, fontVariant, fontWeight 讀取或設定特徵值。 <div id='atr3' style='font: small-caps italic bold 24px /120% serif; background:red; width:300px; height:150px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.font +'<br />'+ os.fontFamily +'<br />'+ os.fontStyle +'<br />'+ os.fontVariant +'<br />'+ os.fontWeight ); </script>

不同瀏覽器的輸出格式有不同。
Safari, Chrome 沒輸出 fontFamily, fontStyle, fontVariant, fontWeight；IE6, Firefox 全有。

line-height 第二頁

font-size | font-size-adjust | font-stretch | line-height

line-height 2

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:150px; height:120px; border:solid 1px red; line-height:20%; } .hvr:hover {line-height:100%;} .hvr:active {line-height:180%;} </style> <div class=hvr>射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </div>

javascript 應用。可以用 style 物件的特徵 lineHeight，作動態變化。 <div id='test' style='background:#339; width:100px'>變長變短</div><script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "lineHeight", "24px", "40px", 1500); </script>

line-height（你正在看第二頁）

margin 第三頁

margin | margin-bottom, margin-left, margin-right, margin-top

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {margin:0px;} .hvr:hover {margin:20px;} .hvr:active {margin:40px;} </style> <div style='width:300px; height:300px; background:#733'> <img class=hvr src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> <hr /> </div>

javascript 應用。可以用 style 物件的特徵 margin, marginBottom, marginLeft, marginRight, marginTop 讀取或設定特徵值。 <div id='atr3' style='margin:1px 5px 9px 11px;background:red; width:200px; height:150px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.margin +'<br />'+ os.marginTop +'<br />'+ os.marginRight +'<br />'+ os.marginBottom +'<br />'+ os.marginLeft ); </script>

margin（你正在看第三頁）

margin 第二頁

margin | margin-bottom, margin-left, margin-right, margin-top

margin-bottom
margin-left
margin-right
margin-top

分別設定元件矩框的上右下左外緣寬度，可為負值，預設值為 0。可設為：

長度：設定外緣寬度。
百分比：相對於包納矩框的寬度的百分比，作為外緣寬度。
auto：系統決定，此為預設值。
inherit：繼承父元件的特徵值。

上例中，第二張圖設了 margin-left:-10000px，所以圖被移到視區之外。有時候你會用到這個方法藏圖，然後再用 javascript 修改 margin 將圖變回來。

margin（你正在看第二頁）

展開式選單第二頁

使用 ANCHOR 來作展開式選單。由於在 IE6 中 :hover 只能用在 ANCHOR 元素，所以下面的範例使用了註解條件式（Conditional Comment）在 IE6 瀏覽器中加上 ANCHOR 元素與 TABLE 元素，將子選單包起來，其它瀏覽器則不包夾。然後風格表中有兩個 :hover 條件 li:hover 與 a:hover，分別用在不同的瀏覽器。實測時，曾使用 display:none 取代 visibility:hidden，但是在 IE6 會出現殘影。 <style type="text/css"> .menu * {margin:0; padding;0} .menu {position:relative; z-index:10; font-size:16px; } .menu ul {list-style:none;} .menu li {float:left; position:relative; } .menu ul ul {visibility:hidden; position:absolute; top:24px; } .menu table {position:absolute; top:0; left:0;} .menu ul li:hover ul, .menu ul a:hover ul {visibility:visible;} .menu a {display:block; background:red; margin:4px; } .menu a:hover {border:1px solid white;} .menu ul ul li {clear:both;} .menu ul ul li a {display:block; width:120px; margin:0; } </style> <div class="menu"> <ul> <li><a href="#">動作遊戲 </a>  <ul> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a> </ul>  </li> <li><a href="#">競速遊戲 </a>  <ul> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a> <li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a> </ul>  </li> </ul> </div>

展開式選單（你正在看第二頁）

box-shadow 第二頁

box-shadow | box-sizing

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type="text/css"> .hvr {-moz-box-shadow: 0px 0px 10px red; -webkit-box-shadow: 0px 0px 10px red; box-shadow: 5px 5px 10px red; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='red'); display:block; width: 100px; height:60px; background:black; } .hvr:link, .hvr:visited {color:white;text-decoration:none;} .hvr:hover {-moz-box-shadow: 0px 0px 20px blue; -webkit-box-shadow: 0px 0px 20px blue; box-shadow: 5px 5px 10px red; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=-10, Color='blue'); background:black; color:white; } .hvr:active {-moz-box-shadow: 0px 0px 40px green; -webkit-box-shadow: 0px 0px 40px green; box-shadow: 5px 5px 10px red; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=10, Color='green'); } </style> <a class=hvr href='javascript:void(0)'>投影</a>

javascript 應用。可以用 style 物件的特徵 webkitBoxShadow 作動態變化。在 IE6 必須用 object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow(sProperties)" 作動態變化。 <p id='test' style='width:100px; height:60px; border:solid 1px white'>投影 </p><script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "boxShadow", "0px 0px 20px blue", "0px 0px 80px red", 500); /* 用在舊版的瀏覽器 toggleCSS("test", "webkitBoxShadow", "blue 0px 0px 20px", "red 0px 0px 80px", 500); */ /* 用在 IE toggleCSS("test", "filter", "progid:DXImageTransform.Microsoft.DropShadow(OffX=15, OffY=15, Color='red')", "progid:DXImageTransform.Microsoft.DropShadow(OffX=-15, OffY=-15, Color='blue')", 500); */ </script>

上例中使用了兩個 toogleCSS()，第二個是給 IE 使用；第一個在 Safari, Chrome 成功展現。

box-shadow（你正在看第二頁）

2013/01/07

準類別（Pseudo-classes）

準類別（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()，依元素的屬性 LANG 所設定的語言，設計不同的風格。

使用 IE 瀏覽器必須宣告 !DOCTYPE，才能使用完整的風格表功能。例如,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

:ACTIVE

請參考說明與範例。

:AFTER

請參考說明與範例。

:BEFORE

請參考說明與範例。

:CHECKED

:DISABLED

:ENABLED

:EMPTY

請參考說明與範例。

: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

請參考說明與範例。

:FIRST-LETTER

請參考說明與範例。

:FIRST-LINE

請參考說明與範例。

:FOCUS

請參考說明與範例。

:HOVER

請參考說明與範例。

:LANG()

請參考說明與範例。

:LINK

一個超連結元素未被連結的狀態，會應用此設計的風格。

:NOT()

請參考說明與範例。

:ROOT

請參考說明與範例。

:TARGET

請參考說明與範例。

:VISITED

請參考說明與範例。

:VISITED

:VISITED

一個超連結元素被參訪後，會應用此設計的風格。

依據階層原則，先定義的會被後定義的蓋掉。所以 A:hover 必須接在 A:link， A:visited 之後；A:active 要接在 A:hover 之後。 <style type='text/css'> a.t2 { text-decoration: underline overline; background: #ffdddd; } a.t2:link { color: blue } a.t2:visited { color: black ; text-decoration:line-through; } a.t2:hover { color: red; font-size:140%; } a.t2:active { color: green } </style> <a class='t2' href='http://www.nctu.edu.tw'>交通大學</a> | <a class='t2' href='http://www.ntu.edu.tw'>台灣大學</a> | <a class='t2' href='http://www.ncku.edu.tw'>成功大學</a>

將 :visited 狀態傳給子元素與下一個元素。下例用到 E + F 規則。 <style type='text/css'> .vs {border:solid 4px green; margin:6px} .vs SPAN {display:none} .vs:visited {text-decoration:none} .vs:visited SPAN {display:inline; background:white; color:red} .vs:visited + SPAN {display:none} </style> <a href='http://ant2legs.blogspot.com' class=vs>螞蟻的窩 <span> 這個站已經看過了。</span> </a> <span>歡迎參觀。</span>

上例，IE6 不支援 E + F 規則；Firefox, Safari, Chrome 成功。使用 E ~ F 規則可得到相同的結果。

點此回到準類別（Pseudo-classes）

vertical-align 第四頁

vertical-align 4

測試 TABLE。在 Firefox, Safari, Chrome 中，長度, 百分比, sub, super, text-top, text-bottom 是對齊基準線。在 IE6中，長度, 百分比, sub, super 會置中；text-top, text-bottom 則有效果。 <style type='text/css'> .vtc TR {width:100px; height:60px; background:#733; } </style> <table class=vtc> <tr><td>vertical-align: <td style='vertical-align: baseline'>baseline <td style='vertical-align: 20px'>20px <td style='vertical-align: 80%'>80% <td style='vertical-align: sub'>sub <td style='vertical-align: super'>super <tr><td>vertical-align: <td style='vertical-align: top'>top <td style='vertical-align: middle'>middle <td style='vertical-align: bottom'>bottom <td style='vertical-align: text-top'>text-top <td style='vertical-align: text-bottom'>text-bottom </table>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {display:inline-block; width:140px; height:100px; background:#733; vertical-align:middle; } .hvr:hover {vertical-align:top;} .hvr:active {vertical-align:bottom;} </style> 好玩遊戲：<span class=hvr>射擊遊戲, 賽車遊戲, 小遊戲.</span>

javascript 應用。可以用 style 物件的特徵 verticalAlign 作動態變化。此範例使用到 toggleCSS()。 <div style='height:150px'> 射擊遊戲, 好玩遊戲, <img id='test' width='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> 益智遊戲, 賽車遊戲. </div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "verticalAlign", "text-top", "text-bottom", 1000); </script>

vertical-align（你正在看第四頁）

vertical-align 第三頁

vertical-align 3

編排圖片。 <style type='text/css'> .vtc IMG {width:80px; height:80px; } </style> <div class=vtc> vertical-align: <img style='vertical-align: top' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> top<br /><br /> vertical-align: <img style='vertical-align: middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> middle<br /><br /> vertical-align: <img style='vertical-align: bottom' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> bottom<br /><br /> vertical-align: <img style='vertical-align: text-top' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> text-top / vertical-align: <img style='vertical-align: text-bottom' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> text-bottom<br /><br /> vertical-align: <img style='vertical-align: sub' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> sub / vertical-align: <img style='vertical-align: super' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> super<br /><br /> </div>

vertical-align（你正在看第三頁）

vertical-align 第二頁

vertical-align 2

測試對齊。 <style type='text/css'> .vtc SPAN {display:inline-block; width:100px; height:60px; background:#733; } </style> <div class=vtc> vertical-align:<span style='vertical-align: top'> top</span><br /><br /> vertical-align:<span style='vertical-align: middle'> middle</span><br /><br /> vertical-align:<span style='vertical-align: bottom'> bottom</span><br /><br /> vertical-align:<span style='vertical-align: text-top'> text-top</span><br /><br /> vertical-align:<span style='vertical-align: text-bottom'> text-bottom</span><br /><br /> vertical-align:<span style='vertical-align: sub'> sub</span> / vertical-align:<span style='vertical-align: super'> super</span> </div>

上例中的 text-bottom 在 Safari, Chrome 沒效果；在 IE6, Firefox 成功。
super 在 IE6 是與矩格的底邊對齊；在 Firefox, Safari, Chrome 是以文字行的基準線對齊。

vertical-align（你正在看第二頁）

padding 第二頁

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

分別設定元素矩格的上右下左內緣寬度，不可為負值，預設值為 0。可設為：

長度：設定內緣寬度。
百分比：相對於包納矩格的寬度的百分比，作為內緣寬度。
inherit：繼承父元素的特徵值。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {border:solid 1px red; padding:0px; background:gray; } .hvr:hover {padding:0px 20px;} .hvr:active {padding:0px 80px;} </style> <div> <img class=hvr src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div>

javascript 應用。可以用 style 物件的特徵 padding, paddingTop, paddingRight, paddingBottom, paddingLeft 讀取或設定特徵值。 <div style='padding:2px 2% 11px' id='pad'> 測試 </div> <script type='text/javascript'> var os=document.getElementById('pad').style; document.write( os.padding +'<br />'+ os.paddingTop +'<br />'+ os.paddingRight +'<br />'+ os.paddingBottom +'<br />'+ os.paddingLeft ); </script>

上例中的 padding，在 Firefox 輸出是『2px 2% 11px 2%』；在 IE6, Safari, Chrome 是『2px 2% 11px』。

padding（你正在看第二頁）