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