網頁設計中CSS注意點

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; 至少要指定font-size和font-family屬性，其他的屬性將自動使用預設值。
border: 3px solid #000 預設的寬度為中等(相當於3到4像素);預設的顏色為邊框裡的文字顏色。

2.同時使用兩個class
通常我們只為屬性指定一個class,但這並不等於你只能指定一個，實際上，你想指定多少就可以指定多少，例如：

<div class="news hot">
內容
</div>

通過同時使用兩個class(使用空格而不是逗號分割),這個段落將同時應用兩個class中制定的規則。如果兩者中有任何規則重疊，那麼後一個將獲得實際的優先應用。

3.!important的應用（參考文：css中的HACK）
在IE6之前，通常最後指定的規則會獲得優先權。IE7對!important支援。對FF來說，任何後面標有!important的語句將獲得絕對的優先權，

例如：

margin-top: 3.5em !important; margin-top: 2em

除IE6以外所有瀏覽器中的頂部邊界都是3.5em，而IE6為2em。

這點,讓我想起剛學著寫DIV+CSS時候,在各種瀏覽器中相容的痛苦,具體例子使用可以參考我的zuonline.igg.com第一版.切記margin-top: 3.5em !important; 需寫在前面。
4.圖片替換的技巧
使用標準的html而不是圖片來顯示文字通常更為明智，除了加快下載還可以獲得更好的可用性。但是如果你決心使用訪問者的機器中可能沒

有的字型時，你只能選擇圖片。

舉例來說，你想在每一頁的頂部使用"Buy widgets"的標題，但你同時又希望這是能被搜尋引擎發現的，為了美觀你使用了少見的字型那

麼你就得用圖片來顯示了：
這樣當然沒錯，但是有證據顯示搜尋引擎對真實文本的重視遠超過alt文本(因為已經有太多網站使用alt文本充當關鍵字)，因此，我們得用

另一種方法：

Buy widgets，那你的漂亮字型怎麼辦呢?下面的css可以幫上忙：

h1 {
background: url(widget-image.gif) no-repeat;
}
h1 span {
position: absolute;
left:-2000px;
}

現在你既用上了漂亮的圖片又很好的隱藏了真實文本——藉助css，文本被定位於螢幕左側-2000像素處。
對一些設定瀏覽器不顯示圖片的使用者，則看不到圖片上的重要訊息了。

5.css盒模型hack的另一選擇（參考文：css中的HACK）
css盒模型hack被用來解決IE6之前的瀏覽器顯示問題，IE6.0之前的版本會把某元素的邊框值和填儲值包含在寬度之內(而不是加在寬度值上

)。例如，你可能會使用以下css來指定某個容器的尺寸：

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

然後在html中應用：
盒的總寬度在幾乎所有瀏覽器中為150像素(100像素寬度+兩條5像素的邊框+兩個20像素的填充)，唯獨在IE6之前版本的瀏覽器中仍然為100

像素(邊框值和填儲值包含在寬度值中)，盒模型的hack正是為瞭解決這一問題，但是也會帶來麻煩。更簡單的辦法如下：

css:
#box {
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
html:
...
這點,又讓我想起做zuonline.igg.com第一版的時候.遇到這個問題,我也是這樣解決的.其實就一句話,當你要定義一個DIV時候,不要將width

和padding/margin屬性放在一起定義,你永遠記不住PADDING是包含在WIDTH中還是不包含,分成2個DIV就OK!

6.將塊元素置中（參考文：頁面內容置中設定（水平置中與垂直置中） ）
假設你的網站使用了固定寬度的布局，所有的內容置於螢幕中央，可以使用以下的css：

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

你可以把html的body之內任何項目置於中，該項目將自動獲得相等的左右邊界值從而保證了置中顯示。不過，這在IE6之前版本的瀏覽器中

仍然有問題，將不會置中，因此必須修改如下：

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

對body的設定將導致主體內容置中，但是連所有的文字也置中了，這恐怕不是你想要的效果，為此#content 的div還要指定一個值：text-align: left

7.使用css實現垂直置中（參考文：頁面內容置中設定（水平置中與垂直置中） ）
垂直置中對錶格來說是小菜一碟，只需指定儲存格為vertical-align: middle即可，但這在css布局中不管用。假設你將一個導覽功能表的高

度設為2em，然後在css中指定垂直對齊的規則，文字還是會被排到盒的頂部，根本沒有什麼區別。

要解決這一問題，只需將盒的行高設為與盒的高度相同即可，以這個例子來說，盒高2em,那麼只需在css中再加入一條：line-height: 2em

就可實現垂直置中了! 缺點是要控制內容不要換行.
這點講的只是內容在塊中如何垂直置中,沒有講到所有內容在任何解析度瀏覽器下如何垂直置中，可參考文：

頁面內容置中設定（水平置中與垂直置中）

