用CSS制作美觀的標題文字效果

　　用CSS制作美觀的標題文字效果

　　聞立鷗

　�。ū本┴斮Q(mào)職業(yè)學(xué)院，北京101101）

　　摘要：現(xiàn)在CSS3和HTML5已經(jīng)開始流行，很多網(wǎng)頁視覺效果是可以使用CSS來完成的，本文通過案例系統(tǒng)闡述如何用CSS來制作美化網(wǎng)頁的標題文字。

　　關(guān)鍵詞：CSS；標題；效果

　　一、什么是CSS

　　CSS意為層疊樣式表�！皹邮健本褪歉袷�，是個中元素在網(wǎng)頁中呈現(xiàn)的形態(tài)，如文本的大小及顏色、圖片大小即位置等。而“層疊”就是在網(wǎng)頁中如果同時定義了幾個樣式，而這幾個樣式如果互相沖突時，將會按照樣式表文件的先后順序進行應(yīng)用。CSS具有對網(wǎng)頁的布局、顏色、背景、寬度、高度、字體進行控制，讓網(wǎng)頁按您的美工設(shè)計布局的更加美觀漂亮。CSS是一種比較先進的網(wǎng)頁控制技術(shù)，使用它可以非常精確地控制網(wǎng)頁對象的格式，如果網(wǎng)頁中應(yīng)用了CSS技術(shù)，當修改CSS樣式時，網(wǎng)頁中所有應(yīng)用該樣式的文本會自動更新。樣式表信息包括在<style></style>標記中。如下圖：

　　二、用CSS實現(xiàn)標題文字效果

　　現(xiàn)在CSS3和HTML5已經(jīng)開始流行，很多網(wǎng)頁視覺效果是可以使用CSS來完成的，今天向大家展示一下如何用CSS來美化大標題文字，如下圖效果，只要熟練掌握CSS代碼并靈活應(yīng)用，只需要簡單幾步就可以制作出來，比起用PS來制作要簡單很多。下面一起看看如何用CSS代碼來實現(xiàn)。

　　CSS實現(xiàn)3D感文字標題，效果如下圖：

　　通過以上實例，我們可以看到，應(yīng)用CSS樣式可以很輕松的制作網(wǎng)頁特效文字，而且稍作代碼的更改就可以迅速改變文字的顯示效果。但是，通過實踐要注意的是，首先，如果對網(wǎng)頁文字使用CSS濾鏡的樣式，一定要先把文字放在表格里，然后對該表格去應(yīng)用CSS樣式文件。尤其是在做網(wǎng)頁遮罩文字效果時。實踐證明，應(yīng)對該文字所在的單元格去應(yīng)用CSS樣式才有效，而不是按常規(guī)對表格應(yīng)用了。其次，要注意瀏覽器對CSS濾鏡的兼容性，要適當靈活地調(diào)整相應(yīng)的代碼，以適應(yīng)不同的瀏覽器。

　　三、結(jié)語

　　當前使用內(nèi)容與表現(xiàn)相分離的技術(shù)制作網(wǎng)頁已是必然趨勢，其中內(nèi)容指HTML頁面代碼，表現(xiàn)就是CSS代碼了，網(wǎng)頁的文字、圖片、顏色、布局等都由CSS控制。如果把網(wǎng)頁看成具有漂亮包裝的物品的話，物品就是HTML、是內(nèi)容，而包裝就是CSS、是表現(xiàn)，不同的包裝體現(xiàn)物品的不同風格特點；不同的CSS就可以實現(xiàn)不同的文字效果、圖片效果、版面編排效果，使頁面出現(xiàn)不同的風格，適用不同的網(wǎng)站。

　　參考文獻：

　　[1]曾靜娜。新手學(xué)CSS+DIV[M].北京希望電子出版社，2010.[2]金峰。變幻之美CSS+DIV網(wǎng)頁布局揭秘[M].北京：人民郵電出版社，2009.

　　[3]聞立鷗。CSS+DIV布局與表格布局網(wǎng)頁的對比[J].教育教學(xué)論壇，2014，（9 ）。

　　[4]聞立鷗。DIV+CSS之布局一行三列頁面實證分析[J].教育教學(xué)論壇，2014，（8 ）。

　　[5]賈錚，等。HTML+CSS網(wǎng)頁布局開發(fā)指南[M].北京：清華大學(xué)出版社，2008.

　　[6]CSS：The Definitive Guide，3rd Edition，Eric Meyer，O&acute;Reilly，2006.

【用CSS制作美觀的標題文字效果】相關(guān)文章：

淺談信息標題的制作-范文08-17

PowerPoint制作有主題的標題幻燈片（教學(xué)設(shè)計）08-23

標題的修辭藝術(shù)08-17

小標題作文03-11

美術(shù)教案－美觀大方08-16

用word制作求職簡歷的技巧201608-15

以風箏為標題的作文08-15

語文 －插入藝術(shù)標題08-16

怎樣給文章擬標題08-17

女裝店標題語12-28