


下面是一个引用的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 href="default.htm">Home</a></div>
<div href="gallery.htm">Gallery</a></div>
<div href="about_us.htm">About Us</a></div>
在文本超链接中使用CSS格式创建控件是既快而且高效的,并且结果对于大多用户都足够满足需要。这个技术的优势对于基于图标的控件开发可以创造出一个新的标准。