分享
 
 
 

发现CSS控件的好处

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

作者: ZDNet China

很长时间以来,网络开发者通过使用图片和javascript脚本代码来开发交互式的控件。然而,在许多情况下使用CSS的规则来定义文本超链接的格式将是开发交互式控件的一个较好选择。使用CSS技术开发更快更有效,所以现在在众多网站上看到这种技术已经不是一件奇怪的事情了。

使用传统方法开发控件的缺点

使用传统的技术开发一个控件常常是从用一个包含了一个矩形或其它形状文本输入框的小图标开始的。这个控件也许使用阴影、光效、倾斜或者其它的效果予以修饰,但是它本质也就只是一个包含了文本的框架。

首先,你需要为控件的每个状态创建一个独立的图标。例如,你需要为控件在默认情况下创建一个图标,还要为其在鼠标指针指向这个控件的时候创建一个图标。仅仅是这样一个简单的效果,你就需要至少两个图标(默认和鼠标指向两个状态),如果你要加入点击和访问过的状态,每个控件就需要三或四个图标。

在你的网页中加入一个基本的图标用于超链接再简单不过,只需要牢记输入合适的位置以满足访问需要

为了使你的控件具有交互性,你需要增加javascript脚本代码来使控件图标能够在鼠标事件发生的时候有所反应,比如说在鼠标指向图标的时候。像Dreamweaver这样的开发软件可以使用简单的鼠标操作自动添加代码,但是这些代码包含了网页的大小信息。

为了使得动态效果,你需要预先下载图片这样当用户指向这个控件的时候浏览器能立即改变。预先下载图片将会使网页的加载时间变长,而且它的不方便之处还在于即使是用户不需要使用所有的控件,它也要加载所有的图片的。

是什么使得CSS技术具有优越性?

使用CSS,你可以从一个简单的文本超链接中创建一个完全的交互控件。适当的格式化可以把一个段落变化或者分解成一个围绕着文本超链接的矩形框。在超链接文本中添加动态效果,只需要多几条简单的CSS代码就可以使得控件具有交互性。与基于图标的空间相比,这个控件有以下几个优点:

1、不需要任何的图标。CSS通过格式化文本来创建控件效果,所以不需要创建任何独立的图标文件。

2、你不需要键入任何的文本属性,因为CSS控件的文本就已经具有了完全的可访问性。

3、更加有效的代码。CSS规则和分类的代码比其所取代的javascript脚本代码更小,因而浏览器执行的更快。

4、没有图标需要预先加载。含有CSS控件的网页加载速度要明显快一些。

5、CSS规则可以在所有的网站上容易地使用和维护。可以通过修改你的CSS风格更改你网页上所有的控件形态。

通过为超链接的控件格式化创建规则,你可以通过在其他文件中使用超连接格式化使控件看上去和用起来与其它的不同。

解析一个CSS控件的例子

下面是一个引用的CSS风格表单的例子。格式化规则创建的.button类有80象素宽,背景是黑色的,白色的边框,白色的文本框。

. button {

....border: 1px solid White;

....padding: 5px;

....width: 80px;

....color: White;

....font-family: Arial, Helvetica, sans-serif;

....font-size: 1.1em;

....font-weight: normal;

....text-align: center;

....height: 1.25em;

....background-color: Black;

}

接下来,风格表单包括具体说明格式是如何随着超链接的状态变化而变化的规则。这些规则都是相互关联的并且只在类.button的范围内影响。默认的链接状态不改变;鼠标覆盖的状态是在蓝色背景下的白色的文本边框;访问过的状态是在深灰色背景下的浅灰色文本框。

.button a:link {

text-decoration : none;

color : White;

}

.button a:hover {

text-decoration: none;

color : White;

font-weight : bold;

background : Blue;

}

.button a:visited {

text-decoration : none;

color : #BBBBBB;

background : #333333;

}

下面的代码显示了在网页上使用CSS控件的简单操作。所有需要做的就只是将合适的类的属性添加到模块标签中去(例如分段或者是段落),而这个标签包含一个简单的超链接。在这种情况下,结果将是三个矩形控件: Home,Gallery和About Us。

<div class="button"><a href="default.htm">Home</a></div>

<div class="button"><a href="gallery.htm">Gallery</a></div>

<div class="button"><a href="about_us.htm">About Us</a></div>

在文本超链接中使用CSS格式创建控件是既快而且高效的,并且结果对于大多用户都足够满足需要。这个技术的优势对于基于图标的控件开发可以创造出一个新的标准。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有