過去就連一個鏡像站點，我們都依靠大量的開發(fā)人員和程序員進(jìn)行維護(hù)。得益于CSS和它的靈活性使得樣式能夠從代碼中被獨立抽離出來，從而讓一個只具備基本CSS理論的初學(xué)者都能夠輕易地改變網(wǎng)站的樣式。
不論你是對用CSS建站感興趣還是僅僅拿它讓你的博客更有feel，打好基礎(chǔ)才能蓋高樓。下面讓我們來看看一些對于初學(xué)者實用的CSS常識：
1、使用reset.css
火狐和IE這兩種不同的瀏覽器，在繪制CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。
這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。
擴(kuò)展閱讀
1. Html5的Reset 和Base樣式的結(jié)合
2. Drupal主題的基礎(chǔ)樣式—reset、base、layout、print
3. CSS reset的重新審視 – 避免樣式重置
4. 目前比較全的CSS重設(shè)(reset)方法總結(jié)
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代碼，更重要的是，它讓你的代碼更加整潔易懂。
不是像這樣創(chuàng)建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;
}
|
而是像這樣創(chuàng)建CSS
1 2 3 | .header {
background: #fff url(image.gif) no-repeat top left
}
|
擴(kuò)展閱讀
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
這兩個選擇器總是讓初學(xué)者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標(biāo)識。簡單來說id就是用來標(biāo)識那些單獨不重復(fù)的樣式，而class是可以重復(fù)使用的。
擴(kuò)展閱讀
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>正確搭配的時候非常好用，尤其是用在導(dǎo)航菜單樣式上。
擴(kuò)展閱讀
1. Taming Lists
2. Amazing LI
5、少用<table>多用<div>
CSS最大的優(yōu)勢之一是使用<div>達(dá)到樣式上的靈活多變。不同于<table>，<div>里的內(nèi)容不會被鎖在單元格<td>中?？梢哉f幾乎所有的表格布局都可以在<div>和樣式的正確使用下完成。當(dāng)然，有大量表格內(nèi)容時，還是用 <table>吧。
擴(kuò)展閱讀
1. Tables are dead
2. Tables Vs. CSS
3. CSS vs tables
4. Table Layouts vs. Div Layouts: From Hell to… Hell?
6、CSS調(diào)試工具
在設(shè)計CSS時，能夠得到頁面布局的預(yù)覽對于優(yōu)化CSS樣式和糾錯是很有幫助的。這里有一些免費的CSS調(diào)試工具推薦給你，你可以把它裝在瀏覽器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug
7、避免多余的選擇器
有時你的CSS聲明可以更簡單，特別是你發(fā)現(xiàn)你的代碼和下面的類似:
它們可以簡化為：
如上是因為<li>會且只會與<ul>或<ol>連用，就像<td>只能存在于<tr>和<table>中一樣，這兒真沒有把它們重復(fù)一次的必要。
8、!Important
所有被!important 標(biāo)記的樣式，即使它后來被重寫，瀏覽器也只會采用被標(biāo)記的那條。
1 2 3 4 | .page {
background-color:blue !important;
background-color:red;
}
|
比如上面的例子，因為background-color:blue 被標(biāo)記為!important ，即使后來有把背景改成紅色的語句，也只采用被標(biāo)記的那條。!important 用來強(qiáng)制使一個樣式避免在之后的編碼中被修改，遺憾的是IE不支持。
擴(kuò)展閱讀
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、圖像替代文本
這招經(jīng)常被用來把一個基于文本的<h1>title</h1>標(biāo)題換成圖片。按照如下所示：
1 2 3 4 5 6 | h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}
|
解釋說明： text-indent:-9999px; 利用縮進(jìn)把文本撤掉，然后用指定了背景和長寬的圖片代替。
擴(kuò)展閱讀
1. 十種圖片替換文本CSS方法
2. 可用性更好的CSS隱藏文字技術(shù)(CSS圖片替換文字)
3. Nine Techniques for CSS Image Replacement
4. Using background-image to replace text
5. Dynamic Text Replacement
10、理解CSS的定位position
下列文章闡述了CSS定位position: {…}的理解和用法。
擴(kuò)展閱讀
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一文可以幫你選擇。
擴(kuò)展閱讀
1. 詭異的@import
2. 高性能網(wǎng)站設(shè)計：不要使用@import
3. What’s the Best Way to Add CSS to a Web Page?
4. Four methods of adding CSS to HTML
12、CSS表單設(shè)計
在CSS中，設(shè)計和制定網(wǎng)頁表格變得非常容易。以下幾篇文章可以教你怎么做：Table-less form、Form Garden、Styling even more form controls、formee。
13、設(shè)計靈感來源
如果你是想尋找一些杰出的基于CSS的網(wǎng)站來激發(fā)靈感，或者只是找一些好的UI，這里推薦幾個網(wǎng)站：
1. 20個免費下載PSD設(shè)計網(wǎng)站
2. 16+國外優(yōu)秀的UI設(shè)計資源庫
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代碼散亂，編完了你會發(fā)現(xiàn)它們亂七八糟?；仡櫟臅r候，肯定也是困難重重。對于初學(xué)者來說，最好排版規(guī)范，注釋恰當(dāng)。
擴(kuò)展閱讀
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。
擴(kuò)展閱讀
1. CSS中強(qiáng)大的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.
18、CSS中多列布局
是不是在設(shè)計中遇到左，中，右的多列問題？接下來幾篇文章或許對你有幫助:
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
19、使用免費編輯器
專用的編輯器總比記事本強(qiáng)吧。這兒有幾個不錯的推薦：Simple CSS、Notepad ++、A Style CSS Editor
20、理解媒體類型
當(dāng)你用<link>的時候可能會遇到媒體類型。print, projection和screen是有時會用到的類型。理解和適當(dāng)?shù)氖褂盟鼈兛梢宰層脩粢子谠L問。
擴(kuò)展閱讀
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單位創(chuàng)建CSS3的Media Queries
8. iPads和iPones的Media Queries
譯者手語：初次翻譯前端技術(shù)博文，整個翻譯依照原文線路進(jìn)行，并在翻譯過程略加了個人對技術(shù)的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！