CSS中的id和class,完全可以说是C++语言中的类在网页上的再现。 id部分是必须写在HTML头文件中的< STYLE>说明中的,一般就是把一段css代码用一个代号来表示,称为id说明部分。而在引用时就在对象后面加class=id号,来使用这些属性。浏览器会选择那些引用id的对象具有的属性来对其进行定义,从而可以缩短你的开发时间。而且代码也更易读一些。而相应的,class也有两种,一种是相关式的,可以给页面内的某一种tag使用;而另一种就是独立式的,即你定义的class可以给页面内的任意一个或多个tag使用。 比如下面这一段,将其设定一个id:text1。 .text1{ text-align: left; font-size: 15pt; font-family: 隶书,宋体; letter-spacing: 3px color: navy; line-height: 12pt; text-indent: .5in; border: solid 1pt; }
然后你在后文中引用: < P CLASS="text1">你好,这另一个例子。< /P>
1.阴影过滤器
这个东西的好处真是不得了,用文本实现图形的功能,怎能不诱人?不过由它处理而成的给对象制造的阴影,却并不是那么准确和形象。不过考虑到它超出一筹的“性价比”,还是值得考虑的。
具体的用法就是,在css描述符号({})内,加入阴影过滤器名和它该有的值。格式如下: {FILTER:DropShadow(Color=color,OffX=offx,OffY=offy,Positive=positive) 其中参数的含义为: color 颜色 Direction 阴影方向。方向角度的表示是从垂直方向开始,按顺时针方向,以45度为单位逐渐递增,缺省为225度。 参数描述: Color 十六进制RGB色彩值 OffX 可视化对象沿X轴的阴影偏移量,正值为右,负值为左 OffY 可视化对象沿Y轴的阴影偏移量,正值为下,负值为上 Positive 布尔值。缺省为非零值,表示用不透明像素创建阴影;假值(零值)使用透明像素创建阴影。
2.α-过滤器
这就是透明度的意思,用过photoshop的人恐怕对这个概念对最有感觉。而借助于css-p(定位css)中的“层”的帮助,就可以做出各种溶入效果;倘若利用javascript页面脚本语言,对滤镜的参数进行处理,就可以做出淡入淡出的效果来,这一点留给大家去思考吧。
α-过滤器的所有可选项: {FILTER:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style, StartX=startx,StartY=starty,FinishX=finishx,FinishY=finishy)} 稍微为大家解释一下参数的含义: Opacity:起始透明度; FinishOpacity:终止透明度; Style:风格; Startx,starty,finishx,finishy:作用域。
第一个是一个阴影的例子。 < html> < head> < title>Untitled Document< /title> < meta http-equiv="Content-Type" content="text/html; charset=gb2312"> < style type="text/css"> < !-- .text1 { position:relative;width:600;filter:shadow(color=blue,direction=135); color:#66ccff;font-size:48pt; font-family:"方正彩云繁体"} --> < /style> < /head>
< body bgcolor="#FFFFFF"> < div class="text1" align="center"> < p>CSS循序渐进< /p> < /div> < /body> < /html>
将中间的style改一下, .text1 { position:relative;width:600;filter:alpha(opacity=50,finish=100,startx=0,sta rty=0,finishx=200,finishy=200); color:#66ccff;font-size:48pt; font-family:"方正 彩云繁体"}
----------------------------------------
|