目前分類：CSS (19)
- Feb 12 Wed 2014 02:02
使用 CSS3 讓文字比較多比較長的連結自動換行
- Feb 12 Wed 2014 01:19
為 a:hover 的連結和底線指定不同的顏色
- Aug 24 Fri 2012 06:34
:hover 適用於任何 HTML 標籤（CSS）
首先要注意的是 :hover 不能用 inline CSS 來寫，只能寫在 <style> 標籤裡或 .css 檔案裡。
:hover 常與 <a> 連用，構成 a:hover，其實 :hover 也可與其他 HTML 標籤連用，也有效。
譬如 h6:hover {background-color:#D2EBFF}，同學把滑鼠指標移到下一行，就可以看到效果：
- Sep 21 Wed 2011 21:28
利用 HTML Table 及其 th td 的背景顏色差異偽裝成 HTML Table 的 border
效果如下：
| 一四七 | 二五八 | 三六九 |
|---|---|---|
| One | Two | Three |
| Four | Five | Six |
| Seven | Eight | Nine |
這裡 HTML Table 及其 cell 的背景色偽裝 border 預設 2px。想要該 border 變 1px 就給 table 用 CSS border-spacing:1px。效果如下：
| 一四七 | 二五八 | 三六九 |
|---|---|---|
| One | Two | Three |
| Four | Five | Six |
| Seven | Eight | Nine |
原理：table 的背景色同時也是 border 的背景色。td 的背景色與 table 的背景色不同（根據個人需要選擇是否指定 th 的背景色），這樣 td 的背景色就會把 table 的背景色擋掉，然後各個 td 的 cell 之間的空隙就會有 table 的背景色透過來看起來就像是各個 cell 之間的 border。那它其實不是 border 是 table 的背景顏色。
關鍵就是寫 CSS 給 table 和 th/td 指定不一樣的背景顏色：
- Sep 21 Wed 2011 18:49
使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px
效果如下：
| 一四七 | 二五八 | 三六九 |
|---|---|---|
| One | Two | Three |
| Four | Five | Six |
| Seven | Eight | Nine |
關鍵就是寫 CSS：
th, td {border:1px solid #aaa}
table {border-collapse:collapse}
本來我想只要設定 th td 的 CSS 就好，但測試的時候發現各個 table cell 的 border 相互之間有少許距離的間距，於是再設定 table 的 CSS 讓 border 都塌陷。
（這裡 th td 的 border 顏色 #aaa 可以更換）
- Jul 27 Wed 2011 21:20
IE 的某些 CSS 相容性問題可透過網頁第一行加入 HTML DTD 解決
範例：令網頁只有這一行內容：
<hr style=border-style:none>
此時用 Firefox 開網頁就會像預想的那樣一片空白，而用 IE8 開網頁依舊顯示一條 <hr> 水平線。
若要 IE8 顯示正確的結果，就在網頁的第一行寫 HTML 的 DTD。
- Jul 27 Wed 2011 17:43
使用 CSS 製作含有背景圖片的彩色 <hr>
- Jun 08 Mon 2009 15:25
維基百科樣式的連結背景圖片（CSS）
含有背景圖片的維基百科樣式的連結 Wikipedia 使用的 CSS
a {
background:url(背景圖片.png) right no-repeat;
padding-right:13px;
}
背景圖片 
是 10x10 像素，放在 <a> 的最右邊會和文字重疊在一起。所以給最右邊留 13 像素的 padding，那 padding 部份是沒有文字的，多出的 3 像素就作為背景圖片與文字之間保留的空白。
- Mar 20 Fri 2009 15:32
使用 CSS 美化 <hr> 水平線
<hr /> 預設是這個樣子：
通過 CSS：取消 <hr> 預設留有的 border，再指定 height 為 1 像素，並弱化 <hr> 的背景顏色。背景顏色這邊 IE6 不認 background-color，但可以使用 color 達到同樣效果。這樣所有瀏覽器的相容性就都不會有問題。
hr {
border:0; height:1px; background-color:#d4d4d4;
- Mar 06 Fri 2009 04:05
圖片形式的連結透過 a:hover 達到更換圖片的效果（CSS）（不支援 IE6）
聲明：不支援 IE6。因為有用到 a:hover img {display:none} 這樣的形式，經測試 IE6 中無效、IE7 和 IE8 RC1 沒問題。所以應該是 IE6 的 BUG。
預設不顯示連結使用的圖片，而是使用一個維度相同的問號圖片替代
。a:hover 時才顯示連結所使用的圖片。
示例 HTML 原始碼：
<a href="http://localhost"><img src="50.png"></a>
未加載 CSS 時的效果（連結使用的圖片維度是 50x50 像素）：
- Mar 05 Thu 2009 13:31
CSS 選擇器「E F」的套用範圍
例如一個「E F」選擇器：
div img {border: 1px solid #f6871d}
它套用於 <div> 標籤中的 <img>，分為兩種情況。
第一種：<div> 與 <img> 相鄰。
- Mar 05 Thu 2009 03:13
通過 CSS 實現 <div> 標籤中的文字垂直居中
既然是要垂直居中，那麼就必需指定文字所在 HTML 標籤的寬度和高度。例如：
div { width:106px; height:40px }
文字是直接裝在 <div> 標籤中，HTML 原始碼如下：
<div>參觀人氣</div>
文字預設顯示在左上角：
- Mar 02 Mon 2009 18:03
IE6、IE7、IE8，對於 CSS 的相容性不同
IE6、IE7、IE8，儘管它們都稱為 IE 瀏覽器，但是對於 CSS 的相容性，不同版本的 IE 瀏覽器卻是截然不同。
連續放置兩張圖片，圖片都置於 <div> 中，並都用 float:right 浮到右端，再用負數 margin 以像素為單位進行定位。
IE8 RC1 的顯示效果是正確的。
- Feb 28 Sat 2009 02:01
測試各種瀏覽器對於 CSS3 Selectors 選擇器的相容性
測試網址：http://www.css3.info/selectors-test/test.html
共 578 項測試套用於 43 個選擇器（不包括 :hover、:active、:focus、:selection）
| * | E | .class | #id |
| E F |
E > F | E + F | E[attribute] |
| E[attribute=value] | E[attribute~=value] | E[attribute|=value] | :first-child |
| :link | :visited | :lang() | :before |
| ::before | :after | ::after | :first-letter |
| ::first-letter | :first-line | ::first-line | E[attribute^=value] |
| E[attribute$=value] | E[attribute*=value] | E ~ F | :root |
| :last-child | :only-child | :nth-child() | :nth-last-child() |
| :first-of-type | :last-of-type | :only-of-type | :nth-of-type() |
| :nth-last-of-type() | :empty | :not() | :target |
| :enabled | :disabled | :checked |
- Feb 07 Sat 2009 20:10
HTML 表單中的圖片和 checkbox 多選核取方塊的垂直居中（CSS）
不使用 <table>，亦無須將表單套入 <div> 中，僅用 <form> 即可。
<form> <img src="pixnet-logo.png" /> <input> <input type="submit" value="搜尋"> </form>
表單中插有的圖片，同旁邊的文字輸入框和送出紐的對齊方式預設為底線對齊。相對於旁邊的文字輸入框和送出紐，圖片的垂直位置偏上。
若要圖片相對於旁邊的文字輸入框和送出紐的垂直位置居中，需給圖片的 <img> 指定 CSS：vertical-align:middle，其餘原始碼不變。
- Feb 07 Sat 2009 17:42
Firefox 風格的 HTML 語法高亮（CSS）
<body>
<embed src="flash.swf" width="300" height="265" />
</body>
共４部份用到 CSS：
HTML 標籤、標籤屬性、屬性值、XHTML 風格的標籤關閉。
- Feb 07 Sat 2009 02:46
使用 <pre> 和 CSS，打造網頁中放置原始碼的方框
原始碼中所有的換行、空格、TAB，在 HTML 的解析中都只當作為一個空格，除非使用 <pre> 標籤，才能夠將原始碼中的換行、空格、TAB 等得以保留。
此乃放置原始碼的方框，其中的原始碼為套用至本方框所用 <pre> 標籤之 CSS 原始碼。方框顏色參考英文維基百科中放置 CSS 原始碼之方框的顏色。
pre {
margin: 0;
- Feb 05 Thu 2009 13:15
list-style-type 和 list-style-image 之間進行切換（CSS）
在同時指定 list-style-type 和 list-style-image 的情況下，list-style-image 起作用而 list-style-type 不起作用。
例如以下 CSS 原始碼：
ol {
list-style-type: square;
list-style-image: url(bullet.gif);
}
<ol> 清單只會顯示 list-style-image 所指定之清單背景圖片，而不會顯示 list-style-type 指定類型的清單符號。
如果只是想要暫時不使用 list-style-image，僅使用 list-style-type，應給 <ol> 指定臨時 CSS：
- Feb 05 Thu 2009 00:18
<ol> 和 <ul> 使用非黑白顏色的清單符號（CSS）
<ol> 和 <ul> 使用的清單符號顏色只有黑色和白色這兩種顏色，CSS 2.1 中並沒有指定清單符號顏色的定義。偶們可以通過 list-style-image 來指定清單的背景圖片，這個背景圖片需要具有同清單符號相似大小，這樣它看上去就像是清單符號而非背景圖片。英文維基百科所使用之清單的背景圖片就具備如此之特殊條件。
這個就是英文維基百科所使用之清單的背景圖片：
，為了同網頁背景加以區分偶給它加上了紅色的邊框，很小隻的一個圖片，5x13 像素。圖中的小正方形顏色為 #638C9C，其餘部份為 GIF 背景透明。使用其作為清單的背景圖片，偶使用以下 CSS 原始碼：
ol {
list-style-image: url(http://lh3.ggpht.com/_2TvDANS_XQI/SYllxO_NwZI/AAAAAAAABEc/LVYNnsQQoJY/s800/bullet.gif);
PCSX2 (19)
