- 相關(guān)推薦
用CSS制作美觀的標(biāo)題文字效果
用CSS制作美觀的標(biāo)題文字效果
聞立鷗
。ū本┴(cái)貿(mào)職業(yè)學(xué)院,北京101101)
摘要:現(xiàn)在CSS3和HTML5已經(jīng)開始流行,很多網(wǎng)頁(yè)視覺(jué)效果是可以使用CSS來(lái)完成的,本文通過(guò)案例系統(tǒng)闡述如何用CSS來(lái)制作美化網(wǎng)頁(yè)的標(biāo)題文字。
關(guān)鍵詞:CSS;標(biāo)題;效果
一、什么是CSS
CSS意為層疊樣式表!皹邮健本褪歉袷剑莻(gè)中元素在網(wǎng)頁(yè)中呈現(xiàn)的形態(tài),如文本的大小及顏色、圖片大小即位置等。而“層疊”就是在網(wǎng)頁(yè)中如果同時(shí)定義了幾個(gè)樣式,而這幾個(gè)樣式如果互相沖突時(shí),將會(huì)按照樣式表文件的先后順序進(jìn)行應(yīng)用。CSS具有對(duì)網(wǎng)頁(yè)的布局、顏色、背景、寬度、高度、字體進(jìn)行控制,讓網(wǎng)頁(yè)按您的美工設(shè)計(jì)布局的更加美觀漂亮。CSS是一種比較先進(jìn)的網(wǎng)頁(yè)控制技術(shù),使用它可以非常精確地控制網(wǎng)頁(yè)對(duì)象的格式,如果網(wǎng)頁(yè)中應(yīng)用了CSS技術(shù),當(dāng)修改CSS樣式時(shí),網(wǎng)頁(yè)中所有應(yīng)用該樣式的文本會(huì)自動(dòng)更新。樣式表信息包括在<style></style>標(biāo)記中。如下圖:
二、用CSS實(shí)現(xiàn)標(biāo)題文字效果
現(xiàn)在CSS3和HTML5已經(jīng)開始流行,很多網(wǎng)頁(yè)視覺(jué)效果是可以使用CSS來(lái)完成的,今天向大家展示一下如何用CSS來(lái)美化大標(biāo)題文字,如下圖效果,只要熟練掌握CSS代碼并靈活應(yīng)用,只需要簡(jiǎn)單幾步就可以制作出來(lái),比起用PS來(lái)制作要簡(jiǎn)單很多。下面一起看看如何用CSS代碼來(lái)實(shí)現(xiàn)。
CSS實(shí)現(xiàn)3D感文字標(biāo)題,效果如下圖:
通過(guò)以上實(shí)例,我們可以看到,應(yīng)用CSS樣式可以很輕松的制作網(wǎng)頁(yè)特效文字,而且稍作代碼的更改就可以迅速改變文字的顯示效果。但是,通過(guò)實(shí)踐要注意的是,首先,如果對(duì)網(wǎng)頁(yè)文字使用CSS濾鏡的樣式,一定要先把文字放在表格里,然后對(duì)該表格去應(yīng)用CSS樣式文件。尤其是在做網(wǎng)頁(yè)遮罩文字效果時(shí)。實(shí)踐證明,應(yīng)對(duì)該文字所在的單元格去應(yīng)用CSS樣式才有效,而不是按常規(guī)對(duì)表格應(yīng)用了。其次,要注意瀏覽器對(duì)CSS濾鏡的兼容性,要適當(dāng)靈活地調(diào)整相應(yīng)的代碼,以適應(yīng)不同的瀏覽器。
三、結(jié)語(yǔ)
當(dāng)前使用內(nèi)容與表現(xiàn)相分離的技術(shù)制作網(wǎng)頁(yè)已是必然趨勢(shì),其中內(nèi)容指HTML頁(yè)面代碼,表現(xiàn)就是CSS代碼了,網(wǎng)頁(yè)的文字、圖片、顏色、布局等都由CSS控制。如果把網(wǎng)頁(yè)看成具有漂亮包裝的物品的話,物品就是HTML、是內(nèi)容,而包裝就是CSS、是表現(xiàn),不同的包裝體現(xiàn)物品的不同風(fēng)格特點(diǎn);不同的CSS就可以實(shí)現(xiàn)不同的文字效果、圖片效果、版面編排效果,使頁(yè)面出現(xiàn)不同的風(fēng)格,適用不同的網(wǎng)站。
參考文獻(xiàn):
[1]曾靜娜。新手學(xué)CSS+DIV[M].北京希望電子出版社,2010.[2]金峰。變幻之美CSS+DIV網(wǎng)頁(yè)布局揭秘[M].北京:人民郵電出版社,2009.
[3]聞立鷗。CSS+DIV布局與表格布局網(wǎng)頁(yè)的對(duì)比[J].教育教學(xué)論壇,2014,(9 )。
[4]聞立鷗。DIV+CSS之布局一行三列頁(yè)面實(shí)證分析[J].教育教學(xué)論壇,2014,(8 )。
[5]賈錚,等。HTML+CSS網(wǎng)頁(yè)布局開發(fā)指南[M].北京:清華大學(xué)出版社,2008.
[6]CSS:The Definitive Guide,3rd Edition,Eric Meyer,O´Reilly,2006.
【用CSS制作美觀的標(biāo)題文字效果】相關(guān)文章:
淺談信息標(biāo)題的制作-范文08-17
PowerPoint制作有主題的標(biāo)題幻燈片(教學(xué)設(shè)計(jì))08-23
標(biāo)題的修辭藝術(shù)08-17
小標(biāo)題作文03-11
美術(shù)教案-美觀大方08-16
語(yǔ)文 -插入藝術(shù)標(biāo)題08-16
怎樣給文章擬標(biāo)題08-17
女裝店標(biāo)題語(yǔ)12-28