提問之前請先閱讀網友常問的問題







目前分類:CSS (19)

瀏覽方式: 標題列表 簡短摘要

http://twpcsx2.blogspot.com/2014/02/css3.html


呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

http://twpcsx2.blogspot.com/2014/02/ahover.html


呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

首先要注意的是 :hover 不能用 inline CSS 來寫,只能寫在 <style> 標籤裡或 .css 檔案裡。

:hover 常與 <a> 連用,構成 a:hover,其實 :hover 也可與其他 HTML 標籤連用,也有效。

譬如 h6:hover {background-color:#D2EBFF},同學把滑鼠指標移到下一行,就可以看到效果:

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

效果如下:

 一四七   二五八   三六九 
 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 指定不一樣的背景顏色:

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

效果如下:

 一四七   二五八   三六九 
 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 可以更換)

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

範例:令網頁只有這一行內容:

<hr style=border-style:none>


此時用 Firefox 開網頁就會像預想的那樣一片空白,而用 IE8 開網頁依舊顯示一條 <hr> 水平線。

若要 IE8 顯示正確的結果,就在網頁的第一行寫 HTML 的 DTD。

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

給 <hr> 套用特定的 CSS,每次寫 <hr> 都能達到像這樣的最終效果:




首先決定 <hr> 裡使用的背景圖片。這裡是用一個 41x20 像素的圖片:

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

含有背景圖片的維基百科樣式的連結 Wikipedia 使用的 CSS

a {
        background:url(背景圖片.png) right no-repeat;
        padding-right:13px;
}

背景圖片  是 10x10 像素,放在 <a> 的最右邊會和文字重疊在一起。所以給最右邊留 13 像素的 padding,那 padding 部份是沒有文字的,多出的 3 像素就作為背景圖片與文字之間保留的空白。


呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

<hr /> 預設是這個樣子:



通過 CSS:取消 <hr> 預設留有的 border,再指定 height 為 1 像素,並弱化 <hr> 的背景顏色。背景顏色這邊 IE6 不認 background-color,但可以使用 color 達到同樣效果。這樣所有瀏覽器的相容性就都不會有問題。

hr {
border:0; height:1px; background-color:#d4d4d4;

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

聲明:不支援 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 像素):

呆丸北拜 發表在 痞客邦 PIXNET 留言(2) 人氣()

例如一個「E F」選擇器:

div img {border: 1px solid #f6871d}


它套用於 <div> 標籤中的 <img>,分為兩種情況。

第一種:<div> 與 <img> 相鄰。

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

既然是要垂直居中,那麼就必需指定文字所在 HTML 標籤的寬度和高度。例如:

div { width:106px; height:40px }


文字是直接裝在 <div> 標籤中,HTML 原始碼如下:

<div>參觀人氣</div>


文字預設顯示在左上角:

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

IE6、IE7、IE8,儘管它們都稱為 IE 瀏覽器,但是對於 CSS 的相容性,不同版本的 IE 瀏覽器卻是截然不同。

連續放置兩張圖片,圖片都置於 <div> 中,並都用 float:right 浮到右端,再用負數 margin 以像素為單位進行定位。

IE8 RC1 的顯示效果是正確的。

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

測試網址: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  

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

不使用 <table>,亦無須將表單套入 <div> 中,僅用 <form> 即可。

<form>
        <img src="pixnet-logo.png" />
        <input>
        <input type="submit" value="搜尋">
</form>


表單中插有的圖片,同旁邊的文字輸入框和送出紐的對齊方式預設為底線對齊。相對於旁邊的文字輸入框和送出紐,圖片的垂直位置偏上。


若要圖片相對於旁邊的文字輸入框和送出紐的垂直位置居中,需給圖片的 <img> 指定 CSS:vertical-align:middle,其餘原始碼不變。

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

<body>
<embed src="flash.swf" width="300" height="265" />
</body>

 

共4部份用到 CSS:
HTML 標籤、標籤屬性、屬性值、XHTML 風格的標籤關閉。

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

原始碼中所有的換行、空格、TAB,在 HTML 的解析中都只當作為一個空格,除非使用 <pre> 標籤,才能夠將原始碼中的換行、空格、TAB 等得以保留。

此乃放置原始碼的方框,其中的原始碼為套用至本方框所用 <pre> 標籤之 CSS 原始碼。方框顏色參考英文維基百科中放置 CSS 原始碼之方框的顏色。

pre {
margin: 0;

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

在同時指定 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:

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()

<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);

呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()