20個初學者實用的CSS技巧

w3cplus發表於2013-02-04
CSS

　　過去就連一個映象站點，我們都依靠大量的開發人員和程式設計師進行維護。得益於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

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

}

　　而是像這樣建立CSS

.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宣告可以更簡單，特別是你發現你的程式碼和下面的類似:

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 ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!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>標題換成圖片。按照如下所示：

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

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

相關文章