很长时间以来，网络开发者通过使用图片和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格式创建控件是既快而且高效的，并且结果对于大多用户都足够满足需要。

实现页面图片阴影特效 用CSS缩写给你的网站加速

评论 (0) All