SiuMan C

現在的網頁為求美觀, 又希望文字搜尋優化, 所以都以 HTML + PNG 將網頁做到最完美, PNG 的最大好處是可以由全透明漸變至實色的圖片, 很多透疊/細緻的視覺效果都可以以 HTML 況現, FF IE7/IE8 都沒有問題, 可以自由地運用的, 但可恐的 IE6 又是不支援了… …

但是有一個方法可以解決的,就是加入 iepngfix.htc 裡面一些類似加入一個全透明的 GIF 在所設定的標籤/圖片後面, 就可以解決 PNG 檔在 IE 6 中的透明位會變成淺藍色的問題( bug ), 先下載一個 iepngfix.htc 和 一個 全透明的 GIF 圖片

— CSS —
div#SiuManC, .forPng{_behavior: url(iepngfix.htc);} /*改CLASS / ID位*/

div#SiuManC{
background:url(images/bgImg.png);
}

— HTML —
<div id=”SiuManC“>
<img src=”img.png” class=”forPng” alt=”SiuManC Images” />
</div>

註:
要留意檔案 iepngfix.htc 中
if (typeof blankImg == ‘undefined’) var blankImg = ‘imge/spacer.gif‘;
的 spacer.gif 儲存的位置

今天有一件事讓我覺得要說說 id & class , 就因為公司一個同事, 他是 programer 但就連 padding / margin 怎樣配合都不清楚, 還以這不清不楚的情況下各我說教, 說什麼: [ 在兩個標籤之間應該用 padding 去將其分格開, 不可用 margin , 因為在 FF 看的話會出問題的! ] 聽到我真的火大, 怎可能會有問題?

當時情況是有個 id 設定 ( setting ) 好了某標籤的外形, 但我用 margin 設定好了位置, 但事情是要用一樣的標籤在同一畫面不同地方出現(月曆), 所以他就想找我做晒所有 setting , 之後我提意佢可以用 program 去改, 加多一個 class 在標籤中, 在 class 設定變數(位置), 在 id 保留外形的設定, 之後他改來改去都不成功, 說是應該用 padding , 但其實當時變數的只是上下的位置, 所以左右的位置設定保留在 id 以上下的就設定於 class 中。
如下:
— CSS —
#idName {
margin-left: -50px;
z-index:999;/*外形設定*/
XXX: xxxx;/*外形設定*/
}

.className {margin-left: -50px;}

— html —
<div id=”idName” class=”className”>Something Something</div>

就可以得到 id 和 class 的最佳配合了。
但上述只是例子, 有很多不同的情況都可以用上面方式配合出不同的效果, 將讓你的 css + div 用得更靈活更方便和更簡潔, 如有其實例子的問題, 可以回應分享一下！

有時在 html 即使用了 css+div , 有時都會好多好多語法( code ), 就好似你用div 裝置了3張圖片, 其中間各有距離( margin )而左右要貼著邊界, 但如果 div 中的 img 標籤都設定為 margin-left:10px; 的話,最左面(第一張)圖就會多出了 10px 的 margin 了… …

那麼豈不是要在第一張圖中加 style / class, 這就是最常見面又好難避免的多 code 問題了, 當然都不是做多什麼久的時候, 但總人有想更方便 code 排得更靚更易看的, 希望可以在 css 中就把這一切都完成, 這時候你就可以用到 :first-child , 用法也很簡單, 就只是在div 後加 > img:first-child{ xxx:xxx; } , 就可以自由地控制第一張的設定。

例:
in HTML
<div>
<img src=”??.jpg”>
<img src=”??.jpg”>
<img src=”??.jpg”>
</div>

in CSS
div {width:300px; … …}
div img{margin-left:10px; … …}
div > img:first-child{margin:0; … …}
這板不論 css / html 就簡單清潔了～！　當然　：first-child　不只針對　img 標籤, 其他都可以用得上(如 <a> <strong> 等等… …)

當然! 如果是文字, 你又想設定第一個字, 你不可能每一個字都用標籤套著, 所以只是打上套著的標籤後加上就可以了。
例:
in HTML
<div>
How are you?
</div>

in CSS
div {width:300px; font-size:12px; … …}
div:first-child{font-size:15px; … …}

就可以做到你想要的設定。 另外, 還有 :first-line 看字面應該都明白, 是只第一行, 用法跟上面都是大同小異。

如果還有些對本文章不明白 / 或其中有什麼有修正的地方, 請回應本文章。 謝！

又再說說CSS 的偉大功能了!

在　IE，　FF，　Safari　等等瀏覽器，大家都知到各懷鬼胎，　同一樣的標籤都可以有各有不同，　就好似 <a> 係 IE  可以設定它的 width (闊度) / height (高度) , 但去到 FF , 就一切都打回原形了。 這時候你可以放心, 不是你錯, 而是各瀏覽器對這標籤的要求和設定都不同, 所以有時在 IE 做到的事, 在 FF 就看不到想要的效果。

在css 的設定位置加入 display:block 就可以隨心所慾了, 想它padding (內距離) , margin (外距離) , width , height 怎樣都可以, 加上上一章的 hack , 就不會給瀏覽器戲弄了！