HTML 5和CSS 3是如今Web范疇被評(píng)論的熱門(mén)話題，HTML 5被看做是將來(lái)的Web開(kāi)發(fā)標(biāo)準(zhǔn)，而CSS 3的新特性也讓大家備受等待。注：文中所說(shuō)到的一些新功能還未正式發(fā)布到CSS 3標(biāo)準(zhǔn)中。

最基礎(chǔ)的東西

剛?cè)腴T(mén)的頁(yè)面規(guī)劃人員最常犯的過(guò)錯(cuò)是創(chuàng)立一個(gè)無(wú)法修正的樣式表，包容了過(guò)多的class（類）和id，維護(hù)難度十分大。假定你想改動(dòng)你發(fā)布的文章的標(biāo)題色彩，而其它文章的標(biāo)題色彩堅(jiān)持默許的色彩，不用給每個(gè)標(biāo)題都添加一個(gè)big-red類，正確的辦法是運(yùn)用div類打包你發(fā)布的文章（也許是post），然后為你想要修正的標(biāo)題創(chuàng)立一個(gè)選擇器，如：

1. .post h2 {  
2.     font-weight: bold;  
3.     color: red;  
4. } 

這即是CSS的無(wú)窮魅力地點(diǎn)，也是CSS中最基礎(chǔ)的內(nèi)容。

字體特點(diǎn)

除了獨(dú)自指定每個(gè)特點(diǎn)外，你能夠運(yùn)用字體簡(jiǎn)寫(xiě)特點(diǎn)一次性指定一切特點(diǎn)，特點(diǎn)的次序如下：font-style，font-variant，font-weight，font-size，line-height，font-family。運(yùn)用字體簡(jiǎn)寫(xiě)特點(diǎn)時(shí)，任何未被指定的值將被其父值替代，例如，假如你只界說(shuō)了12px Helvetica, Arial, sans-serif，那么font-style，font-variant和font-weight將被設(shè)為nomal。字體特點(diǎn)也能夠用于指定體系字體：caption，icon，menu，message-box，small-caption，status-bar。這些值與體系運(yùn)用的字體有關(guān)，因而會(huì)依據(jù)用戶的喜好有所不一樣。

其它字體特點(diǎn)

有一些與字體有關(guān)的特點(diǎn)和值不常用，例如，通常不會(huì)運(yùn)用text-transform將文本悉數(shù)變換為大寫(xiě)，更多的是運(yùn)用font-variant: small-caps完成更高雅的作用。在設(shè)置字體的權(quán)重時(shí)，你也許不會(huì)運(yùn)用多見(jiàn)的regular和bold特點(diǎn)，CSS答應(yīng)你運(yùn)用100到900（如100，200，500等）的值指定字體的權(quán)重，你要知道的是400表明nomal權(quán)重，700表明bold，假如沒(méi)有給出字體的權(quán)重，它將承繼其父容器的字體權(quán)重。另一個(gè)十分有用的特點(diǎn)是font-size-adjust，但可悲的是如今僅Firefox 支撐它，它答應(yīng)你指定字體的長(zhǎng)寬比。

處理空格，換行和文字盤(pán)繞

有多個(gè)CSS特點(diǎn)能夠協(xié)助處理這些疑問(wèn)，但標(biāo)準(zhǔn)依然在擬定中（處于作業(yè)草案期間）。

空格

white-space特點(diǎn)答應(yīng)你指定一組簡(jiǎn)寫(xiě)特點(diǎn)：white-space-collapsing和text-wrap。下面是每個(gè)特點(diǎn)所代表的分類：

◆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

這個(gè)特點(diǎn)十分有用，例如，在頁(yè)面上顯現(xiàn)代碼片段時(shí)，能夠保存換行和空格，設(shè)置容器white-space: pre將保存格局。ordPress在它的儀表板上運(yùn)用了white-space: nowrap，因而，假如表格太小，單元格中的數(shù)字是不會(huì)換行的。 

 
圖 1 WordPress儀表板運(yùn)用white-space: nowrap的作用

換行

另一個(gè)被廣泛運(yùn)用的特點(diǎn)是word-wrap，它有兩個(gè)有用的特點(diǎn)值：normal和break-word。假如你將word-wrap設(shè)為break-word，假如字符串太長(zhǎng)，它將會(huì)溢出容器。理論上，word-wrap: break-word應(yīng)當(dāng)在text-wrap設(shè)為nomal或suppress（按捺換行）時(shí)才有用，但實(shí)踐上，即便text-wrap被設(shè)為其它值它也一樣能夠作業(yè)。請(qǐng)注意，word-break特點(diǎn)的break-strict值由于有危險(xiǎn)，現(xiàn)已被移除CSS標(biāo)準(zhǔn)了。 

 
圖 2 世界大猩猩維護(hù)方案網(wǎng)站為評(píng)論家的姓名運(yùn)用了word-wrap

