|
文章/编辑 相约爱晚亭
2011.01.15
我们在编辑图文并茂的音画网页时，为了美化和突出文章的标题或者是让文字从杂乱背景中突显出来，很多编辑者常会使用一些特效文字。对于不熟悉HTML代码的编辑者来说，通常都是利用一些网站上提供的各种特效文字样本，然后采用复制、粘贴、替换的方法来实现自己的意图。
我们编辑网页时用到的各种特效文字，实质上都是对文字应用了不同的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代码的记事本里；便于今后我们编辑网页时套用。
2、基本知识
CSS是Cascading Style Sheets（层叠样式表单）的简称，更多的人把CSS称作样式表，它是一种设计网页样式的工具。
CSS的代码都是由一些最基本的语句构成，它的基本语句的结构是由三部分组成：
选择符{属性：属性值}
3、实例代码剖析：
<CENTER> 设置 水平居中
div 是CSS语句中的选择符，在HTML中，编辑在<div>区域内的页面格式将以 <style>定义的格式显示；
style 是在HTML内部引用CSS的标识符，这是采用 < style=" " > 的格式把样式写在html中的任意行内，这样比较方便灵活；
FILTER 是滤镜属性名，shadow 是滤镜属性值，该属性值产生的是一种投影效果，其小括号内定义的是shadow属性值的一些参数；
color=#993399 color参数用来设置投影的颜色，#993399是颜色参数的属性值；
direction=135 direction 参数是用来设置投影的方向，其属性值取值范围为 0 — 360度。0度代表垂直向上，然后每45度一个单位；
strength=80 strength 参数是用来设置投影的长度，投影长度值用整数来设置。
LINE-HEIGHT: 100% 设置一段文字中每行文字的间距，100%为相对间距值（也可用正整数设置绝对间距值），行间距值通常可设为120%较适宜；本实例代码中设为100%，是为了方便我的试验和截图。
WIDTH: 50% 设置每行可容纳文字的最大宽度，50%为可显示文字的相对最大宽度值；50%表示一行文字宽度超过屏幕显示区域宽度的一半时，文字自动换行向下延伸；宽度值通常是设为100%，也可用正整数设置绝对宽度值。本实例代码中我设宽度值为50%，是基于我的显示器是宽屏，WIDTH设得小一些方便于我进行试验、截图与讲解。
FONT-SIZE: 70pt 设置文字的字体大小，70pt是文字字体大小属性的属性值，单位为pt(1pt=1/72英寸)或px(像素)
FONT 设置字体所有属性的标识符
FONT style 设置CSS字体样式的标识符
FONT-FAMILY: 隶书 设置使用什么类型的字体，其属性值为操作系统内所安装了的所有字体，这儿选择使用了隶书字体，若缺省FONT-FAMILY或者系统内没有安装隶书字体，则显示为默认的宋体；
COLOR: #ff00ff 设置文字自身的颜色，#ff00ff 是颜色属性的属性值
相约今天 被CSS投影滤镜所施加作用的对象（包括文字、图片、表格、边框，超链接……）
4、实例代码的应用方法
（1）点击 http://ny./editor.asp 打开HTML在线编辑器
（2）将CSS投影滤镜 实例代码 粘贴入HTML在线编辑器的源代码编辑框内
（3）将“相约今天”替换为自己的欲应用投影滤镜的文字或者是其他的对象，另外还可修改实例代码中的其他参数
（4）点击HTML在线编辑器状态栏上的“编辑”按钮，将代码编辑状态转换为普通编辑状态
（5）点击特效文字，被选中的对象边缘出现8个白色小方块，按组合键CTFL + C （复制）
（6）进入网站的普通编辑状态界面，在欲插入特效文字的位置处单击，出现一个闪烁的插入光标，按组合键CTRL+V （粘贴），特效文字被如意添加到指定的位置处
5、修改实例代码中各参数的试验结果：
6、为图片添加投影滤镜
|
<!--插入图片的代码：-->
<IMG border=0 src=" 图片网址 " width=600 height=450>
Shadow滤镜修饰图片的投影效果代码：
相约 |
7、添加滚动效果
|
<!--滚动效果的代码：-->
<marquee scrollAmount=2 width=500 behavior=alternate>来回滚动的文字</marquee>
各参数详解：
a)scrollAmount属性表示速度，属性值为数字；取值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height属性表示滚动区域的大小，width是宽度，height是高度，属性值为像素数（数字）。特别是在做垂直滚动的时候，一定要设height的值。
c)direction属性表示文字滚动的方向，缺省默认为从右向左滚动；可选的属性值有left(从右向左滚动)、right(从左向右滚动)、down(从上向下滚动)、up(从下向上滚动)。
d)scrollDelay属性也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior属性是用来控制文字的滚动方式，缺省时默认为循环滚动，可选的值有scroll(循环滚动，一圈一圈绕着走)、alternate(在滚动区域内来回游动)、side(只走一次)
综合效果代码：
|
| 
