10條你不可不知的css規則

：【譯】10條你不可不知的css規則

本文：

Published December 6th, 2004 in CssStaff Tags: No Tags.

 

原文地址：Ten CSS Tricks You May not Know

kelet譯後感：這10條中有很多條我認為都非常有用，你平時可能遇到的一些莫名的問題也許會在這裡找到解決的方法。一些地方我還是把英文的標記原名放在括弧內註明了，這樣可以明白一些。希望對你有所協助。（ps：還是挺討厭遇到<和>的html語句的，因為我暫時只能用它們的原始代號來轉換，請留言中避免使用它們，如果要用的話可以使用原始的代碼來轉換，查看我的頁面原始碼就可以看到怎麼表示了。）

1. CSS字型定義縮寫規則
當你定義字型時用到以下這些屬性：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

那麼你可以縮寫成這樣簡短的一行：font: 1em/1.5em bold italic small-caps verdana,serif 這樣看上去就好多了。只是我需要給你幾點忠告：這種css縮寫形式只有當你同時定義了字型和字型大小的時候才有用。且如果你定義了字重（font- weight），字型(font-style)以及字的變數(font-varient)，那麼這些屬性值就會自動顯示為預設的正常狀態的值，記住這一點。
2. 採用兩個類
通常我們只採用一個類(class)來定義一個屬性，但是這並不表示你只能這樣做不可。事實上，你可以想加多少類在一個屬性上都可以。例如你可以這樣

…

。

 

使用這兩個類（用空格分開而不是逗號）意味著這個段落將同時採用text和side的規則。如果兩個類之間有重複的定義，那麼將採用兩個中屬於下一級的那個類的規則。
3. CSS的預設邊框（border）值
當你定義個border的首你通常會考慮它的顏色（color）、寬度（width）和樣式（style）（次序任意）。例如 border: 3px solid #000將會顯示一個黑色的實心的3px寬邊。然而這裡唯一需要定義的只是border的style（樣式）。

如果你要定義一個border為實心（solid），那麼邊框就將採用瀏覽器預設的值。但是什麼是預設的值呢？邊框的預設寬度是中等（相當於3到 4px），預設的顏色是邊框內的文本的顏色。如果這兩者中任意一個都是你想要的邊框的樣式，那麼你完全可以不用自己費勁去寫定義語句。
4. IE會忽略!important
5. 在css規則中通常最後定義的會被優先執行。然而如果你在一個語句後面採用採用 !important那麼瀏覽器應當會不考慮其後的語句而優先執行這個css語句。這一規則對所有非ie瀏覽器均適用。例如：margin-top: 3.5em !important; margin-top: 2em 那麼在所有非IE瀏覽器中上頂邊將會被設定成3.5em，而ie中設定成2em。這一點有時候也是很有用的。尤其是當使用相對邊緣（如舉例中的那種）的時候，這一點可以在ie和其他瀏覽器裡面顯示的略為不同。 圖片替代技巧
我們通常建議採用HTML標記來顯示text，但是不要用在圖片顯示上面。這樣的做的好處是可以提高頁面載入速度並且有比較的好的訪問率。然而如果你非覺得你的頁面的訪客都不喜歡看你這個網頁的文字的話，那麼你只能使用圖片了。

舉例來說，如果你是個配件供應商，你想要每個頁面的頂圖都是你要賣的小配件，並且希望這一詞條能夠被搜尋引擎搜到的話，你可以這樣定義圖片< h1>

。這樣做當然可以，但是我得很明白的告訴你的是搜尋引擎並不會看重你圖片的alt文本。（因為有太多網頁建設者使用alt文本來冒充關鍵字了）。所以另外一種方法是

Buy widgets

,這樣你顯然不必採用你的隱藏文字了。那麼修正這一問題的方法是在css的樣式裡面這樣定義
h1
{ background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}

 

那麼帶有你希望字型的圖片現在就會在瀏覽器下正常顯示了，而且由於我們採用了距離螢幕左邊緣2000px的定義那個文本並不會顯示在頁面的圖片上。
6. 另析CSS盒子(box)模型
box模型通常使用來修正ie6以前的瀏覽器中，邊框（border）和補白（padding）被包含在元素的寬度值中而不是附加在寬度之外的問題。例如當定義一個container的尺寸的時候，你也許會採用下面的css規則：
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
這個css規則會使用在