單詞距離和字母距離

word-spacing和letter-spacing別離用于操控單詞距離離和字母距離離，它們都有三個(gè)代表最好、最小和最大距離的特點(diǎn)值。關(guān)于word-spacing，假如只設(shè)置一個(gè)值，它表明最好距離（其它兩個(gè)默許被設(shè)為normal），假如設(shè)兩個(gè)值，第一個(gè)代表最好距離和最小距離，第二個(gè)代表最大距離，假如設(shè)三個(gè)值，那別離代表最好距離，最小距離和最大距離，假如沒(méi)有特別要素，運(yùn)用最好距離。letter-spacing稍有不一樣，假如只設(shè)置一個(gè)值，那它表明三個(gè)特點(diǎn)值都一樣，其它設(shè)置方法就和word-spacing一樣了。 

 
圖 3 Show & Tell網(wǎng)站在其導(dǎo)航欄上運(yùn)用letter-spacing的作用

縮進(jìn)和懸掛

文本縮進(jìn)和懸掛是兩個(gè)常常被遺忘的頁(yè)面排版功能，這也許是由于：

1、設(shè)置復(fù)雜
2、有意不運(yùn)用
3、規(guī)劃人員不知道怎么運(yùn)用 

 
圖 4 Sushi & Robots網(wǎng)站在它的項(xiàng)目契合列表中運(yùn)用了懸掛

理論上每一段的最初都應(yīng)當(dāng)運(yùn)用縮進(jìn)，因而能夠運(yùn)用：

1. p + p {  
2.     text-indent: 1em;  
3. } 

這個(gè)選擇器的方針是每一個(gè)階段（如p）后的階段，因而對(duì)第一個(gè)階段無(wú)效。另一個(gè)受歡迎的排版規(guī)矩是項(xiàng)目符號(hào)和引證內(nèi)容應(yīng)當(dāng)懸掛，這么能保證正文視覺(jué)不受這些內(nèi)容的影響。CSS3標(biāo)準(zhǔn)界說(shuō)了一個(gè)hanging-punctuation特點(diǎn)，但如今還未竣工。如今能夠運(yùn)用text-indent特點(diǎn)，經(jīng)過(guò)負(fù)數(shù)特點(diǎn)值達(dá)到一樣的作用：

1. blockquote {  
2.     text-indent: -0.2em;  
3. } 

關(guān)于項(xiàng)目符號(hào)列表，保證項(xiàng)目符號(hào)的方位設(shè)為outside，容器div不要設(shè)為overflow: hidden，否則，項(xiàng)目契合將不可見(jiàn)。

頁(yè)面字體和字體裝修

font-face

關(guān)于font-face在網(wǎng)絡(luò)上的評(píng)論現(xiàn)已夠多了，爭(zhēng)辯的焦點(diǎn)是這個(gè)特點(diǎn)是不是會(huì)給規(guī)劃帶來(lái)視覺(jué)上的紊亂，有些人認(rèn)為應(yīng)當(dāng)按自個(gè)意愿選擇恣意字體，但別的的人則認(rèn)為應(yīng)當(dāng)運(yùn)用頁(yè)面安全字體。 

 
圖 5 Jonathan Snook近來(lái)運(yùn)用font-face特點(diǎn)從頭規(guī)劃的網(wǎng)站

不管你持何種觀點(diǎn)，有一點(diǎn)你必須得供認(rèn)，運(yùn)用font-face的網(wǎng)站看起來(lái)即是要漂亮些。font-face特點(diǎn)的運(yùn)用是適當(dāng)簡(jiǎn)單的，首要上載你想運(yùn)用的字體到你的網(wǎng)站，并給它取一個(gè)好的姓名。font-face的根本格局如下：

1. @font-face {  
2.     font-family: Museo Sans;  
3.     src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);  
4. } 

font-face必需求的兩個(gè)描述符是font-family和src，假如你想給h2標(biāo)題運(yùn)用特別字體，那么能夠：

1. h2 {  
2.     font-family: Museo Sans, sans-serif;  
3. } 

