首頁 web前端 前端問答 css3什麼時間推出的

css3什麼時間推出的

Jul 14, 2021 pm 05:23 PM
css3

CSS3於1999年開始訂訂,2001年5月23日W3C完成了CSS3的工作草案,草案中製定了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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法:1、使用「:active」選擇器選取滑鼠點擊圖片的狀態;2、使用transform屬性和scale()函數實現圖片放大效果,語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播?大家第一想到的是利用js,其實利用純CSS也能實現文字輪播與圖片輪播,下面來看看實作方法,希望對大家有幫助!

css3怎麼設定動畫旋轉速度 css3怎麼設定動畫旋轉速度 Apr 28, 2022 pm 04:32 PM

在css3中,可以利用「animation-timing-function」屬性來設定動畫旋轉速度,該屬性用於指定動畫將如何完成一個週期,設定動畫的速度曲線,語法為「元素{animation-timing-function:速度屬性值;}」。

css3動畫效果有變形嗎 css3動畫效果有變形嗎 Apr 28, 2022 pm 02:20 PM

css3中的動畫效果有變形;可以利用「animation:動畫屬性@keyframes ..{..{transform:變形屬性}}」實現變形動畫效果,animation屬性用於設定動畫樣式,transform屬性用於設定變形樣式。

See all articles