CSS 偽類 與 偽元素

:link
    未被訪問過的連結
    IE6, FF3, Safari3, Chrome5, Opera
 
:visited
    已被訪問過的連結
    IE6, FF3, Safari3, Chrome5, Opera

:hover
    滑鼠重疊時(mouse over)
    IE7, FF3, Safari3, Chrome5, Opera

:active
    元素被按下時(mouse down)
    IE6, FF3, Safari3, Chrome5, Opera

:focus
    元素被選擇時
    IE8, FF3, Safari3, Chrome5, Opera

:first-line
    區塊內的第一行
    IE7, FF3, Safari3, Chrome5, Opera

:first-letter
    區塊內的第一個字
    IE7, FF3, Safari3, Chrome5, Opera

:first-child
    元素為第一個項目時
    IE7, FF3, Safari3, Chrome5, Opera

:last-child
    元素為最後一個項目時
    IE9, FF3, Safari3, Chrome5, Opera

:lang
    指定元素中使用的語言
    IE6, FF3, Safari3, Chrome5, Opera

:before
    區塊內最前面加入一個虛擬元素
    IE8, FF3, Safari3, Chrome5, Opera

:after
    區塊內最後面加入一個虛擬元素
    IE8, FF3, Safari3, Chrome5, Opera 

Quick Guide

Quick Guide
原由 pagebook2 上載

產品的Quick Guide第一次做這種包裝類的東西

關於CSS的觀念

經過W3C的推廣現在網頁切版的方式已經從傳統的table1佈局,演變成現在所謂的"DIV"+CSS

但是若是以這樣的說法其實不是很正確,原因在於HTML的標籤這麼多我們也不是只有使用DIV而已,只是DIV是最常用的一種標籤,所以DIV+CSS正確的說法應該是XHTML+DIV簡單來說就是更標準化HTML語法+CSS那麼更標準化的涵義為何?

我個人覺得是將現有的HTML標籤作最適合的運用而不要去排斥任何HTML的標籤,下面舉一個簡單的例子來說明:
我們設定一個標題,可以有下面2種做法

第1種直接使用h1 h2 h3...等html的標題標籤 如下:
<h1> title01 </h1>

第2種是設定一個class 讓div使用 如下:
<div class=' title' > title01 </div>

這2種都可以達到我們要的結果,但是就HTML的語意來說第一種就是比較標準化的做法,因為只要看到標籤就知道是標題了,而第2種則須看class的命名為何,或是要去看他css裡面是寫些什麼才有辦法判定他到底是什麼東西,而且語法也比第1種要複雜,還得想他的命名實在不是很人性化,所以說html有些標籤還是無可取代的尤其是table以下列出一些常用的html語法給大家參考

標題標籤:
<h1>、<h2>、<h3>、<h4>...

列表標籤:
<ul>、<li>、<ol>、<dl>、<dt>、<dd>

容器標籤:
<div>、<span>

段落標籤:
<p>

表格標籤:
<table>、<caption>、<tr>、<th>、<td>

圖片標籤:
<img>

粗體文字標籤:
<b>、<strong>

設定最小或最大寬或高

於原始CSS寬或高前面多加上min-或是max-
可以一起使用也可以只設其中一種視個人需求去調整
以下以最大寬度不大於1000px, 最小寬度不小於700px設定一個class為例

css的寫法:

.min_max {
min-width: 700px; /* min-weight */
max-width: 1000px; /* max-weight */
width:expression(document.body.clientWidth < 700? "1000px" : document.body.clientWidth > 700? "1000px" : "auto"); /* for IE6 */
}

width:expression(document.body.clientWidth < 700? "1000px" : document.body.clientWidth > 700? "1000px" : "auto");
這行則是給IE6或更舊的瀏覽器觀看的, IE7,8和Firefox等較新的瀏覽器已經支援 min-width 和 max-width 的 CSS 語法.

利用css做圖片按鈕特效

利用篩選器讓滑鼠事件做Alpha的變化

css的部份

.bnt a img {
opacity: .7; /* 70% for Firefox */
filter: Alpha(Opacity=70,style=0); /* 70% for IE */
}
.bnt a:hover img {
opacity: .1; /* 100% for Firefox */
filter: Alpha(Opacity=100,style=0); /* 100% for IE */
}

html的部份

<div class="bnt">
  <a href="javascript:void( 0 )"><img src="bnt.jpg" /></a>
</div>

css去除連結框線

瀏覽器每次點選連結總有討人厭的虛線很討厭，想要去除他只要在CSS設定可能會有滑鼠事件的標籤作一次宣告即可

css的部分

a,input{
outline: none; /* for Firefox */
hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

純css的預載圖片

原理是先設定一份css的背景樣式然後再隱藏它,因此是看不到圖片的 但是他還是存在 所以達到預先下載的功能

css的部份

#preloader{
/*Imsges you want to preload*/
background-image:url(image1.jpg);
background-image:url(image2.jpg);
width: 0px;
height: 0px;
display: inline;
}

html部分

<div id="preloader"></div>

延伸作法 把圖片合成成一張大張的圖 這樣只需要下載一張
然後利用div區塊只顯示設定的寬高內區域的特性
對背景設定它的垂直 水平 位移量 這樣也是能夠有預載的功能
因為圖片都是同一張