动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.web标准化设计:常用的CSS命名规.
.XHTML头部Doctype声明必不可少!.
.标记语言:为指定css样式.
.导航上用CSS标志当前页效果的实现.
.CSS中常用的单位.
.CSS垂直树形下拉菜单.
.CSS初级入门:页面样式的整体声明.
.CSS实用教程(三).
.写给喜欢用DreamWeaver编写CSS人.
.XHTML+CSS兼容性解决方案小集.
.XHTML+CSS制作样式风格切换的WEB.
.用CSS设计高体验的表单显示效果示.
.创建一个纯CSS的水平导航条.
.用CSS制作Alpha滤镜测试板.
.实时切换网页的CSS样式实现.
.学习CSS了解单位em和px的区别.
.避免表格table被撑开变形的CSS.
.常用CSS缩写语法总结及缩写的原因.
.精通 CSS 滤镜(二).
.漂亮的CSS变色日历.

CSS 循序渐进(一)画个瓢

文章类别:CSS教程 | 发表日期:2004-1-30 |


   说起来现在介绍样式表的文章比较多了。其实真正用透样式表的人并不多,笔者也仅仅就敢说懂得了一点皮毛。大家不信?那下面我就来说说,本文主要也就是从语法和功能两大方面来说说前文都未提到的一些东西。

   说到语法,似乎只有那些高深的程序语言才有,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">
< !--
.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:"方正
彩云繁体"}

   这就是关于透明度的一个效果。

   这次就谈到这里吧,下章将继续为大家介绍一些style的特殊地方和一些小技巧。


上一篇:CSS语法手册(六)分类属性 人气:17884
下一篇:CSS 循序渐进(二)字的艺术 人气:16820
点击此处浏览全部CSS 循序渐进的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-16 乘风多用户PHP统计系统 v3.4
2008-5-16 轩溪下载系统 v3.78 build 0515
2008-5-16 普沙B2B 浙江省商贸网 v2.0
2008-5-16 asp抓蜘蛛的小程序 v1.0
2008-5-16 齐齐乐网私服发布站 仿haosf新版
2008-5-16 IssTech信息反馈系统 v1.0
2008-5-16 自由领域大头贴(js接口版) 修正版
2008-5-16 医院网站系统
2008-5-16 智拓-分类信息管理系统 v5.0
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報