英文原文：20-useful-css-tips-for-beginners，編譯：楊禮鑫
過去就連一個映象站點，我們都依靠大量的開發人員和程式設計師進行維護。得益於CSS和它的靈活性使得樣式能夠從程式碼中被獨立抽離出來，從而讓一個只具備基本CSS理論的初學者都能夠輕易地改變網站的樣式。
不論你是對用CSS建站感興趣還是僅僅拿它讓你的部落格更有feel，打好基礎才能蓋高樓。下面讓我們來看看一些對於初學者實用的CSS常識：
1、使用reset.css
火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。
這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。
2、CSS縮寫
CSS縮寫簡化了你的CSS程式碼，更重要的是，它讓你的程式碼更加整潔易懂。
不是像這樣建立CSS
|
1 2 3 4 5 6 7 |
.header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; } |
而是像這樣建立CSS
|
1 2 3 |
.header { background: #fff url(image.gif) no-repeat top left } |
3、理解class和id
這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。
4、實用的<li>
<li>也叫連結列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航選單樣式上。
5、少用<table>多用<div>
CSS最大的優勢之一是使用<div>達到樣式上的靈活多變。不同於<table>，<div>裡的內容不會被鎖在單元格<td>中。可以說幾乎所有的表格佈局都可以在<div>和樣式的正確使用下完成。當然，有大量表格內容時，還是用 <table>吧。
6、CSS除錯工具
在設計CSS時，能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。這裡有一些免費的CSS除錯工具推薦給你，你可以把它裝在瀏覽器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug
7、避免多餘的選擇器
有時你的CSS宣告可以更簡單，特別是你發現你的程式碼和下面的類似:
|
1 |
ul li { ... } |
|
1 |
ol li { ... } |
|
1 |
table tr td { ... } |
它們可以簡化為：
|
1 |
li { ... } |
|
1 |
td { ... } |
如上是因為<li>會且只會與<ul>或<ol>連用，就像<td>只能存在於<tr>和<table>中一樣，這兒真沒有把它們重複一次的必要。
8、!Important
所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。
|
1 2 3 4 |
.page { background-color:blue !important; background-color:red; } |
比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支援。
9、影像替代文字
這招經常被用來把一個基於文字的<h1>title</h1>標題換成圖片。按照如下所示：
|
1 2 3 4 5 6 |
h1 { text-indent:-9999px; background:url("title.jpg") no-repeat; width:100px; height:50px; } |
解釋說明： text-indent:-9999px; 利用縮排把文字撤掉，然後用指定了背景和長寬的圖片代替。
10、理解CSS的定位position
下列文章闡述了CSS定位position: {…}的理解和用法。
11、@import vs <link>
有兩種方法可以外部引用CSS檔案：@import和<link>
. 如果你不確定用哪種，Difference Between @import and link一文可以幫你選擇。
12、CSS表單設計
在CSS中，設計和制定網頁表格變得非常容易。以下幾篇文章可以教你怎麼做：Table-less form、Form Garden、Styling even more form controls、formee。
13、設計靈感來源
如果你是想尋找一些傑出的基於CSS的網站來激發靈感，或者只是找一些好的UI，這裡推薦幾個網站：
3. CSS Remix
4. CSS Reboot
5. CSS Beauty
6. CSS Elite
7. CSS Mania
8. CSS Leak
不夠？來個合集74 CSS Galleries
14、CSS圓角
這篇文章教你怎麼用CSS製作跨瀏覽器的圓角邊框。
15、操持程式碼整潔
要是你的CSS程式碼散亂，編完了你會發現它們亂七八糟。回顧的時候，肯定也是困難重重。對於初學者來說，最好排版規範，註釋恰當。
擴充套件閱讀
16、排版度量: Px Vs Em
排版的時候，如何選擇度量單位px或em?如果你感到有疑惑？下面幾篇文章或許能夠讓你更好的理解度量單位。Units of Measurement in CSS、CSS Font size explained、Using Points, Pixels, Ems, or Percentages for CSS Fonts。
擴充套件閱讀
1. CSS中強大的EM
2. CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT
17、CSS瀏覽器相容表
我們都知道不同的瀏覽器對於CSS渲染方式也不相同。有個參考，圖表或者清單來說明各種瀏覽器對CSS的相容狀況是很有用的：
18、CSS中多列布局
是不是在設計中遇到左，中，右的多列問題？接下來幾篇文章或許對你有幫助:
1. In Search of the Holy Grail
2. Faux Columns
3. Top reasons your CSS columns are messed up
5. Multi-Column Layouts Climb Out of the Box
19、使用免費編輯器
專用的編輯器總比記事本強吧。這兒有幾個不錯的推薦：Simple CSS、Notepad ++、A Style CSS Editor
20、理解媒體型別
當你用<link>的時候可能會遇到媒體型別。print, projection和screen是有時會用到的型別。理解和適當的使用它們可以讓使用者易於訪問。
擴充套件閱讀
譯者手語：初次翻譯前端技術博文，整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！