關(guān)于第二個(gè)特點(diǎn)src，咱們能夠運(yùn)用它做兩件事情：

1、假如字體現(xiàn)已裝置到用戶體系上，CSS將會(huì)直接運(yùn)用本地字體，咱們能夠運(yùn)用這種機(jī)制越過(guò)下載字體的過(guò)程，這么能夠節(jié)約帶寬。

2、假如用戶體系上沒(méi)有裝置需求的字體，CSS首要要下載URI連接的字體文件，別的咱們也指定了字體格局，但這一步也是能夠疏忽的。這個(gè)特點(diǎn)在IE中作業(yè)時(shí)，需求運(yùn)用EOT版別的字體，有些字體廠商供給了EOT版別的字體，但大多數(shù)時(shí)分咱們需求運(yùn)用微軟的WEFT或ttf2eot工具變換TrueType字體。

text-shadow

text-shadow特點(diǎn)答應(yīng)你給文本添加一個(gè)暗影，這個(gè)暗影一起運(yùn)用給文本和文本裝修，假如文本運(yùn)用了text-outline特點(diǎn)，暗影將從文本概括創(chuàng)立。運(yùn)用這個(gè)特點(diǎn)你能夠設(shè)置暗影的水平緩筆直偏移（有關(guān)于文本），暗影色彩和含糊半徑，下面是一個(gè)完整的text-shadow示例：

 
圖 6 Neutron運(yùn)用text-shadow創(chuàng)立的網(wǎng)站

1. p {  
2.     text-shadow: #000000 1px 1px 1px;  
3. } 

色彩和含糊半徑（最終的值）是可選的，你也能夠給暗影運(yùn)用RGB色彩值，使其通明，如：

1. p {  
2.     text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;  
3. } 

這兒咱們界說(shuō)了色彩的RGB值和一個(gè)alpha通明值（a，值為0.5）。關(guān)于text-shadow，標(biāo)準(zhǔn)依然有一些懸而未決的疑問(wèn)，如元素的暗影與相鄰元素堆疊在一起時(shí)，瀏覽器該怎么處理。

新的Text-Decoration特點(diǎn)

text-underline特點(diǎn)的一個(gè)疑問(wèn)是給咱們的操控很少，但最新的草案提議的新特點(diǎn)和改善的特點(diǎn)也許會(huì)給咱們更精密的操控，如今還不能運(yùn)用它們，因而這兒只扼要介紹一下。

◆text-decoration-line
取值和text-decoration: none，underline，overline，line-through一樣。

◆text-decoration-color
指定前一特點(diǎn)的線條色彩。

◆text-decoration-style
有用的取值規(guī)模是solid，double，dotted，dashed和wave。

◆text-decoration
前面三個(gè)特點(diǎn)的簡(jiǎn)寫(xiě)，假如你指定了none，underline，overline或line-through中的任一個(gè)值，這個(gè)特點(diǎn)將會(huì)向后與CSS1和CSS2兼容，但假如你指定了三個(gè)值，如text-decoration: red dashed underline，在不支撐的瀏覽器中就會(huì)疏忽它們。

◆text-decoration-skip
指定文本裝修是不是應(yīng)當(dāng)疏忽某種類型的元素，提議的有用特點(diǎn)值包含：none，images，spaces，ink和all。

◆text-underline-position
運(yùn)用這個(gè)特點(diǎn)你能夠操控下劃線是不是穿過(guò)文本的下行字符，有用的特點(diǎn)值包含：auto，before-edge，alphabetic 和after-edge。

操控溢出

經(jīng)過(guò)text-overflow特點(diǎn)操控當(dāng)文本溢出其容器時(shí)顯現(xiàn)啥，例如，假如你想讓新聞列表中的一切項(xiàng)目占有的高度都一樣，這時(shí)你能夠運(yùn)用CSS添加省略號(hào)表明由更多的文本內(nèi)容未顯現(xiàn)，在iPhone中咱們常?？吹竭@么的運(yùn)用。這個(gè)特點(diǎn)在最新的Safari、Opera、IE 6（溢出元素應(yīng)當(dāng)設(shè)置一個(gè)寬度，如100%）和 IE 7中有用，在Opera中還必須加上廠家特別的特點(diǎn)。 

 
圖 7 紐約時(shí)報(bào)iPhone運(yùn)用程序客戶端運(yùn)用省略號(hào)表明溢出的文本

1. li {  
2.  white-space: nowrap;  
3.  width: 100%;  
4.  overflow: hidden;  
5.  -o-text-overflow: ellipsis;  
6.  text-overflow: ellipsis;  
7. } 

