文章/編輯 相約愛(ài)晚亭
2011.01.15
我們?cè)诰庉媹D文并茂的音畫(huà)網(wǎng)頁(yè)時(shí)，為了美化和突出文章的標(biāo)題或者是讓文字從雜亂背景中突顯出來(lái)，很多編輯者常會(huì)使用一些特效文字。對(duì)于不熟悉HTML代碼的編輯者來(lái)說(shuō)，通常都是利用一些網(wǎng)站上提供的各種特效文字樣本，然后采用復(fù)制、粘貼、替換的方法來(lái)實(shí)現(xiàn)自己的意圖。
我們編輯網(wǎng)頁(yè)時(shí)用到的各種特效文字，實(shí)質(zhì)上都是對(duì)文字應(yīng)用了不同的CSS濾鏡后所得到的多媒體效果。下面，我們通過(guò)剖析一個(gè)CSS投影濾鏡的代碼，來(lái)達(dá)到理解、掌握、靈活運(yùn)用CSS濾鏡的目的。
1、CSS投影濾鏡 實(shí)例代碼（本文中為敘述簡(jiǎn)便，簡(jiǎn)稱為“實(shí)例代碼”）：
<CENTER>
<div style="FILTER: shadow(color=#993399,direction=135,strength=80); LINE-HEIGHT: 100%; WIDTH: 50%; FONT-SIZE: 70pt"><FONT style="FONT-FAMILY: 隸書(shū); COLOR: #ff00ff">相約今天</FONT></div></CENTER>
建議：將上面這組HTML實(shí)例代碼，保存在一個(gè)專門(mén)收藏HTML代碼的記事本里；便于今后我們編輯網(wǎng)頁(yè)時(shí)套用。
2、基本知識(shí)
CSS是Cascading Style Sheets（層疊樣式表單）的簡(jiǎn)稱，更多的人把CSS稱作樣式表，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。
CSS的代碼都是由一些最基本的語(yǔ)句構(gòu)成，它的基本語(yǔ)句的結(jié)構(gòu)是由三部分組成：
選擇符{屬性：屬性值}
3、實(shí)例代碼剖析：
<CENTER> 設(shè)置 水平居中
div 是CSS語(yǔ)句中的選擇符，在HTML中，編輯在<div>區(qū)域內(nèi)的頁(yè)面格式將以 <style>定義的格式顯示；
style 是在HTML內(nèi)部引用CSS的標(biāo)識(shí)符，這是采用 < style=" " > 的格式把樣式寫(xiě)在html中的任意行內(nèi)，這樣比較方便靈活；
FILTER 是濾鏡屬性名，shadow 是濾鏡屬性值，該屬性值產(chǎn)生的是一種投影效果，其小括號(hào)內(nèi)定義的是shadow屬性值的一些參數(shù)；
color=#993399 color參數(shù)用來(lái)設(shè)置投影的顏色，#993399是顏色參數(shù)的屬性值；
direction=135 direction 參數(shù)是用來(lái)設(shè)置投影的方向，其屬性值取值范圍為 0 —360度。0度代表垂直向上，然后每45度一個(gè)單位；
strength=80 strength 參數(shù)是用來(lái)設(shè)置投影的長(zhǎng)度，投影長(zhǎng)度值用整數(shù)來(lái)設(shè)置。
LINE-HEIGHT: 100% 設(shè)置一段文字中每行文字的間距，100%為相對(duì)間距值（也可用正整數(shù)設(shè)置絕對(duì)間距值），行間距值通?？稍O(shè)為120%較適宜；本實(shí)例代碼中設(shè)為100%，是為了方便我的試驗(yàn)和截圖。
WIDTH: 50% 設(shè)置每行可容納文字的最大寬度，50%為可顯示文字的相對(duì)最大寬度值；50%表示一行文字寬度超過(guò)屏幕顯示區(qū)域?qū)挾鹊囊话霑r(shí)，文字自動(dòng)換行向下延伸；寬度值通常是設(shè)為100%，也可用正整數(shù)設(shè)置絕對(duì)寬度值。本實(shí)例代碼中我設(shè)寬度值為50%，是基于我的顯示器是寬屏，WIDTH設(shè)得小一些方便于我進(jìn)行試驗(yàn)、截圖與講解。
FONT-SIZE: 70pt 設(shè)置文字的字體大小，70pt是文字字體大小屬性的屬性值，單位為pt(1pt=1/72英寸)或px(像素)
FONT 設(shè)置字體所有屬性的標(biāo)識(shí)符
FONT style 設(shè)置CSS字體樣式的標(biāo)識(shí)符
FONT-FAMILY: 隸書(shū) 設(shè)置使用什么類型的字體，其屬性值為操作系統(tǒng)內(nèi)所安裝了的所有字體，這兒選擇使用了隸書(shū)字體，若缺省FONT-FAMILY或者系統(tǒng)內(nèi)沒(méi)有安裝隸書(shū)字體，則顯示為默認(rèn)的宋體；
COLOR: #ff00ff 設(shè)置文字自身的顏色，#ff00ff 是顏色屬性的屬性值
相約今天 被CSS投影濾鏡所施加作用的對(duì)象（包括文字、圖片、表格、邊框，超鏈接……）
4、實(shí)例代碼的應(yīng)用方法
（1）點(diǎn)擊
http://ny.xmu.edu.cn/editor.asp 打開(kāi)HTML在線編輯器
（2）將CSS投影濾鏡 實(shí)例代碼 粘貼入HTML在線編輯器的源代碼編輯框內(nèi)
（3）將“相約今天”替換為自己的欲應(yīng)用投影濾鏡的文字或者是其他的對(duì)象，另外還可修改實(shí)例代碼中的其他參數(shù)
（4）點(diǎn)擊HTML在線編輯器狀態(tài)欄上的“編輯”按鈕，將代碼編輯狀態(tài)轉(zhuǎn)換為普通編輯狀態(tài)
（5）點(diǎn)擊特效文字，被選中的對(duì)象邊緣出現(xiàn)8個(gè)白色小方塊，按組合鍵CTFL + C （復(fù)制）
（6）進(jìn)入網(wǎng)站的普通編輯狀態(tài)界面，在欲插入特效文字的位置處單擊，出現(xiàn)一個(gè)閃爍的插入光標(biāo)，按組合鍵CTRL+V （粘貼），特效文字被如意添加到指定的位置處
5、修改實(shí)例代碼中各參數(shù)的試驗(yàn)結(jié)果：
6、為圖片添加投影濾鏡
<!--插入圖片的代碼：-->
<IMG border=0 src=" 圖片網(wǎng)址 " width=600 height=450>
Shadow濾鏡修飾圖片的投影效果代碼：
相約
7、添加滾動(dòng)效果
<!--滾動(dòng)效果的代碼：-->
<marquee scrollAmount=2 width=500 behavior=alternate>來(lái)回滾動(dòng)的文字</marquee>
各參數(shù)詳解：
?，)scrollAmount屬性表示速度，屬性值為數(shù)字；取值越大速度越快。如果沒(méi)有它，默認(rèn)為6，建議設(shè)為1～3比較好。
b)width和height屬性表示滾動(dòng)區(qū)域的大小，width是寬度，height是高度，屬性值為像素?cái)?shù)（數(shù)字）。特別是在做垂直滾動(dòng)的時(shí)候，一定要設(shè)height的值。
?，)direction屬性表示文字滾動(dòng)的方向，缺省默認(rèn)為從右向左滾動(dòng)；可選的屬性值有l(wèi)eft(從右向左滾動(dòng))、right(從左向右滾動(dòng))、down(從上向下滾動(dòng))、up(從下向上滾動(dòng))。
?，)scrollDelay屬性也是用來(lái)控制速度的，默認(rèn)為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
?，)behavior屬性是用來(lái)控制文字的滾動(dòng)方式，缺省時(shí)默認(rèn)為循環(huán)滾動(dòng)，可選的值有scroll(循環(huán)滾動(dòng)，一圈一圈繞著走)、alternate(在滾動(dòng)區(qū)域內(nèi)來(lái)回游動(dòng))、side(只走一次)
綜合效果代碼：
相約
