CSS3於1999年開始訂訂,2001年5月23日W3C完成了CSS3的工作草案,草案中製定了CSS3發展路線圖,詳細列出了所有模組,併計劃在未來將逐步進行規格;主要包括盒子模型、列表模組、超連結方式、語言模組、背景和邊框、文字特效等模組。
本教學操作環境:windows7系統、CSS3版、Dell G3電腦。
CSS3是CSS(層疊樣式表)技術的升級版本,於1999年開始訂訂,2001年5月23日W3C完成了CSS3的工作草案;在該草案中製定了CSS3 發展路線圖,路線圖詳細列出了所有模組,並計劃在未來將逐步進行規範。
CSS3規範的一個新特點是被分成若干個相互獨立的模組。一方面分成若干較小的模組較利於規範及時更新和發布,及時調整模組的內容,這些模組獨立實現和發布,也為日後CSS的擴展奠定了基礎。另外一方面,由於受支援設備和瀏覽器廠商的限制,設備或廠商可以有選擇的支援一部分模組,支援CSS3的一個子集,這樣有利於CSS3的推廣。
下面簡單地說明一下各個主要模組的發佈時間和內容:
#2002 年5 月15 日發布了CSS3 Line 模組,該模組規範了文字行模型。
2002 年 11 月 7 日發布了 CSS3 Lists 模組,該模組規範了清單樣式。
2002 年 11 月 7 日也發布了 CSS3 Border 模組,新加入了背景邊框功能。該模組後來被合併到了背景模組中。
2003 年 5 月 14 日發布了 CSS3 Generated and Replaced Content 模組,定義了 CSS3 的產生及更換內容功能。
2003 年 8 月 13 日發布了 CSS3 Presentation Levels 模組,定義了示範效果功能。
2003 年 8 月 13 日也發布了 CSS3 Syntax 模組,該模組重新的定義了 CSS 語法基礎。
2004 年 2 月 24 日發布了 CSS3 Hyperlink Presentation 模組,重新定義了超連結表示規則。
2004 年 12 月 16 日發布了 CSS3 Speech 模組,該模組重新定義了語音「樣式」規則。
2005 年 12 月 15 日發布了 CSS3 Cascading and Inheritance 模組,定義了 CSS 層疊和繼承規則。
2007 年 8 月 9 日發布了 CSS3 Basic Box 模組,該模組重新定義了 CSS 基本盒子模型規則。
2007 年 9 月 5 日發布了 CSS3 Grid Positioning 模組,定義了 CSS 網格定位規則。
2009 年 3 月 20 日發布了 CSS3 Animations 模組,定義了 CSS 動畫模型。
2009 年 3 月 20 日也發布了 CSS3 3D Transforms 模組,定義了 CSS 3D 轉換模型。
2009 年 6 月 18 日發布了 CSS3 Fonts 模組,定義了 CSS 字體模式。
2009 年 7 月 23 日發布了 CSS3 Image Values 模組,定義了圖片內容顯示模型。
2009 年 7 月 23 日也發布了 CSS3 Flexible Box Layout 模組,定義了靈活的框架佈局模型。
2009 年 12 月 1 日發布了 CSS3 2D Transforms 模組,定義了 2D 轉換模型。
2010 年 4 月 29 日發布了 CSS3 Generated Conten for Paged Media 模組,定義了分頁媒體內容模型。
2010 年 10 月 5 日發布了 CSS3 Text 模組,定義了文字模型。
2010 年 10 月 5 日也發布了 CSS3 Background and Borders 模組,重新修補了邊框和背景模型。
更詳細的資訊可以參考 https://www.w3c.org/Style/CSS/current-work.html,其中介紹了CSS3 具體劃分了多少個模組、CSS3所有模組目前所處的狀態,以及將在什麼時候發布等。
CSS3 被分割了多個模組,每個模組都有自己的規範,這樣做的好處是:
整個CSS3 的規範發布不會因為部分存在爭論而影響其他模組的推進。
對於瀏覽器來說,可以根據需要,決定哪些 CSS 功能被支援。
對於W3C 制定者而言,可以根據需要進行針對性的更新,從而使一個整體的規範更加靈活,並能夠及時修訂,這樣更容易擴展新的技術特定。
使用 CSS3 有什麼好處呢?
最明顯的就是 CSS3 能讓頁面看起來非常酷炫、非常酷,讓網站設計錦上添花,但它的好處遠遠不止這些。
在大多數情況下,使用 CSS3 不僅有利於開發與維護,還能提升網站的效能。同時,還能增加網站的可近性、可用性,讓網站能適應更多的設備,甚至可以優化網站 SEO,提高網站的搜尋排名結果。
1、減少開發和維護成本
為什麼說 CSS3 能減少開發與維護的成本呢?
先來看一個實例。一個圓角效果,在 CSS2 中需要添加額外的 HTML 標籤,要使用一個或更多圖片來完成;而使用 CSS3 只需要一個標籤、一個 border-radius 屬性就能完成。這樣,CSS3 技術能把人們從繪圖、切圖和優化圖片的工作中解救出來。
如果後續需要調整這個圓角的弧度或圓角的顏色,若使用 CSS2,要從頭繪圖、切圖才能完成,而使用 CSS3 幾秒鐘就能完成這些工作。
CSS3 也能讓我們遠離一大堆的 JavaScript 腳本程式碼或 Flash,我們不再需要花大把時間去寫腳本或尋找合適的腳本外掛程式並修改以適配網站特效。
最後,有些 CSS3 技術還能幫助簡化頁面,讓結構更清晰。例如為達到一個效果而嵌套許多 div 標籤和類別名,這樣能有效地提高工作效率、減少開發時間、降低開發成本。例如,製作一個重疊的背景效果,在CSS 中需要添加div 標籤和類別名,在不同的div 中放一張背景圖,現在可以使用CSS3 的多背景和背景尺寸等新特性,在一個div 標籤就能完成這些工作。
2、提高頁面效能
在進行Web 開發時,減少多餘的標籤巢狀和圖片的使用數量,意味著使用者要下載的內容將會更少,頁面載入也會更快。另外,更少的圖片、腳本和 Flash 檔案讓 Web 網站減少 HTTP 請求數,這是提升頁面載入速度的最佳方法之一。
而使用 CSS3 製作圖形化網站無須任何圖片,能大幅減少 HTTP 的請求數量,並且提升頁面的載入速度。
當然,這取決於釆用 CSS3 特性來取代什麼技術,同樣也要看如何使用 CSS3 特性。例如,CSS3 的動畫效果,能夠減少對 JavaScript 和 Flash 檔案的 HTTP 請求,但可能會要求瀏覽器執行很多的工作來完成這個動畫效果的渲染,這有可能導致瀏覽器響應緩慢,導致用戶流失。
因此,在使用一些複雜的特效時,大家需要考慮清楚。不過這樣的現象畢竟很少。
(學習影片分享:css影片教學)
以上是css3什麼時間推出的的詳細內容。更多資訊請關注PHP中文網其他相關文章!