CSS 循序渐进画个瓢
| 首 页 | 网页素材 | 网页特效 | 网页教程 | flash教程 | 3dmax教程 | ASP教程 | 常用范文 | 应用公文 |
教 程 | 频道首页 | flash教程 | 3dmax教程 | photoshop教程 | html/css | asp教程 | php教程 | fireworks教程 | dreamweaver教程|
资 料 | java教程 | 网页模版 | 搜索引擎 | 电脑技术 | 网络应用 | 操作系统 | 饮食文化 | 应用公文 | 贺词致辞 | 个人求职 |
频 道 | 明星资料 | 民俗风情 | 传统节日 | 人物传记 | 历史资料 | 常用范文 | 名胜古迹 | 体育资料 | 教育资料 | 综合资料 |
你的位置:首页 > 资料教程 > 正文 > CSS 循序渐进画个瓢
CSS 循序渐进画个瓢

http://www.sucai123.com 资料教程 2004-10-5 23:16:29

      说到语法,似乎只有那些高深的程序语言才有,CSS也有吗?答案是肯定的,只不过没有其它语言那么复杂罢了。特别是它的id和class,完全可以说是C++语言中的类在网页上的再现。

   它一般怎么使用呢?首先id部分是必须写在HTML头文件中的< STYLE>说明中的,一般就是把一段css代码用一个代号来表示,称为id说明部分。而在引用时就在对象后面加class=id号,来使用这些属性。浏览器会选择那些引用id的对象具有的属性来对其进行定义,从而可以缩短你的开发时间。而且代码也更易读一些。而相应的,class也有两种,一种是相关式的,可以给页面内的某一种tag使用;而另一种就是独立式的,即你定义的class可以给页面内的任意一个或多个tag使用。

   笔者还是拿一些例子来向大家说明吧。大家不妨看看前文的几个例子,倘若我把它们合成一个,利用id将其表示出来,然后再在后面引用,效果将是一样的。

   比如下面这一段,在第二章中曾经使用过的css.将其设定一个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>

   同样可以得到与第二章例子相同的效果。当然这个class可以多次使用,也可以给多个tag使用。比如< table>,< td>,< form>等等。

   另一方面我想跟大家谈谈dhtml中扩充的一些css。比如说现在很多地方都在使用的滤镜(filter)功能。所谓滤镜,并不是对图像进行了什么处理,而是在浏览器中对使用了该属性的对象进行一定的修饰。现在能使用的滤镜有16个之多,这里并非一篇介绍DHTML的文章,所以笔者也不便赘述。不过可以就其中几个相当重要好用的给大家讲一讲。

   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"> <

此新闻共有21 2


-来源:互联网 关闭 CSS 循序渐进画个瓢】
∷∷ 相 关 文 章 ∷∷
·通用的javascript的下拉菜单
·弹出网页窗口全攻略(html/hta)
·shtml网页SSI使用详解
·HTML表格使用
·HTML中小meta的大作用
·CSS类及id的规范化命名
·CSS 循序渐进画个瓢
·CSS 循序渐进表里春秋
∷∷ 热 门 推 荐 ∷∷