8.延伸至螢幕底部的背景色
css的缺點之一是缺乏垂直方向的控制，從而導致了一個表格版面配置不會遇到的問題。假設你在頁面的左側設定了一列用於放置網站的導航。

頁面為白色背景，但你希望導航所在的列為藍色背景，使用以下css即可：

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

問題在於導航項不會一直延伸到頁面的底部，自然它的背景色也不會延伸到底部。於是左列的藍色背景在頁面上被半路截斷，浪費了你的一

番設計。怎麼辦呢?很不幸我們現在只能用欺騙的辦法，即將body的背景指定為與左列同顏色同寬度的圖片，css如下：　

　

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

背景圖應為寬150像素的藍色圖片。這一辦法的缺點是沒法使用em來指定左列的寬度，當使用者改變文字的大小導致內容的寬度擴張時，背景色的寬度不會隨之改變。

到寫這篇文章為止這是對這類問題的唯一解決辦法，因此你只能為左列使用像素值來獲得能夠自動延伸的不同的背景色
這點的處理方式根本不能稱之為要點,這種問題具體內容具體解決,這不是最好的方法.另外我還看到一篇文，關於如何給列表<li></li>設定換行換背景色，也是用背景圖片的方式，可惜那樣就固定死了行的高度。不好用。

9. 網站越大，CSS樣式越多，開始做前，請做好充分的準備和策劃
包括命名規則，頁面區塊劃分，內部樣式分類等。

10. ID與CLASS的區別
一.web標準中是不容許重複ID的,比如 div id="aa" 不容許重複2次,而class 定義的是類,理論上可以無限重複, 這樣需要多次引用的定義

便可以使用他.
二.屬性的優先順序問題 ID 的優先順序要高於class。
三.方便JS等用戶端指令碼,如果在頁面中要對某個對象進行指令碼操作,那麼可以給他定義一個ID,否則只能利用遍曆頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

11. 如果一組要嵌套的標籤之間需要些間距的話，那就留給位於裡面的標籤的margin屬性吧，而不要去定義位於外面的標籤的padding

12. li標籤前面的表徵圖推薦使用background-image，而不是list-style-image.

13. 在給你的標籤瘋狂加選擇符的時候，別忘了在CSS裡給選擇符加上注釋。
等你以後修改你的CSS的時候就知道為什麼要這麼做了。另外提醒您，不要太瘋狂了。(參考文：CSS樣式表中的選擇符)

14. 如果你給一個標籤設定了一個深色調的背景圖片和亮色調的文字效果。建議這個時候給你的標籤再設定一個深色調的背景顏色。
因為圖片丟失了，也可以保持文字的可讀性。

15. 超連結訪問過後hover樣式就不出現的問題
定義連結的四種狀態要注意先後順序： Link Visited Hover Active L-V-H-A

16. 與內容無關的圖片請使用background.時刻記住表現與內容分離。
17. DOCTYPE 影響 CSS 處理

18. margin加倍的問題。
設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div裡面加上display:inline;
例如：<#div id=\"imfloat\">
相應的css為
#IamFloat{
float:left;
margin:5px;
display:inline;}

19. margin取負值（不理解中 參考文：三列中間寬度自適應模型）
margin取負值可以在標籤使用絕對位置的時候起到相對定位的作用，在頁面置中顯示時，使用絕對位置的層不適合使用left：XXpx這個屬性。把這個層放到一個要相對定位的標籤旁，然後使用margin的負值是個好方法。這與top，left等屬性相對與視窗邊緣的定位不同。絕對位置的優勢在於可以讓其它元素忽略它的存在。

20. 在IE中可能由於注釋帶來的文字重複問題時可以把注釋改為：<！–[if ！IE]>Put your commentary in here…<！[endif]–>

21. 如何用CSS調用外部字型文法：
font-face{font-family：name；src：url（url）；sRules}
取值：name：字型名稱。任何可能的 font-family 屬性的值 url（url）：使用絕對或相對 url 地址指定OpenType字型檔 sRules：樣式表定義

22.為什麼web標準中IE無法設定捲軸顏色了
解決辦法是將body換成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

23. 怎麼樣才能讓層顯示在FLASH之上呢

解決的辦法是給FLASH設定透明
<param name="wmode" value="transparent" />

24. 連結(a標籤)的邊框與背景
a連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

25. CSS用於文檔列印
許多網站上都有一個針對列印的版本，但實際上這並不需要，因為可以用CSS來設定列印風格。
也就是說，可以為頁面指定兩個CSS檔案，一個用於螢幕顯示，一個用於列印：
<link type="text/css" rel="stylesheet" href="/blog/stylesheet.css" media="screen" /> <link type="text/css"

rel="stylesheet" href="printstyle.css" media="print" />
第1行就是顯示，第2行是列印，注意其中的media屬性。
但應該在列印CSS中寫什麼東西呢？你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導覽按鈕。要想瞭解更多，可以看"列印差異"這一篇。