告訴CSS新手20個小技巧

感謝有了CSS,真是由於她的靈活性，網頁的樣式可以完全與代碼分離。現在，你僅僅需要有CSS的基礎知識，甚至是一個初學者也能夠輕易的改變網站的外觀。

在過去，我們大量依靠網站設計人員和程式員來幫忙更新網站，甚至一個十分簡單的網頁也是如此。感謝有了CSS,真是由於她的靈活性，網頁的樣式可以完全與代碼分離。現在，你僅僅需要有CSS的基礎知識，甚至是一個初學者也能夠輕易的改變網站的外觀。

無論你是準備用CSS來建立你自己的網頁，還是僅僅想用她來改變你部落格的外觀，學習CSS基本原則都有助於為你打下CSS的堅實基礎。讓我們來看一些對CSS初學者有用的小技巧。下面是完整列表：

1.運用reset.css

像firefox和Internet Explorer的瀏覽器對預設的css樣式有不同的解析方式。reset.css放在所有樣式之前，在不同的瀏覽器中你都可以精確的控制網頁。

下面是普遍被運用的reset.css架構。-

2.運用CSS縮寫

CSS代碼縮寫能夠使得css代碼更簡短，更重要的是，她使得代碼結構更加明晰、更容易理解。

比如，下面的代碼下過是一樣的，但是顯然後一種更好。

.header {

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}

下面是一種更好的寫法

.header {
background: #fff url(image.gif) no-repeat top left
}

3.理解class和id的不同

這兩種不同的選取器經常被初學者弄混。在CSS中，Class用“.”代表，而ID用“#”代表。簡單的說，id常被用於唯一的樣式、id屬性不能夠重複，而class則不同，可以重複利用。

4.強大的<li>

當正確的運用<ol>或者<ul>，<li>非常有用，特別是在定義導覽功能表樣式的時候。

5.拋棄<table>，試試<div>吧

CSS的一個優點在於用<div>來對網頁樣式進行完全的控制。<div>不像<table>需要用<td>來表示內容。完全可以認為絕大部分table布局可以用<div>和恰當的style來替換，當然大塊的表格版面配置例外。

6.CSS調試工具

CSS調試工具能夠使我們在CSS來進行排版的時候能夠即時的看到效果，它能夠協助我們更好的理解和調試CSS。這兒是一個免費的調試工具，你可以免費的安裝在你的瀏覽器中：FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, 和 Firebug。

7.避免多餘的選取器

你的選取器應該越簡單越好，意味著如果你有如下的代碼：

ul li { ... }
ol li { ... }
table tr td { ... }

這些代碼可以簡化為:

li { ... }
td { ... }

解釋：<li>僅僅存在於<ul>或者<ol>；<td>也僅僅能夠在<tr>和<table>。

8.理解 !important

任何帶有!important的樣式將無法更改（即使被覆蓋也不會改變）。

.page { background-color:blue !important;   background-color:red;}

在上面的例子中，background-color:blue將被運用，意味他被 !important標記了，即使後面跟有 background-color:red;。!important常被用在室某條樣式不被覆蓋，可是有時候在Internet Explorer是無效的。

9.用文本替代圖片

這是一個經常被用到的例子，h1中寫文字，背景用圖片。

h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}

說明：text-indent:-9999px;可以將文字放在螢幕以外，而圖片作為背景將被顯示出來。當然這裡的h1要設定固定的寬和高。

10.理解CSS定位

下面的文章將會協助你理解CSS定位。

11.@import vs <link>

有兩種方法匯入外部CSS檔案——分別是用@import 和 <link>。如果你還不確定該用那種方法，下面的文章可控參考。

12.用CSS來設定表單樣式

CSS可以輕易的控制網頁表單樣式，下面的文章將會向你展示怎樣做：

(等待翻譯)

13.擷取靈感

你是否在四處尋找一個基於CSS的優秀網站、或者是想尋找一個良好的使用者介面，這兒有一些我們推薦的CSS展示網站：

CSS Remix

CSS Reboot

CSS Beauty

CSS Elite

CSS Mania

CSS Leak

14.CSS圓角設計

下圖將為你告訴你如何設計一個跨瀏覽器的圓角框：

譯者注:圓角設計一直是CSS設計裡的熱門話題，圓角設計的方法很多，讀者可以以“圓角設計”為關鍵詞搜尋相關資訊。在這裡，原文提供的方法是為傳統的九宮格辦法，即在box的四角放置四個圓角元素，控制背景位子，產生圓角效果。

15.保持CSS代碼簡潔

如果你的CSS編碼很混亂，你將會在一篇混亂中結束編碼，並且在過段時間再看代碼時將很難理解。作為初學者，你應該養成良好的編碼習慣。

16.使用絕對單位還是相對單位(px vs em)

是否碰到過選擇px還是em的問題？下面的文章將協助你更好的理解絕對單位和相對單位。

17.CSS瀏覽器安全色表

總所周知，不同瀏覽器對CSS樣式有不同的解析方式。我們應該擁有一份完整的瀏覽器安全色表:

CSS support table: #1, #2, #3, #4.

18.瞭解CSS布局

瞭解各種網頁布局的寫法。

19.擷取一個免費的CSS編輯器

專業的編輯器總是優於記事本，下面是我們推薦的一些編輯器:

More - Simple CSS, Notepad ++, A Style CSS Editor

譯者注:國內一般喜歡用Dreamweaver編寫CSS，對於初學者，我們推薦EditPlus。

20.理解媒體類型

當你使用link連結外部css檔案的有時候需要填寫媒體類型,print, projection 和 screen是常用的寫法。正確的運用他們使網站對使用者更友好。