10條你不可不知的css規則

Posted on 2006-12-20 10:33 雨中太陽閱讀(343) 評論(1) 編輯收藏

：【譯】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> “Buy

。這樣做當然可以，但是我得很明白的告訴你的是搜索引擎并不會看重你圖片的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來定義左列的寬度。

分類: CSS+DIV

好文要頂關注我收藏該文