《CSS3最新版參考手冊(cè)》為官方CSS3在線參考學(xué)習(xí)手冊(cè)，本css3在線開(kāi)發(fā)手冊(cè)包含了各種css3屬性、語(yǔ)法、定義、使用方法，實(shí)例運(yùn)行等，是網(wǎng)頁(yè)前端學(xué)習(xí)者及開(kāi)發(fā)者不可或缺的在線查詢手冊(cè)文檔！注：CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的，這些模塊包括： 盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。
CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本，于1999年開(kāi)始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過(guò)采用模塊方法，CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因?yàn)椴煌臑g覽器廠商只支持給定特性。
但不同瀏覽器在不同時(shí)間支持不同特性，這也讓跨瀏覽器開(kāi)發(fā)變得復(fù)雜 。
CSS用于控制網(wǎng)頁(yè)的樣式和布局。CSS3則是最新的 CSS 標(biāo)準(zhǔn)。
CSS3語(yǔ)言基礎(chǔ)
CSS3的語(yǔ)法是建立在CSS原先版本基礎(chǔ)上的，它允許使用者在標(biāo)簽中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。
CSS選擇器中的大部分并不是在CSS3中新添加的，只是在之前的版本中沒(méi)有得到廣泛的應(yīng)用。
如果想嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級(jí)的標(biāo)簽以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級(jí)選擇器是非常有用的，它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便地維護(hù)樣式表。
創(chuàng)建并運(yùn)行第一個(gè)CSS3實(shí)例
實(shí)例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。這是一個(gè) div 元素。</div>
<div id="div2">你好。這是一個(gè) div 元素。</div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
是不是非常簡(jiǎn)單有趣！CSS3原理同CSS，是在網(wǎng)頁(yè)中自定義樣式表的選擇符，然后在網(wǎng)頁(yè)中大量引用這些選擇符。
提示：我們的CSS3教程將幫助您逐步學(xué)習(xí)了解CSS3中的新特性以及如何同時(shí)控制多重網(wǎng)頁(yè)的樣式和布局。如果你有任何疑問(wèn)，請(qǐng)前往PHP中文網(wǎng)CSS3社區(qū)提出你的問(wèn)題，會(huì)有熱心網(wǎng)友為你解答。
CSS3優(yōu)勢(shì)
減少開(kāi)發(fā)成本與維護(hù)成本
在CSS3出現(xiàn)之前，開(kāi)發(fā)人員為了實(shí)現(xiàn)一個(gè)圓角效果，往往需要添加額外的HTML標(biāo)簽，使用一個(gè)或多個(gè)圖片來(lái)完成，而使用CSS3只需要一個(gè)標(biāo)簽，利用CSS3中的border-radius屬性就能完成。
這樣，CSS3技術(shù)能把人員從繪圖、切圖和優(yōu)化圖片的工作中解放出來(lái)。
如果后續(xù)需要調(diào)整這個(gè)圓角的弧度或者圓角的顏色，使用CSS2.1，需要從頭繪圖、切圖才能實(shí)現(xiàn)，使用CSS3只需修改border-radius屬性值就可快速完成修改。
CSS3提供的動(dòng)畫(huà)特性，可讓開(kāi)發(fā)者在先實(shí)現(xiàn)一些動(dòng)態(tài)按鈕或者動(dòng)態(tài)導(dǎo)航時(shí)遠(yuǎn)離JavaScript，讓開(kāi)發(fā)人員不需要花費(fèi)大量的時(shí)間去寫(xiě)腳本或者尋找合適的腳本插件來(lái)適配一些動(dòng)態(tài)網(wǎng)站效果。
提高頁(yè)面性能
很多CSS3技術(shù)通過(guò)提供相同的視覺(jué)效果而成為圖片的“替代品”，換句話說(shuō)，在進(jìn)行Web開(kāi)發(fā)時(shí)，減少多余的標(biāo)簽嵌套以及圖片的使用數(shù)量，意味著用戶要下載的內(nèi)容將會(huì)更少，頁(yè)面加載也會(huì)更快。
另外，更少的圖片、腳本和Flash文件能夠減少用戶訪問(wèn)Web站點(diǎn)時(shí)的HTTP請(qǐng)求數(shù)，這是提升頁(yè)面加載速度的最佳方法之一。而使用CSS3制作圖形化網(wǎng)站無(wú)需任何圖片，極大地減少了HTTP的請(qǐng)求數(shù)量，并且提升了頁(yè)面的加載速度。
例如CSS3的動(dòng)畫(huà)效果，能夠減少對(duì)JavaScript和Flash文件的HTTP請(qǐng)求，但可能會(huì)要求瀏覽器執(zhí)行很多的工作來(lái)完成這個(gè)動(dòng)畫(huà)效果的渲染，這有可能導(dǎo)致瀏覽器響應(yīng)緩慢致使用戶流失。
因此，在使用一些復(fù)雜的特效時(shí)需要考慮清楚。其實(shí)很多CSS3技術(shù)能夠在任何情況下都大幅提高頁(yè)面的性能 。
CSS3將完全向后兼容，所以沒(méi)有必要修改的設(shè)計(jì)來(lái)讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。
本CSS3教程手冊(cè)涵蓋的內(nèi)容
本CSS3教程手冊(cè)涵蓋了所有CSS3新特性，包含了如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等新特性的介紹及運(yùn)行實(shí)例。
提示：本教程的每一章都包含了很多CSS3實(shí)例，您可以直接點(diǎn)擊?"運(yùn)行實(shí)例"?按鈕在線查看運(yùn)行結(jié)果。這些例子將幫助您更好地理解和使用CSS3新特性。
其它CSS3相關(guān)學(xué)習(xí)參考資源
除了本頁(yè)面右側(cè)的知識(shí)拓展，還為大家精選了以下資源
最新章節(jié)
- CSS3 多媒體查詢實(shí)例 2016-10-18
- CSS3 多媒體查詢 2016-10-18
- CSS3 彈性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分頁(yè) 2016-10-18
- CSS 按鈕 2016-10-18
- CSS 圖片 2016-10-18
- CSS3 用戶界面 2016-10-18
相關(guān)課程
- Web前端開(kāi)發(fā)極速入門(mén) 2021-12-10
- 最懂你的大前端課：HTML5/CSS3/ES6/NPM/Vue/...【原創(chuàng)】 2022-09-30
- Gulp入門(mén)視頻教程 2022-04-18
- 兄弟連高洛峰CSS3視頻教程 2022-04-20
- AngularJS開(kāi)發(fā)Web應(yīng)用程序基礎(chǔ)實(shí)例視頻教程 2022-04-18
- Ajax全接觸 2022-04-13
- MUI框架基礎(chǔ)視頻教程 2022-04-13
- 線上培訓(xùn)班試聽(tīng)課 2019-01-10