亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS3 最新版參考手冊
閱讀（32541） 更新時間(2022-04-12)

《CSS3最新版參考手冊》為官方CSS3線上參考學(xué)習(xí)手冊，本css3線上開發(fā)手冊包含了各種css3屬性、語法、定義、使用方法，實例運作等，是網(wǎng)頁前端學(xué)習(xí)者及開發(fā)者不可或缺的線上查詢手冊文件！註：CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝向模組化發(fā)展的，這些模組包括： 盒子模型、列表模組、超連結(jié)方式、語言模組、背景和邊框、文字特效、多欄佈局等。

CSS3是CSS（層疊樣式表）技術(shù)的升級版本，於1999年開始訂訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模組、超連結(jié)方式、語言模組、背景和邊框、文字特效、多欄佈局等模組。

CSS演進(jìn)的一個主要變化就是W3C決定將CSS3分成一系列模組。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此透過採用模組方法，CSS3規(guī)範(fàn)裡的元素能以不同速度向前發(fā)展，因為不同的瀏覽器廠商只支援給定特性。

但不同瀏覽器在不同時間支援不同特性，這也讓跨瀏覽器開發(fā)變得複雜 。

提示：在繼續(xù)學(xué)習(xí)CSS3之前，你需要對CSS、HTML知識有基本的了解。

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)一個乾淨(jìng)的、輕量級的標(biāo)籤以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的，它們可以減少在標(biāo)籤中的class和ID的數(shù)量並讓設(shè)計師更方便地維護(hù)樣式表。

建立並執(zhí)行第一個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>

執(zhí)行實例?

點擊"運行實例" 按鈕查看線上實例

是不是非常簡單有趣！ CSS3原理同CSS，是在網(wǎng)頁中自訂樣式表的選擇符，然後在網(wǎng)頁中大量引用這些選擇符。

提示：我們的CSS3教學(xué)將幫助您逐步學(xué)習(xí)了解CSS3中的新功能以及如何同時控制多重網(wǎng)頁的樣式和佈局。如果你有任何疑問，請前往PHP中文網(wǎng)CSS3社群提出你的問題，會有熱心網(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ā)者在先實作一些動態(tài)按鈕或動態(tài)導(dǎo)航時遠(yuǎn)離JavaScript，讓開發(fā)人員不需要花費大量的時間去寫腳本或?qū)ふ液线m的腳本外掛程式來適配一些動態(tài)網(wǎng)站效果。

  • 提高頁面性能

很多CSS3技術(shù)透過提供相同的視覺效果而成為圖片的“替代品”，換句話說，在進(jìn)行網(wǎng)頁開發(fā)時，減少多餘的標(biāo)籤嵌套以及圖片的使用數(shù)量，意味著使用者要下載的內(nèi)容將會更少，頁面載入也會更快。

另外，更少的圖片、腳本和Flash檔案能夠減少使用者造訪Web網(wǎng)站時的HTTP請求數(shù)，這是提升頁面載入速度的最佳方法之一。而使用CSS3製作圖形化網(wǎng)站無需任何圖片，大幅減少了HTTP的請求數(shù)量，並且提升了頁面的載入速度。

例如CSS3的動畫效果，能夠減少對JavaScript和Flash檔案的HTTP請求，但可能會要求瀏覽器執(zhí)行很多的工作來完成這個動畫效果的渲染，這有可能導(dǎo)致瀏覽器響應(yīng)緩慢致使用戶流失。

因此，在使用一些複雜的特效時需要考慮清楚。其實很多CSS3技術(shù)能夠在任何情況下都大幅提升頁面的效能 。

CSS3將完全向後相容，所以沒有必要修改的設(shè)計來讓它們繼續(xù)運作。網(wǎng)頁瀏覽器也也將繼續(xù)支援CSS2。

本CSS3教程手冊涵蓋的內(nèi)容

本CSS3教程手冊涵蓋了所有CSS3新特性，包含瞭如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸層效果、使用@Font-Face實現(xiàn)定製字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄佈局、媒體查詢等新功能的介紹及運行實例。

提示：本教學(xué)的每一章都包含了許多CSS3實例，您可以直接點擊?"運行實例"?按鈕在線查看運行結(jié)果。這些例子將幫助您更好地理解和使用CSS3新特性。

其它CSS3相關(guān)學(xué)習(xí)參考資源

除了本頁右邊的知識拓展，也為大家精選了以下資源

####################################### #####CSS每日程式設(shè)計小知識##################常用的CSS命名規(guī)格大總結(jié)，非常實用（收藏）######### ##########前端學(xué)習(xí)路線：如何成為優(yōu)秀的前端開發(fā)人員！ ################

最新章節(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