发现CSS控件的好处

css|控件

很长时间以来,网络开发者通过使用图片和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格式创建控件是既快而且高效的,并且结果对于大多用户都足够满足需要。这个技术的优势对于基于图标的控件开发可以创造出一个新的标准。

时间: 2024-10-31 23:04:38

发现CSS控件的好处的相关文章

使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出_实用技巧

[原文地址] Tip/Trick: Use the ASP.NET 2.0 CSS Control Adapters for CSS friendly HTML output [原文发表日期] Wednesday, November 29, 2006 11:01 PM  厌烦了内置的ASP.NET服务器端控件生成 HTML <table> 元素,而希望你能使用纯粹的CSS方案?如果是这样,读下去...  上个星期,我们发布了ASP.NET 2.0 CSS 控件适配器的1.0正式版.这些适配器利

Web开发中的弹出对话框控件介绍

Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由于工作需要及业余兴趣所至,我比较了近10种的对话框控件,其中发现有一些做得很好的,除了功能强大,而且也支持多种皮肤样式,甚至有些对话框的居中都考虑到了,细节决定体验,有些真的不错. 1.原始的弹出对话框实现(弹出窗口也可以) 我们知道,以前在没有应用其他javascript库(例如各种类型的Jque

ActiveX控件实现

本文源码与文档下载 本章目标: 完成本章学习后,您将能够: Ø         了解什么是ActiveX控件 Ø         掌握如何编写基于MFC的ActiveX控件 Ø         掌握如何测试ActiveX控件 Ø         掌握如何测试ActiveX控件 Ø         了解ActiveX控件如何注册 重点:ActiveX控件的实现.测试及注册. 本章将介绍ActiveX控件的应用与工作原理.我们可以把ActiveX控件看做是一个极小的服务器应用程序,它不能独立运行,必

【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件

原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器--notepad++: 如何为地图添加控件--鱼骨.鹰眼.比例尺.2D3D转换控件.版权控件. ----------------------------------------------------------------------------------------------------------------- 一.安装配置notepad++ 为什么

亲密接触ASP.Net(4) WEB控件

WEB控件按照计划我们这一节要谈Web控件,我想了半天也不知道如何定义这个web控件,它比html控件难于理解,毕竟HTML太像原来我们熟悉的东东了.而web控件确与我们平常见到的有很大的出入,不知道大家还记不记得我说过的一句话,那就是ASP.net的程序就像是写VBVC中的窗口,先再这些窗口中加入我们的需要的控件,然后再对这些控件进行操作.如果你学过一点点VBVC的编程,那么理解这个就不难了,ASP.net中的web控件就像是VBVC中的控件一样.我们先在页面中摆好这些控件,然后再通过Page

Visual Basic 6.0 控件和 .NET 控件的区别后记

visual|控件|区别 Public Class frmTest    Inherits System.Windows.Forms.Form #Region " Windows Form Designer generated code "     Public Sub New()        MyBase.New()         'Windows 窗体设计器必需此调用.        InitializeComponent()         '调用 InitializeCom

Visual Basic 6.0 控件和 .NET 控件的区别(续)

visual|控件|区别 图 1:典型的数据输入屏幕 如图 1 所示,在用键盘键入数据的输入窗体上,您可能希望使 Add.Update.Delete 和 Clear 按钮保持在窗体的右下角.要实现此目的,请突出显示这些按钮,然后将 Anchor 属性设置为 BottomRight.要执行此操作,请在 Properties 窗口中找到 Anchor 属性,并单击其下拉箭头.清除选择左边和上边的栏,然后选择右边和下边的栏,如图 2 所示. 图 2:已激活 Anchor 下拉列表的 Propertie

浅谈FireFox中file控件不能取到客户端文件的完整路径的问题

相信很多人都使用过<input type="file"/>这样的HTML控件,它看起来 非常普通,是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件 ,然而最近我发现这个控件在最新的FireFox浏览器(或者最新的IE8中也会存在 这个问题,我没有尝试过,读者可以试一下)中却失去了效果,导致我们在通过 这个控件的value属性得到的值中只包含了文件名而没有文件路径,这个在IE7中 是可以正常获取到全文件名的(即文件完整路径+文件名).IE7和大部分当前流 行的

ASP.NET控件开发基础(11)

上一篇讨论了集合属性的使用,这一篇我们主要来讨论视图状态的自定义管理. 刚开篇的时后在最后把属性值用视图状态来保存时,得以把当前状态保存下来,关于视图状态的概述,这里不再累赘,没了解过的朋友可以在MSDN里输入视图状态概述了解一下.以下我们还是以以前讲过的内容为例,一起继续来改善控件的使用(第五篇和第九篇的例子) 示例一 我们启用了跟踪,按下确定按钮后,控件属性发生变化,按下无事件按钮后,控件状态则恢复到之前的状态,而且在跟踪状态下发现Custom无视图状态. <%@ Page Language