定義未來Web樣式 CSS 3最新特性一覽
原創(chuàng)【51CTO獨家譯稿】HTML 5和CSS 3是目前Web領域被討論的熱門話題，HTML 5被看做是未來的Web開發(fā)標準，而CSS 3的新特性也讓人們備受期待。注：文中所提到的一些新功能還未正式發(fā)布到CSS 3規(guī)范中。
最基礎的東西
剛入門的網頁設計人員最常犯的錯誤是創(chuàng)建一個無法修改的樣式表，容納了過多的class（類）和id，維護難度非常大。假設你想改變你發(fā)布的文章的標題顏色，而其它文章的標題顏色保持默認的顏色，不用給每個標題都增加一個big-red類，明智的方法是使用div類打包你發(fā)布的文章（可能是post），然后為你想要修改的標題創(chuàng)建一個選擇器，如：
- .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。字體屬性也可以用于指定系統(tǒng)字體：caption，icon，menu，message-box，small-caption，status-bar。這些值與系統(tǒng)使用的字體有關，因此會根據用戶的喜好有所不同。
其它字體屬性
有一些與字體相關的屬性和值不常用，例如，一般不會使用text-transform將文本全部轉換為大寫，更多的是使用font-variant: small-caps實現更優(yōu)雅的效果。在設置字體的權重時，你可能不會使用常見的regular和bold屬性，CSS允許你使用100到900（如100，200，500等）的值指定字體的權重，你要知道的是400表示nomal權重，700表示bold，如果沒有給出字體的權重，它將繼承其父容器的字體權重。另一個非常有用的屬性是font-size-adjust，但可悲的是目前僅Firefox 支持它，它允許你指定字體的長寬比。
處理空格，換行和文字環(huán)繞
有多個CSS屬性可以幫助處理這些問題，但規(guī)范仍然在制定中（處于工作草案階段）。
空格
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規(guī)范了。
圖 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）后的段落，因此對第一個段落無效。另一個受歡迎的排版規(guī)則是項目符號和引用內容應該懸掛，這樣能保證正文視覺不受這些內容的影響。CSS3規(guī)范定義了一個hanging-punctuation屬性，但目前還未完工。現在可以使用text-indent屬性，通過負數屬性值達到同樣的效果：
- blockquote {
- text-indent: -0.2em;
- }
對于項目符號列表，確保項目符號的位置設為outside，容器div不要設為overflow: hidden，否則，項目符合將不可見。 #p#
網頁字體和字體裝飾
font-face
關于font-face在網絡上的討論已經夠多了，爭論的焦點是這個屬性是否會給設計帶來視覺上的混亂，有些人認為應該按自己意愿選擇任意字體，但另外的人則認為應該使用網頁安全字體。
圖 5 Jonathan Snook最近使用font-face屬性重新設計的網站
無論你持何種觀點，有一點你必須得承認，使用font-face的網站看起來就是要美觀些。font-face屬性的使用是相當簡單的，首先上傳你想使用的字體到你的網站，并給它取一個好的名字。font-face的基本格式如下：
- @font-face {
- font-family: Museo Sans;
- src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);
- }
font-face必須要的兩個描述符是font-family和src，如果你想給h2標題使用特殊字體，那么可以：
- h2 {
- font-family: Museo Sans, sans-serif;
- }
對于第二個屬性src，我們可以利用它做兩件事情：
1、如果字體已經安裝到用戶系統(tǒng)上，CSS將會直接使用本地字體，我們可以利用這種機制跳過下載字體的步驟，這樣可以節(jié)省帶寬。
2、如果用戶系統(tǒng)上沒有安裝需要的字體，CSS首先要下載URI鏈接的字體文件，另外我們也指定了字體格式，但這一步也是可以忽略的。這個屬性在IE中工作時，需要使用EOT版本的字體，有些字體廠商提供了EOT版本的字體，但大多數時候我們需要使用微軟的WEFT或ttf2eot工具轉換TrueType字體。
text-shadow
text-shadow屬性允許你給文本添加一個陰影，這個陰影同時應用給文本和文本裝飾，如果文本應用了text-outline屬性，陰影將從文本輪廓創(chuàng)建。使用這個屬性你可以設置陰影的水平和垂直偏移（相對于文本），陰影顏色和模糊半徑，下面是一個完整的text-shadow示例：
圖 6 Neutron使用text-shadow創(chuàng)建的網站
- p {
- text-shadow: #000000 1px 1px 1px;
- }
顏色和模糊半徑（最后的值）是可選的，你也可以給陰影使用RGB顏色值，使其透明，如：
- p {
- text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
- }
這里我們定義了顏色的RGB值和一個alpha透明值（a，值為0.5）。對于text-shadow，規(guī)范仍然有一些懸而未決的問題，如元素的陰影與相鄰元素重疊在一起時，瀏覽器該如何處理。
新的Text-Decoration屬性
text-underline屬性的一個問題是給我們的控制很少，但最新的草案提議的新屬性和改進的屬性可能會給我們更精細的控制，目前還不能使用它們，因此這里只簡要介紹一下。
◆text-decoration-line
取值和text-decoration: none，underline，overline，line-through一樣。
◆text-decoration-color
指定前一屬性的線條顏色。
◆text-decoration-style
有效的取值范圍是solid，double，dotted，dashed和wave。
◆text-decoration
前面三個屬性的簡寫，如果你指定了none，underline，overline或line-through中的任一個值，這個屬性將會向后與CSS1和CSS2兼容，但如果你指定了三個值，如text-decoration: red dashed underline，在不支持的瀏覽器中就會忽略它們。
◆text-decoration-skip
指定文本裝飾是否應該忽略某種類型的元素，提議的有效屬性值包括：none，images，spaces，ink和all。
◆text-underline-position
使用這個屬性你可以控制下劃線是否穿過文本的下行字符，有效的屬性值包括：auto，before-edge，alphabetic 和after-edge。#p#
控制溢出
通過text-overflow屬性控制當文本溢出其容器時顯示什么，例如，如果你想讓新聞列表中的所有項目占據的高度都一樣，這時你可以使用CSS增加省略號表示由更多的文本內容未顯示，在iPhone中我們經?？吹竭@樣的應用。這個屬性在最新的Safari、Opera、IE 6（溢出元素應該設置一個寬度，如100%）和 IE 7中有效，在Opera中還必須加上廠家特殊的屬性。
圖 7 紐約時報iPhone應用程序客戶端使用省略號表示溢出的文本
- li {
- white-space: nowrap;
- width: 100%;
- overflow: hidden;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- }
在編輯的規(guī)范草案中，你可以看到其它與text-overflow相關的屬性也被考慮進去了，如text-overflow-mode和text-overflow-ellipsis。
對齊和斷字
控制斷字是件麻煩事，在設置為自動斷字時有許多因素要考慮，不同語言有不同的規(guī)則，就拿葡萄牙文為例，你可以在最后一個音節(jié)處斷字，對于雙輔音，連字符必須在中右側。規(guī)范仍在開發(fā)中，但已經提議的屬性有：
◆hyphenate-dictionary
◆hyphenate-before和hyphenate-after
◆hyphenate-lines
◆hyphenate-character
圖 8 在w3c網站上為連字符提議的規(guī)范
另一個在大多數瀏覽器中還未實現的CSS3屬性是text-align-last（目前只有IE支持一部分），如果你的文本設為justify，你可以定義一個段落的最后一行或一行的右邊在強制斷字前如何調整，這個屬性的有效屬性值包括：start，end，left，right，center和justify。
Unicode范圍和語言
Unicode范圍
unicode-range屬性讓你定義給定字體支持的Unicode字符范圍，在限制支持各種語言或數學符號時非常有用，可以減少網絡帶寬的使用。假設你想在你的網頁中包括日語字符，使用font-face規(guī)則，需為相同的font-family聲明多次，每個聲明提供一個不同的字體文件供瀏覽器下載，同時每次都要聲明不同的Unicode范圍（即使范圍重疊也得聲明），瀏覽器應該只下載渲染網頁需要的范圍。要研究unicode-range是如何工作的，這里有一個例子。
語言
使用:lang偽類創(chuàng)建語言敏感的排版，這樣你可以為法語（fr）設置一個背景色，為德語（de）設置另一個背景色：
- div:lang(fr) {
- background-color: blue;
- }
- div:lang(de) {
- background-color: yellow;
- }
你可能會問，為什么我們不使用一個簡單的選擇器來實現呢，如：
- div[lang|=fr] {
- background-color: blue;
- }
這樣我們的目標就是所有l(wèi)ang屬性等于fr或以fr開頭的div元素，如果我們有一個元素位于這個div中，它們不應該繼承這個選擇器的屬性，因為它們根本就沒有設置lang屬性，通過使用:lang偽類，lang屬性就讓所有子元素繼承父元素的屬性。好消息是幾乎所有最新的瀏覽器都支持這個偽類了。
總結
在本文所列舉的例子中，你可能會問為什么大部分都講得很模糊，是的，因為規(guī)范還未獲得正式通過，隨時間的推移完全有可能會發(fā)生改變，但現在正是試驗的時候，如果你也參與進來，將有助于最終規(guī)范的定格。大膽嘗試這些新特性，看看應該如何改進才能讓你的工作變得更輕松。向規(guī)范增加一個屬性有實際的例子非常重要，此外，瀏覽器廠商也需要跟進。
【編輯推薦】
