发现CSS控件的好处

翻译|其它|编辑:郝浩|2004-07-13 17:38:00.000|阅读 1909 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>


是什么使得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格式创建控件是既快而且高效的,并且结果对于大多用户都足够满足需要。这个技术的优势对于基于图标的控件开发可以创造出一个新的标准。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP