過去就連一個鏡像站點，我們都依靠大量的開發人員和程序員進行維護。得益于CSS和它的靈活性使得樣式能夠從代碼中被獨立抽離出來，從而讓一個只具備基本CSS理論的初學者都能夠輕易地改變網站的樣式。

　　不論你是對用CSS建站感興趣還是僅僅拿它讓你的博客更有feel，打好基礎才能蓋高樓。下面讓我們來看看一些對于初學者實用的CSS常識：

　1、使用reset.css

　　火狐和IE這兩種不同的瀏覽器，在繪制CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。

　　這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。

擴展閱讀

1. Html5的Reset 和Base樣式的結合

2. Drupal主題的基礎樣式—reset、base、layout、print

3. CSS reset的重新審視 – 避免樣式重置

4. 目前比較全的CSS重設(reset)方法總結

5. Reset CSS研究（八卦篇）

6. HTML5 Reset Stylesheet

7. normalize.css

8. Reset restarted

9. CSS Frameworks + CSS Reset: Design From Scratch

10. Quick Tip: Create Your Own Simple Reset.css File

11. NO CSS RESET

12. http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

13. CSS-reset

　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 
}

擴展閱讀

1. Introduction to CSS Shorthand

2. Useful CSS shorthand properties

3. CSS Shorthand Guide

4. Efficient CSS with shorthand properties

5. Proper CSS Shorthand

6. Understanding CSS Shorthand

7. CSS shorthand reference

8. 5 CSS shorthand tips and how to optimize CSS

9. 6 CSS Shorthand Tricks Every Developer Should Know

10. Shorthand properties

　3、理解class和id

　　這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重復的樣式，而class是可以重復使用的。

擴展閱讀

1. Class vs. ID

2. When to use Class, ID

3. Applying Class and ID together

4. The Difference Between ID and Class

5. Multiple Class / ID and Class Selectors

6. When using IDs can be a pain in the class…

　4、實用的<li>

　　<li>也叫鏈接列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航菜單樣式上。

擴展閱讀

1. Taming Lists

2. Amazing LI

　5、少用<table>多用<div>

　　CSS最大的優勢之一是使用<div>達到樣式上的靈活多變。不同于<table>，<div>里的內容不會被鎖在單元格<td>中。可以說幾乎所有的表格布局都可以在<div>和樣式的正確使用下完成。當然，有大量表格內容時，還是用 <table>吧。

擴展閱讀

1. Tables are dead

2. Tables Vs. CSS

3. CSS vs tables

4. Table Layouts vs. Div Layouts: From Hell to… Hell?

　6、CSS調試工具

　　在設計CSS時，能夠得到頁面布局的預覽對于優化CSS樣式和糾錯是很有幫助的。這里有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug

給初學者的20個CSS實用技巧

　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不支持。

擴展閱讀

1. !important CSS Declarations: How and When to Use Them

2. When Using !important is The Right Choice

3. Everything You Need to Know About !important CSS Declarations

4. UNDERSTANDING CSS SPECIFICITY

　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; 利用縮進把文本撤掉，然后用指定了背景和長寬的圖片代替。

擴展閱讀

1. 十種圖片替換文本CSS方法

2. 可用性更好的CSS隱藏文字技術(CSS圖片替換文字)

3. Nine Techniques for CSS Image Replacement

4. Using background-image to replace text

5. Dynamic Text Replacement

　10、理解CSS的定位position

　　下列文章闡述了CSS定位position: {…}的理解和用法。

擴展閱讀

1. 十步圖解CSS的position

2. CSS Positioning 101

3. Using Absolute Positioning in CSS

4. Detailed Positioning

5. An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning

6. Absolute, Relative, Fixed Positioning: How Do They Differ?

　11、@import vs <link>

　　有兩種方法可以外部引用CSS文件：@import和<link>

　　. 如果你不確定用哪種，Difference Between @import and link一文可以幫你選擇。

擴展閱讀

1. 詭異的@import

2. 高性能網站設計：不要使用@import

3. What’s the Best Way to Add CSS to a Web Page?

4. Four methods of adding CSS to HTML

　12、CSS表單設計

　　在CSS中，設計和制定網頁表格變得非常容易。以下幾篇文章可以教你怎么做：Table-less form、Form Garden、Styling even more form controls、formee。

給初學者的20個CSS實用技巧

　13、設計靈感來源

　　如果你是想尋找一些杰出的基于CSS的網站來激發靈感，或者只是找一些好的UI，這里推薦幾個網站：

　　1. 20個免費下載PSD設計網站

　　2. 16+國外優秀的UI設計資源庫

　　3. CSS Remix

　　4. CSS Reboot

　　5. CSS Beauty

　　6. CSS Elite

　　7. CSS Mania

　　8. CSS Leak

給初學者的20個CSS實用技巧

　　不夠？來個合集74 CSS Galleries

　14、CSS圓角

　　這篇文章教你怎么用CSS制作跨瀏覽器的圓角邊框。

給初學者的20個CSS實用技巧

　15、操持代碼整潔

　　要是你的CSS代碼散亂，編完了你會發現它們亂七八糟。回顧的時候，肯定也是困難重重。對于初學者來說，最好排版規范，注釋恰當。

擴展閱讀

1. 12 Principles For Keeping Your Code Clean

2. Format CSS Codes Online

　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

3. Which font sizing is best? EM vs PX vs %

4. px – em – % – pt – keyword

5. Understanding em Units in CSS

　17、CSS瀏覽器兼容表

　　我們都知道不同的瀏覽器對于CSS渲染方式也不相同。有個參考，圖表或者清單來說明各種瀏覽器對CSS的兼容狀況是很有用的：

　　CSS 支持表格: #1, #2, #3, #4.

給初學者的20個CSS實用技巧

　18、CSS中多列布局

　　是不是在設計中遇到左，中，右的多列問題？接下來幾篇文章或許對你有幫助:

　　1. In Search of the Holy Grail

　　2. Faux Columns

　　3. Top reasons your CSS columns are messed up

　　4. Litte Boxes (examples)

　　5. Multi-Column Layouts Climb Out of the Box

　　6. Absolute Columns

給初學者的20個CSS實用技巧

　19、使用免費編輯器

　　專用的編輯器總比記事本強吧。這兒有幾個不錯的推薦：Simple CSS、Notepad ++、A Style CSS Editor

給初學者的20個CSS實用技巧

　20、理解媒體類型

　　當你用<link>的時候可能會遇到媒體類型。print, projection和screen是有時會用到的類型。理解和適當的使用它們可以讓用戶易于訪問。

擴展閱讀

1. CSS3 Media Queries

2. CSS and Media Types

3. W3 Media Types

4. CSS Media Types

5. CSS2 Media Types

6. CSS3 Media Queries模板

7. 使用em單位創建CSS3的Media Queries

8. iPads和iPones的Media Queries

　　譯者手語：初次翻譯前端技術博文，整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！