制作網頁時手寫CSS應該注意的一點技巧

1. CSS字體屬性簡寫規則

一(yi)般用CSS設定字體屬性是這樣(yang)做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它們全部寫到(dao)一行上去(qu)：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不錯！只(zhi)有(you)一點(dian)要(yao)提醒的：這(zhe)種簡寫方法只(zhi)有(you)在(zai)同時指(zhi)定(ding)(ding)font-size和font-family屬性(xing)時才起作用。而且，如果你沒(mei)有(you)設定(ding)(ding)font-weight, font-style, 以及(ji) font-varient ，他們會使(shi)用缺(que)省值(zhi)，這(zhe)點(dian)要(yao)記上。

2. 同(tong)時使用兩個類

一(yi)般只能給一(yi)個元素設定一(yi)個類（Class），但(dan)這(zhe)并不意味(wei)著不能用(yong)兩個。事(shi)實上，你可以這(zhe)樣(yang)：

...

同時(shi)給P元素兩(liang)個(ge)類，中間用空格(ge)格(ge)開，這樣所有(you)text和side兩(liang)個(ge)類的(de)屬性都會加(jia)到(dao)P元素上來。如果它們兩(liang)個(ge)類中的(de)屬性有(you)沖(chong)突的(de)話，后設置的(de)起作用，即在CSS文件中放在后面(mian)的(de)類的(de)屬性起作用。

3. CSS border的缺省值

通(tong)常可以設定邊界(jie)的顏色，寬度和風格，如：

border: 3px solid #000

這位把邊界(jie)顯示成(cheng)3像素寬，黑色，實線。但(dan)實際上這里只需要(yao)指(zhi)定風格即可。

如(ru)(ru)果只指定了(le)(le)風(feng)格，其他(ta)屬性就會(hui)使用缺(que)(que)省(sheng)值。一(yi)般地，Border的(de)寬度缺(que)(que)省(sheng)是medium，一(yi)般等于3到4個像素(su)；缺(que)(que)省(sheng)的(de)顏色(se)是其中文字的(de)顏色(se)。如(ru)(ru)果這(zhe)個值正好合適的(de)話，就不用設那(nei)么多了(le)(le)。

4. CSS用于文檔(dang)打印

許多網站上都有一個針對打印的版本，但(dan)實際上這并不需要(yao)，因為(wei)可以用CSS來設定打印風格(ge)。

也就(jiu)是說，可以為(wei)頁面指定兩個CSS文件，一(yi)(yi)個用于(yu)屏幕顯(xian)示，一(yi)(yi)個用于(yu)打印：

第1行就是顯示，第2行是打印，注意(yi)其中的media屬性。

但應該(gai)在打(da)印(yin)CSS中寫什么東西呢？你可以(yi)按(an)設(she)(she)計普通CSS的(de)(de)方(fang)法來設(she)(she)定它。設(she)(she)計的(de)(de)同(tong)時就可以(yi)把這個CSS設(she)(she)成顯示CSS來檢查(cha)它的(de)(de)效果。也許你會使(shi)用 display: none 這個命令來關掉一些裝飾(shi)圖片，再關掉一些導航按(an)鈕。要想了(le)解更(geng)多，可以(yi)看“打(da)印(yin)差異”這一篇。

5. 圖(tu)片(pian)替換技巧

一般都建議用標準(zhun)的HTML來顯示文字，而(er)不(bu)要使用圖片，這樣不(bu)但(dan)快，也更具(ju)可(ke)讀性。但(dan)如(ru)果你想(xiang)用一些特殊(shu)字體時，就只能(neng)用圖片了(le)。

比如你想整個(ge)賣東(dong)西的圖標，你就用(yong)了這個(ge)圖片：

這當然(ran)可以，但對(dui)搜索(suo)引(yin)擎來說，和(he)正常文(wen)字(zi)相比，它們對(dui)alt里(li)面的替(ti)換文(wen)字(zi)幾乎沒有興趣這是(shi)因為許(xu)多(duo)設計者在這里(li)放(fang)許(xu)多(duo)關鍵詞來騙搜索(suo)引(yin)擎。所以方(fang)法(fa)應該是(shi)這樣的：

Buy widgets

但這(zhe)樣(yang)(yang)就(jiu)沒有(you)特殊字體了(le)。要(yao)想(xiang)達到同樣(yang)(yang)效果，可以這(zhe)樣(yang)(yang)設計CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height換成真的圖片的高度。這里，圖片會(hui)(hui)當作背景顯(xian)示(shi)出(chu)來(lai)，而真正的文(wen)字由于(yu)設定了-2000像素這個縮進，它們會(hui)(hui)出(chu)現(xian)在屏幕左邊2000點的地方(fang)，就看不(bu)見了。但這對于(yu)關閉圖片的人(ren)來(lai)說，可能全部(bu)看不(bu)到了，這點要注意。

6. CSS box模型的(de)另一種(zhong)調(diao)整技(ji)巧

這個Box模(mo)型的調(diao)整主(zhu)要(yao)是針對IE6之前(qian)的IE瀏覽器的，它們把邊(bian)界(jie)寬度(du)和空白(bai)都(dou)算在元素(su)寬度(du)上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

這樣調用它：

這(zhe)(zhe)時(shi)盒子(zi)的全寬應該是(shi)150點，這(zhe)(zhe)在除IE6之前(qian)(qian)的IE瀏(liu)覽(lan)器(qi)之外(wai)的所有瀏(liu)覽(lan)器(qi)上(shang)都是(shi)正確的。但在IE5這(zhe)(zhe)樣的瀏(liu)覽(lan)器(qi)上(shang)，它的全寬仍是(shi)100點。可以(yi)用以(yi)前(qian)(qian)人發明的Box調整方法來處理這(zhe)(zhe)種差(cha)異

但用CSS也可以達到同樣的(de)目的(de)，讓它們顯(xian)示效(xiao)果(guo)一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

這樣調用(yong)：

這樣，不管什(shen)么瀏覽器，寬度都是150點(dian)了。

7. 塊元素居中(zhong)對齊

如果想做個固定寬度的網頁(ye)并且想讓網頁(ye)水平(ping)居中(zhong)的話，通常(chang)是這樣：

#content
{
width: 700px;
margin: 0 auto
}

你會使(shi)用

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

#container
{
position: relative
}

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

margin: 5px 0 0 30px

#navigation
{
background: blue;
width: 150px
}

body
{
background: url(blue-image.gif) 0 0 repeat-y
}