…

中。

 

這就意味著在所有ie6後的瀏覽器下box的總寬度是150px（100px的寬＋2個5px寬的邊框＋兩個20px寬的補白）。在這些瀏覽器中box的總寬度包括了補白和邊框才是100px。box模型的定義可以修正這一問題，但是也會帶來許多麻煩。

一個簡單的修正法如下：
#box
{
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}

這個css規則會使用在

…

中。很完美。現在所有瀏覽器下的box寬度都是150px。
7. 中間對齊一個塊（block）元素
假設你想要一個固定寬度的網頁布局，主體部分以浮動元素形式顯示在螢幕中央。你可以採用下面的CSS語句:
#content
{
width: 700px;
margin: 0 auto;
}
然後你會想要

包圍住每一個頁面的內容項，而且它有一個自動的左邊緣和右邊緣以確保它總是在螢幕中央。很簡單。。。不過也不盡然，我們仍然得考慮一下ie6以前的瀏覽器的顯示問題，因為這些瀏覽器不會按照css的控制進行中心對齊。你得改變一下上面的css語句：
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}

 

這就會中心對齊主體部分，但是會導致文字都變成中心對齊的。為了修正這一問題，我們可以把文字對齊 text-align: left這條語句加到content div的css定義中去。
8. 採用css進行垂直對齊
表格（table）的垂直對齊不是個難題。為了使一個cell的所有子內容都在它中間一直線對齊，你可能會採用vertical-align: middle，但是這並不會在css布局中發揮作用。假設你想要一個高度是2em的功能表項目，你或許會在css規則中使用vertical align的語句，這沒什麼作用，並且文字會全部顯示在box元素的頂部。

唔。。不是你想要的效果吧。有什麼解決方案嗎？那麼你可以在css語句裡面把行高設定為和box元素的高度一樣的值。在上面的語句中box就是2em高，然後我們可以在它的css定義中加入 line-height: 2em，並且使text文本浮動（float）在box的中間。ok，效果達到了。
9. 在一個容器（container）裡面採用CSS定位
CSS的一個很大的優點是你可以用它來設定一個對象（object）在頁面中的絕對位置。當然你也可以（而且經常會被用到）在一個容器（container）裡面設定對象（object）的位置。這很容易實現。只要採用下面的css語句：
#container
{
position: relative;
}

現在這個容器（container）內的任何一個元素都會變成相對於它的定位。你可以採用下面的html結構：

…

 

為了使導航的位置在距離它的父元素box左側30px，頂部5px的位置，你可以使用下面的css語句：
#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

完成!在這個特殊的例子中，你當然你可以使用margin: 5px 0 0 30px，但是其他一些情況下你最好還是採用position來定位。
10. 螢幕底部的背景顏色
CSS的一個缺點就是不能實現垂直方向的控制，這樣就會導致不能用table進行布局的問題。假設你有一個包含網站導航的列要放在頁面的左側，這個頁面背景是白色的，但是你想要左側有一個藍色背景。很簡單，你只要採用下面這樣的CSS語句：
#navigation
{
background: blue;
width: 150px;
}

採用上面的語句的話，會有一個問題：由於導航內容的每一個條目並不會延伸倒頁面底部，就會產生它下方的部分仍然顯示白色背景色。這樣看起來好像被切斷了一樣的左側藍色背景色就會破壞你原本的設計意圖。那麼你能怎麼辦呢？

很不幸的是只有一個解決方案，那就是用一個藍色的背景圖來代替左側的藍色背景色。語句如下：
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
你放置在原來位置上的背景圖的寬度正好是150px而且顏色也就用你想要的那個顏色。這樣座的缺點就是你不能以em來定義左側寬度，因為如果使用者手動調整瀏覽器的文字大小的時候，左列的寬度也會改變，但是藍色背景映像並不會跟著變換尺寸。

但是現在只有這麼一個辦法解決我們一開始列出的問題，所以如果你希望左列的顏色不一樣的話最好用px來定義左列的寬度。