本文摘選自《Dreamweaver MX 2004 從基礎(chǔ)到實(shí)踐》
Cascading Style Sheets(簡稱CSS),翻譯為“層疊樣式單”或“級聯(lián)樣式單”,又簡稱“樣式表”。
CSS的引入是用來擴(kuò)展HTML的,而不是用來替代HTML的。也就是說CSS離不開HTML,它只是一項(xiàng)輔助工具,是對HTML功能的一種補(bǔ)充。
CSS的優(yōu)勢
在CSS標(biāo)準(zhǔn)里,不僅重新定義了HTML原有的樣式,如文字的大小、顏色等;更加入了重疊文字、區(qū)塊變化及任意位置放置等多項(xiàng)新屬性。通過CSS可以使用更豐富、更靈活的樣式,更簡單地設(shè)計(jì)出更美觀的網(wǎng)頁。同時(shí),也讓網(wǎng)頁的設(shè)計(jì)與維護(hù)更有效率。
減少圖像文件的使用:很多網(wǎng)頁為求設(shè)計(jì)效果,而大量使用圖像,以致網(wǎng)頁的下載速度變慢。CSS提供了很多文字樣式的設(shè)定,且再加上IE內(nèi)建的濾鏡特效,因此可輕松取代原來圖像才能表現(xiàn)的視覺效果。這樣的設(shè)計(jì)方式讓修改網(wǎng)頁內(nèi)容變得更方便,也大大提高了下載速度;
集中管理樣式信息:CSS的基本概念在于可將網(wǎng)頁要展示的內(nèi)容與其表現(xiàn)的樣式設(shè)定分開,也就是將網(wǎng)頁的外觀設(shè)定信息從網(wǎng)頁的內(nèi)容中獨(dú)立出來,并集中管理。這樣,當(dāng)要改變網(wǎng)頁外觀時(shí),只需更改樣式設(shè)定的部分,HTML文件本身并不需要任何的更改;
共享樣式設(shè)定:網(wǎng)頁的樣式設(shè)定和內(nèi)容分離的好處,除了可集中管理外,如果進(jìn)一步將CSS樣式的信息存儲(chǔ)成獨(dú)立的文件,還可讓多個(gè)網(wǎng)頁文件共同使用它。這樣,可省卻在每一個(gè)網(wǎng)頁文件中都要重復(fù)設(shè)定樣式的麻煩;
將樣式分類使用:相對于多份HTML文件可套用同一個(gè)CSS樣式文件,也可以在一份HTML網(wǎng)頁文件上套用多個(gè)CSS樣式文件。
CSS的規(guī)則
CSS的樣式規(guī)則由兩部分組成:選擇器和聲明。
選擇器就是樣式的名稱,包括自定義的類,HTML標(biāo)簽和CSS選擇器樣式。比如“.mycss”為自定義的類,“td”為標(biāo)準(zhǔn)HTML標(biāo)簽,而“a:link”則是CSS選擇器樣式;
聲明則是用于定義樣式元素的。聲明由分兩部分:屬性(如font-size)和值(如12px)。對于一個(gè)選擇器而言,可以有多個(gè)聲明。比如一個(gè)聲明是表示顏色,一個(gè)聲明是表示大小等。
以下為CSS樣式的代碼片段:
td { font-size: 12px; color: #666666; } .cnbruce { background-color: #000033; } |
| a { color: #3366CC; } td a{ color: #FF0000; } |