所使用的 CSS：word-wrap:break-word
範例：
<a style="word-wrap:break-word" href="http://www.google.com.tw">文字比較多比較長的連結</a>
2014/02/12
使用 CSS3 讓文字比較多比較長的連結自動換行
2014/02/12
為 a:hover 的連結和底線指定不同的顏色
原理：
連結所使用的文字先套上 <span> 再套上 <a>，
連結的文字顏色，由 <span> 使用 CSS 的 color 設定；
底線的顏色，由 a:hover 使用 CSS 的 color 設定。
2012/08/24
:hover 適用於任何 HTML 標籤（CSS）
首先要注意的是 :hover 不能用 inline CSS 來寫，只能寫在 <style> 標籤裡或 .css 檔案裡。
:hover 常與 <a> 連用，構成 a:hover，其實 :hover 也可與其他 HTML 標籤連用，也有效。
譬如 h4:hover {background-color:#D2EBFF}，同學把滑鼠指標移到下一行，就可以看到效果：
把滑鼠指標移過來，背景顏色會變成 #D2EBFF
2011/09/21
利用 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。效果如下：
2011/09/21
使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px
效果如下：
| 一四七 | 二五八 | 三六九 |
|---|---|---|
| One | Two | Three |
| Four | Five | Six |
| Seven | Eight | Nine |
關鍵就是寫 CSS：
2011/07/27
IE 的某些 CSS 相容性問題可透過網頁第一行加入 HTML DTD 解決
範例：令網頁只有這一行內容：
<hr style=border-style:none>
此時用 Firefox 開網頁就會像預想的那樣一片空白，而用 IE8 開網頁依舊顯示一條 <hr> 水平線。
若要 IE8 顯示正確的結果，就在網頁的第一行寫 HTML 的 DTD。
2011/07/27
使用 CSS 製作含有背景圖片的彩色 <hr>
給 <hr> 套用特定的 CSS，每次寫 <hr> 都能達到像這樣的最終效果：
首先決定 <hr> 裡使用的背景圖片。這裡是用一個 41x20 像素的圖片：
2009/06/08
維基百科樣式的連結背景圖片（CSS）
含有背景圖片的維基百科樣式的連結 Wikipedia 使用的 CSS
a {
background:url(背景圖片.png) right no-repeat;
padding-right:13px;
}
背景圖片 
是 10x10 像素，放在 <a> 的最右邊會和文字重疊在一起。所以給最右邊留 13 像素的 padding，那 padding 部份是沒有文字的，多出的 3 像素就作為背景圖片與文字之間保留的空白。
2009/03/20
使用 CSS 美化 <hr> 水平線
<hr /> 預設是這個樣子：
通過 CSS：取消 <hr> 預設留有的 border，再指定 height 為 1 像素，並弱化 <hr> 的背景顏色。背景顏色這邊 IE6 不認 background-color，但可以使用 color 達到同樣效果。這樣所有瀏覽器的相容性就都不會有問題。
2009/03/06
圖片形式的連結透過 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 像素）：
2009/03/05
2009/03/05
透過 CSS 實現 <div> 標籤中的文字垂直居中
既然是要垂直居中，那麼就必需指定文字所在 HTML 標籤的寬度和高度。例如：
div { width:106px; height:40px }
文字是直接裝在 <div> 標籤中，HTML 原始碼如下：
2009/03/02
IE6、IE7、IE8，對於 CSS 的相容性不同
IE6、IE7、IE8，儘管它們都稱為 IE 瀏覽器，但是對於 CSS 的相容性，不同版本的 IE 瀏覽器卻是截然不同。
連續放置兩張圖片，圖片都置於 <div> 中，並都用 float:right 浮到右端，再用負數 margin 以像素為單位進行定位。
IE8 RC1 的顯示效果是正確的。
2009/02/28
測試各種瀏覽器對於 CSS3 Selectors 選擇器的相容性
測試網址：http://www.css3.info/selectors-test/test.html
共 578 項測試套用於 43 個選擇器（不包括 :hover、:active、:focus、:selection）
2009/02/07
HTML 表單中的圖片和 checkbox 多選核取方塊的垂直居中（CSS）
不使用 <table>，亦無須將表單套入 <div> 中，僅用 <form> 即可。
<form> <img src="pixnet-logo.png" /> <input> <input type="submit" value="搜尋"> </form>
表單中插有的圖片，同旁邊的文字輸入框和送出紐的對齊方式預設為底線對齊。相對於旁邊的文字輸入框和送出紐，圖片的垂直位置偏上。
2009/02/07
Firefox 風格的 HTML 語法高亮（CSS）
<body>
<embed src="flash.swf" width="300" height="265" />
</body>
共４部份用到 CSS：
HTML 標籤、標籤屬性、屬性值、XHTML 風格的標籤關閉。
2009/02/07
使用 <pre> 和 CSS，打造網頁中放置原始碼的方框
原始碼中所有的換行、空格、TAB，在 HTML 的解析中都只當作為一個空格，除非使用 <pre> 標籤，才能夠將原始碼中的換行、空格、TAB 等得以保留。
此乃放置原始碼的方框，其中的原始碼為套用至本方框所用 <pre> 標籤之 CSS 原始碼。方框顏色參考英文維基百科中放置 CSS 原始碼之方框的顏色。
2009/02/05
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 指定類型的清單符號。
2009/02/05
<ol> 和 <ul> 使用非黑白顏色的清單符號（CSS）
<ol> 和 <ul> 使用的清單符號顏色只有黑色和白色這兩種顏色，CSS 2.1 中並沒有指定清單符號顏色的定義。偶們可以通過 list-style-image 來指定清單的背景圖片，這個背景圖片需要具有同清單符號相似大小，這樣它看上去就像是清單符號而非背景圖片。英文維基百科所使用之清單的背景圖片就具備如此之特殊條件。
這個就是英文維基百科所使用之清單的背景圖片：
，為了同網頁背景加以區分偶給它加上了紅色的邊框，很小隻的一個圖片，5x13 像素。圖中的小正方形顏色為 #638C9C，其餘部份為 GIF 背景透明。使用其作為清單的背景圖片，偶使用以下 CSS 原始碼：
訂閱：
文章
(
Atom
)