【51CTO獨家譯稿】Html 5和CSS 3是目前Web領域被討論的熱門話題，Html 5被看做是未來的web開發標准，而CSS 3的新特性也讓人們備受期待。注：文中所提到的一些新功能還未正式發布到CSS 3規范中。
最基礎的東西
剛入門的網頁設計人員最常犯的錯誤是創建一個無法修改的樣式表，容納了過多的class（類）和id，維護難度非常大。假設你想改變你發布的文章的標題顏色，而其它文章的標題顏色保持默認的顏色，不用給每個標題都增加一個big-red類，明智的方法是使用div類打包你發布的文章（可能是post），然後為你想要修改的標題創建一個選擇器，如：
- .post h2 {
- font-weight: bold;
- color: red;
- }
這就是CSS的巨大魅力所在，也是CSS中最基礎的內容。
字體屬性
除了單獨指定每個屬性外，你可以使用字體簡寫屬性一次性指定所有屬性，屬性的順序如下：font-style，font-variant，font-weight，font-size，line-height，font-family。使用字體簡寫屬性時，任何未被指定的值將被其父值取代，例如，如果你只定義了12px Helvetica, Arial, sans-serif，那麼font-style，font-variant和font-weight將被設為nomal。字體屬性也可以用於指定系統字體：caption，icon，menu，message-box，small-caption，status-bar。這些值與系統使用的字體有關，因此會根據用戶的喜好有所不同。
其它字體屬性
有一些與字體相關的屬性和值不常用，例如，一般不會使用text-transform將文本全部轉換為大寫，更多的是使用font-variant: small-caps實現更優雅的效果。在設置字體的權重時，你可能不會使用常見的regular和bold屬性，CSS允許你使用100到900（如100，200，500等）的值指定字體的權重，你要知道的是400表示nomal權重，700表示bold，如果沒有給出字體的權重，它將繼承其父容器的字體權重。另一個非常有用的屬性是font-size-adjust，但可悲的是目前僅Firefox 支持它，它允許你指定字體的長寬比。
處理空格，換行和文字環繞
有多個CSS屬性可以幫助處理這些問題，但規范仍然在制定中（處於工作草案階段）。
空格
white-space屬性允許你指定一組簡寫屬性：white-space-collapsing和text-wrap。下面是每個屬性所代表的分類：
◆normal
white-space-collapsing: collapse/text-wrap: normal
◆nowrap
white-space-collapsing: collapse/text-wrap: none
◆pre-wrap
white-space-collapsing: preserve/text-wrap: normal
◆pre-line
white-space-collapsing: preserve-breaks/text-wrap: normal
這個屬性非常有用，例如，在網頁上顯示代碼片段時，可以保留換行和空格，設置容器white-space: pre將保留格式。ordPress在它的儀表板上使用了white-space: nowrap，因此，如果表格太小，單元格中的數字是不會換行的。
圖 1 WordPress儀表板使用white-space: nowrap的效果
換行
另一個被廣泛使用的屬性是word-wrap，它有兩個有效的屬性值：normal和break-word。如果你將word-wrap設為break-word，如果字符串太長，它將會溢出容器。理論上，word-wrap: break-word應該在text-wrap設為nomal或suppress（抑制換行）時才有效，但實際上，即使text-wrap被設為其它值它也一樣可以工作。請注意，Word-break屬性的break-strict值因為有風險，已經被移除CSS規范了。
圖 2 國際大猩猩保護計劃網站為評論家的名字使用了Word-wrap
單詞間距和字母間距
word-spacing和letter-spacing分別用於控制單詞間間距和字母間間距，它們都有三個代表最佳、最小和最大間距的屬性值。對於word-spacing，如果只設置一個值，它表示最佳間距（其它兩個默認被設為normal），如果設兩個值，第一個代表最佳間距和最小間距，第二個代表最大間距，如果設三個值，那分別代表最佳間距，最小間距和最大間距，如果沒有特殊原因，使用最佳間距。letter-spacing稍有不同，如果只設置一個值，那它表示三個屬性值都一樣，其它設置方式就和Word-spacing一樣了。
圖 3 Show & Tell網站在其導航欄上使用letter-spacing的效果
縮進和懸掛
文本縮進和懸掛是兩個經常被忘掉的網頁排版功能，這可能是因為：
1、設置復雜
2、有意不使用
3、設計人員不知道如何使用
圖 4 Sushi & Robots網站在它的項目符合列表中使用了懸掛
理論上每一段的開頭都應該使用縮進，因此可以使用：
- p + p {
- text-indent: 1em;
- }
這個選擇器的目標是每一個段落（如p）後的段落，因此對第一個段落無效。另一個受歡迎的排版規則是項目符號和引用內容應該懸掛，這樣能保證正文視覺不受這些內容的影響。CSS3規范定義了一個hanging-punctuation屬性，但目前還未完工。現在可以使用text-indent屬性，通過負數屬性值達到同樣的效果：
- blockquote {
- text-indent: -0.2em;
- }
對於項目符號列表，確保項目符號的位置設為outside，容器div不要設為overflow: hidden，否則，項目符合將不可見。