- 精通HTML5+CSS3+JavaScript網頁設計(視頻教學版)(第2版)
- 王英英
- 1536字
- 2019-12-09 14:23:59
6.1 CSS3介紹
使用CSS3最大的優勢是,在后期維護中如果需要修改一些外觀樣式,只需要修改相應的代碼即可。
6.1.1 CSS3功能
隨著Internet不斷發展,對頁面效果訴求越來越強烈,只依賴HTML這種結構化標記來實現樣式已經不能滿足網頁設計者的需要,其表現有以下幾個方面:
(1)維護困難。為了修改某個特殊標記格式,需要花費很多時間,尤其對整個網站而言,后期修改和維護成本較高。
(2)標記不足。HTML本身標記并不是很多,而且很多標記都是為網頁內容服務,關于內容樣式的標記(如文字間距、段落縮進)很難在HTML中找到。
(3)網頁過于臃腫。由于沒有統一對各種風格樣式進行控制,HTML頁面往往體積過大,占掉很多寶貴的寬度。
(4)定位困難。在整體布局頁面時,HTML對于各個模塊的位置調整顯得捉襟見肘,過多的<table>標記將會導致頁面的復雜和后期維護的困難。
在這種情況下,就需要尋找一種可以將結構化標記與豐富的頁面表現相結合的技術。CSS樣式技術恰恰迎合了這種需要。
CSS(Cascading Style Sheet)稱為層疊樣式表,也可以稱為CSS樣式表或樣式表,其文件擴展名為.css。CSS是用于增強或控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。
引用樣式表的目的是將“網頁結構代碼”和“網頁樣式風格代碼”分離開,從而使網頁設計者可以對網頁布局進行更多的控制。利用樣式表可以將整個站點上所有網頁都指向某個CSS文件,設計者只需要修改CSS文件中的某一行,整個網頁上對應的樣式會隨之發生改變。
6.1.2 CSS3發展歷史
萬維網聯盟(W3C)在1996年制定并發布了一個網頁排版樣式標準(層疊樣式表),用來對HTML有限的表現功能進行補充。
隨著CSS的廣泛應用,CSS技術越來越成熟。CSS現在有三個不同層次的標準:CSS1、CSS2和CSS3。
CSS1(CSS Level 1)是CSS的第一層次標準,正式發布于1996年12月17日,后來于1999年1月11日進行了修改。該標準提供簡單的樣式表機制,使網頁的設計者可以通過附屬樣式對HTML文檔的表現進行描述。
CSS2(CSS Level 2)于1998年5月12日被正式作為標準發布。CSS2標準是基于CSS1設計的,其包含了CSS1所有的功能,并擴充和改進了很多更加強大的屬性。CSS2支持多媒體樣式表,使得設計者可以根據不同的輸出設備給文檔制定不同的表現形式。
在2001年5月23日,W3C完成了CSS3的工作草案。該草案制訂了CSS3的發展路線圖,詳細列出了所有模塊,并計劃在未來進行逐步規范。
CSS1主要定義了網頁的基本屬性,如字體、顏色、空白邊等。CSS2在此基礎上添加了一些高級功能(如浮動和定位),以及一些高級的選擇器(如子選擇器、相鄰選擇器和通用選擇器等)。CSS3開始遵循模塊化開發,標準被分為若干個相互獨立的模塊,這將有助于理清模塊化規范之間的關系,減小完整文件的體積。
6.1.3 瀏覽器與CSS3
CSS3制定完成之后具有了很多新功能(新樣式),但這些新樣式在瀏覽器中不能獲得完全支持,主要在于各個瀏覽器對CSS3很多細節處理上存在差異。例如,某個標記屬性在一種瀏覽器中支持而在另一種瀏覽器中不支持,或者兩者瀏覽器都支持但其顯示效果不一樣。
主流瀏覽器為了自己產品的利益和推廣,定義了很多私有屬性,用于加強頁面顯示樣式和效果,導致現在每個瀏覽器都存在大量的私有屬性。雖然使用私有屬性可以快速構建效果,但是對網頁設計者是一個大麻煩。設計一個頁面,就需要考慮在不同瀏覽器上的顯示效果,一個不注意就會導致同一個頁面在不同瀏覽器上顯示效果不一致,甚至有的瀏覽器不同版本之間也具有不同的屬性。
如果所有瀏覽器都支持CSS3樣式,那么網頁設計者只需使用一種統一標記即可在不同瀏覽器上實現一致的顯示效果。
當CSS3被所有瀏覽器接受和支持以后,整個網頁設計將會變得非常容易。CSS3標準使得布局更加合理,樣式更加美觀,整個Web頁面顯示將會煥然一新。雖然現在CSS3還沒有完全普及、各個瀏覽器對CSS3的支持還處于發展階段,但是CSS3具有很高的發展潛力,在樣式修飾方面是其他技術無法替代的。此時學習CSS3技術,才能保證技術不落伍。