在修改的標(biāo)準(zhǔn)草案中，你能夠看到其它與text-overflow有關(guān)的特點(diǎn)也被思考進(jìn)去了，如text-overflow-mode和text-overflow-ellipsis。

對(duì)齊和斷字

操控?cái)嘧质羌闊┦?，在設(shè)置為主動(dòng)斷字時(shí)有很多要素要思考，不一樣言語(yǔ)有不一樣的規(guī)矩，就拿葡萄牙文為例，你能夠在最終一個(gè)音節(jié)處斷字，關(guān)于雙子音，連字符必須在中右側(cè)。標(biāo)準(zhǔn)仍在開(kāi)發(fā)中，但現(xiàn)已提議的特點(diǎn)有：

◆hyphenate-dictionary
◆hyphenate-before和hyphenate-after
◆hyphenate-lines
◆hyphenate-character

 
圖 8 在w3c網(wǎng)站上為連字符提議的標(biāo)準(zhǔn)

另一個(gè)在大多數(shù)瀏覽器中還未完成的CSS3特點(diǎn)是text-align-last（如今只要IE支撐一部分），假如你的文本設(shè)為justify，你能夠界說(shuō)一個(gè)階段的最終一行或一行的右邊在強(qiáng)行斷字前怎么調(diào)整，這個(gè)特點(diǎn)的有用特點(diǎn)值包含：start，end，left，right，center和justify。

Unicode規(guī)模和言語(yǔ)

Unicode規(guī)模

unicode-range特點(diǎn)讓你界說(shuō)給定字體支撐的Unicode字符規(guī)模，在約束支撐各種言語(yǔ)或數(shù)學(xué)符號(hào)時(shí)十分有用，能夠削減網(wǎng)絡(luò)帶寬的運(yùn)用。假定你想在你的頁(yè)面中包含日語(yǔ)字符，運(yùn)用font-face規(guī)矩，需為一樣的font-family聲明屢次，每個(gè)聲明供給一個(gè)不一樣的字體文件供瀏覽器下載，一起每次都要聲明不一樣的Unicode規(guī)模（即便規(guī)模堆疊也得聲明），瀏覽器應(yīng)當(dāng)只下載烘托頁(yè)面需求的規(guī)模。要研討unicode-range是怎么作業(yè)的，這兒有一個(gè)比如。

言語(yǔ)

運(yùn)用:lang偽類創(chuàng)立言語(yǔ)靈敏的排版，這么你能夠?yàn)榉ㄕZ(yǔ)（fr）設(shè)置一個(gè)背景色，為德語(yǔ)（de）設(shè)置另一個(gè)背景色：

1. div:lang(fr) {  
2.  background-color: blue;  
3. }  
4.  
5. div:lang(de) {  
6.  background-color: yellow;  
7. } 

你也許會(huì)問(wèn)，為啥咱們不運(yùn)用一個(gè)簡(jiǎn)單的選擇器來(lái)完成呢，如：

1. div[lang|=fr] {  
2.  background-color: blue;  
3. } 

這么咱們的方針即是一切l(wèi)ang特點(diǎn)等于fr或以fr最初的div元素，假如咱們有一個(gè)元素坐落這個(gè)div中，它們不應(yīng)當(dāng)承繼這個(gè)選擇器的特點(diǎn)，由于它們根本就沒(méi)有設(shè)置lang特點(diǎn)，經(jīng)過(guò)運(yùn)用:lang偽類，lang特點(diǎn)就讓一切子元素承繼父元素的特點(diǎn)。好消息是簡(jiǎn)直一切最新的瀏覽器都支撐這個(gè)偽類了。

總結(jié)

在這篇文章所羅列的比如中，你也許會(huì)問(wèn)為啥大多數(shù)都講得很含糊，是的，由于標(biāo)準(zhǔn)還未取得正式經(jīng)過(guò)，隨時(shí)間的推移徹底有也許會(huì)發(fā)生改動(dòng)，但如今正是實(shí)驗(yàn)的時(shí)分，假如你也參與進(jìn)來(lái)，將有助于最終標(biāo)準(zhǔn)的定格。斗膽測(cè)驗(yàn)這些新特性，看看應(yīng)當(dāng)怎么改善才能讓你的作業(yè)變得更輕松。向標(biāo)準(zhǔn)添加一個(gè)特點(diǎn)有實(shí)踐的比如十分重要，此外，瀏覽器廠商也需求跟進(jìn)。