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