本文摘選自《Dreamweaver MX 2004 從基礎到實踐》
Cascading Style Sheets(簡稱CSS),翻譯為“層疊樣式單”或“級聯樣式單”,又簡稱“樣式表”。
CSS的引入是用來擴展HTML的,而不是用來替代HTML的。也就是說CSS離不開HTML,它只是一項輔助工具,是對HTML功能的一種補充。
CSS的優勢
在CSS標準里,不僅重新定義了HTML原有的樣式,如文字的大小、顏色等;更加入了重疊文字、區塊變化及任意位置放置等多項新屬性。通過CSS可以使用更豐富、更靈活的樣式,更簡單地設計出更美觀的網頁。同時,也讓網頁的設計與維護更有效率。
減少圖像文件的使用:很多網頁為求設計效果,而大量使用圖像,以致網頁的下載速度變慢。CSS提供了很多文字樣式的設定,且再加上IE內建的濾鏡特效,因此可輕松取代原來圖像才能表現的視覺效果。這樣的設計方式讓修改網頁內容變得更方便,也大大提高了下載速度;
集中管理樣式信息:CSS的基本概念在于可將網頁要展示的內容與其表現的樣式設定分開,也就是將網頁的外觀設定信息從網頁的內容中獨立出來,并集中管理。這樣,當要改變網頁外觀時,只需更改樣式設定的部分,HTML文件本身并不需要任何的更改;
共享樣式設定:網頁的樣式設定和內容分離的好處,除了可集中管理外,如果進一步將CSS樣式的信息存儲成獨立的文件,還可讓多個網頁文件共同使用它。這樣,可省卻在每一個網頁文件中都要重復設定樣式的麻煩;
將樣式分類使用:相對于多份HTML文件可套用同一個CSS樣式文件,也可以在一份HTML網頁文件上套用多個CSS樣式文件。
CSS的規則
CSS的樣式規則由兩部分組成:選擇器和聲明。
選擇器就是樣式的名稱,包括自定義的類,HTML標簽和CSS選擇器樣式。比如“.mycss”為自定義的類,“td”為標準HTML標簽,而“a:link”則是CSS選擇器樣式;
聲明則是用于定義樣式元素的。聲明由分兩部分:屬性(如font-size)和值(如12px)。對于一個選擇器而言,可以有多個聲明。比如一個聲明是表示顏色,一個聲明是表示大小等。
以下為CSS樣式的代碼片段:
td { font-size: 12px; color: #666666; } .cnbruce { background-color: #000033; } |
a { color: #3366CC; } td a{ color: #FF0000; } |
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15