用类设计 Web 页面

处理样式表难以应付的任务

如果您使用样式表控制 HTML 文档的格式,但是不使用类,就很难充分高效地发挥样式表的设计优势。本文讨论在样式表中使用类的两种方法,帮助您快速地设计(或重新设计)HTML 文档。本文提供实用性的指导和示例脚本。

Molly Holzschlag, 作家、讲师和 Web 设计人员

Molly E. Holzschlag 是一位作家、讲师和设计人员,她热衷于写书、在课堂和培训中心讲课和设计 Web 站点。Molly 被评为对 Web 最具影响力的 25 位女性之一,她在十年间为在线世界做出了突出贡献。她撰写了十多本关于因特网(尤其是 Web)的书。她从 New School for Social Research 获得了通信和写作学士学位以及媒体研究硕士学位。可以通过 她的 Web 站点 进一步了解 Molly 的情况。



2008 年 7 月 31 日 (最初于 1999 年 9 月 01 日)

您希望简便地对 Web 页面设计的细节进行控制吗?那么,就在样式表中使用类吧!

由于层叠样式表(Cascading Style Sheets,CSS)已经与 HTML 4.0 结合在一起,它已经成为一种流行的 HTML 工具。但是,我在最近的一次 Web 开发人员会议上发现,这个领域的许多专业人员还没有掌握类可以给样式表提供的强大灵活性。

再论样式表

在具有样式的 HTML 文档中,放在文档顶部(或单独的外部样式表中)的样式表指定了浏览器显示元素的方式。

这个 HTML 示例包含一个简单的样式表,它设置文档体的背景颜色、H1 标题格式和段落格式。
<html>
<head>
<title>Example of Style Sans Classes</title>
<style>

BODY 	{
	background-color : #FFFFFF;
}

H1	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #990033;
}

P	{
	font-size : 11pt;
	font-family : Arial, Helvetica, Sans-Serif;
}


</style>
</head>
</html>
这个 Web 页面显示以上 HTML 示例定义的两个元素
这个 Web 页面显示以上 HTML 示例定义的两个元素

可以使用样式表实现传统 HTML 格式化无法实现的一些元素格式化效果。样式表根据选择符应用规则。样式表把属性(可以控制的属性)和值(为这些属性选择的值)与样式选择符联系起来。选择符及其定义组成一组规则,这些规则控制相关 HTML 文档的显示方式。可以把样式应用于一组元素,也可以应用于单一元素。当支持样式的浏览器程序解释页面时,它会对样式表中的规则和 HTML 代码中的元素进行匹配,并根据规则显示页面。(关于如何处理无法解释样式的浏览器,参见 向后兼容性)。


理解类

通过为 Web 页面中的各种元素定义类并分别应用不同的样式,可以把样式表的效果提升到新的高度。例如,可以为列表中的第一项和最后一项创建特殊的列表项样式,从而控制列表与周围文本之间的间距。还可以通过控制边栏文本段落的格式,使它们与文档体段落保持距离。

从本质上说,如果使用类,就可以创建定制的标记,可以在页面中的任何地方添加这些标记。因此,不需要使用 P 标记指定文本段落,而是可以设计出各种段落样式,例如紧跟在标题后面的段落不缩进,提示段落采用 demibold 文本和青色背景,作者简介段落使用另一种斜体字体,等等。

有两种在页面中添加类的方法。可以只对一种特定的 HTML 标记定义类,也可以对文档中任何地方的任何元素应用类。(相关建议参见 提示)。为了区分这两种使用类的方法,本文把应用于任何地方的任何元素的类称为 “定制类(custom class)”,把与单一标记相关联的类称为 “标记类(tag class)”。因为标记类更常见,我们先来讨论这种类。

提示


在样式表中使用类时,要记住以下提示:

  • 可以在链接的或嵌入的样式表中使用类。
  • 类名(选择符)可以包含数字、字母、下划线和连字符。
  • 类名应该简单且具有描述性。
  • 避免使用空格或百分号或美元符等特殊字符。
  • 在一个样式表中可以有任意数量的类。

对特定的 HTML 标记使用类 要想创建应用于特定 HTML 元素的标记类样式,首先要计划标记方案以及相关的样式变体。然后,决定需要的类名并为这些类定义样式。最后,在创建站点的内容时应用它们。当然,任何时候都可以通过修改样式来修改设计,而不需要重新编写单个的段落。

假设我需要不同的段落样式。因此,要把所有类与 P 标记关联起来。样式的选择符以这个 HTML 标记开头,后面是一个描述这个样式的扩展。对于段落样式,可能需要 p.firstp.tipp.biop.introp.sidebar 等选择符。点号后面的扩展指定类名;点号前面的标记名指定与这个类相关联的标记。在这个示例中,因为前面的标记名是 P,所以这些类只应用于段落标记。

类在应用于多个页面或整个复杂站点时效率最高,因此应该花时间确定您需要的特殊格式以及与它们的匹配的 HTML 标记。可以在以后添加另一个样式,但是这可能给整个设计造成麻烦。提前进行规划和测试,最终会节省时间。

类名应该简洁且意义清晰,不要加入任何不必要的字符。通常,在准备 HTML 时,总能很快确定适当的类名。


定义类选择符属性

确定了类名和所需的样式之后,就要在样式表中定义它们。

  1. 在 HTML 文档的样式部分中,输入类名、一个空格和一个前花括号({),开始定义。
  2. 使用 property:value; 形式为类定义任意数量的属性,属性定义之间以分号分隔。
  3. 输入后花括号(}),结束类定义。
<style>

BODY 	{
	background-color : #FFFFFF;
}

H1.maroon	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #990033;
}

H1.dkblue	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #330066;
}

P.body	{
	font-size : 11pt;
	font-family : Arial, Helvetica, Sans-Serif;
}

P.foot	{
	font-size : 9pt;
	font-family : Arial, Helvetica, Sans-Serif;
}
</style>

在全局范围使用类样式

如果想把一个样式应用于不同的标记,应该怎么办呢?可以创建一个类,但是不指定相关联的标记。然后,就可以灵活地把这个定制类应用于任何可用的 HTML 元素。

在全局范围使用类的优点是在选择符中不需要使用标记名,只需为类指定样式。然后,把这个类添加到您选择的 HTML 元素中:段落、标题、链接等等。

.12pointsans  {
font-family: helvetica, arial, sans-serif; 
font-size: 12pt;
line-height: 12pt;
}

应用类

要想在 Web 页面的元素中添加标记类或定制类样式,只需在标记名后面加上 CLASS 属性,并指定适当的类名作为属性值。例如,< P class="tip"> 会用 Tip 类样式显示这个段落。注意,如果使用标记类,那么只能把这些类添加到定义的相关标记中。另一方面,可以把定制类添加到对您有意义的任何 HTML 标记中。例如,使用 < p class="12pointsans"> 和 < h1 class="12pointsans"> 就可以对这两种不同的元素应用同一个定制类。CLASS 属性值中不应该包含点号。

提示:当将标记类添加为标记的值时,不要使用点号。应该使用 TAG class=classname 形式,例如 P class=tip。


一个使用类的示例

类真正的强大之处在于,它允许给定的 HTML 元素以不同的方式显示。下面这个示例展示了定制类的灵活性。假设我们希望让页面上的链接使用几种不同的样式和颜色。通过使用类,可以轻松地定制每个链接的外观。而且,您不需要查看样式表并查明哪个链接选择符与哪个样式相关联,只需在链接标记中指定适当的类。

如果您需要页面上有五种链接,应该怎么办?例如,站点上可能到处都有使用青色背景的边栏,因此希望其中的链接能够在边栏背景上看得清楚。另外,页面顶部的导航条使用黑色背景,其中的链接也需要不同的外观。当然,文档体文本中的链接应该与文本相适应。还希望区分出离站链接,让访问者明白这种链接会把他们带到您的站点范围之外。最后,还有链接到版权、隐私策略等信息的页脚链接 —— 这些链接是有意义的,但是与页面上的其他链接相比不太重要,希望以不太醒目的方式显示。

现在,我们来看看如何设置 类选择符、相关联的 类样式定义HTML 页面 以及最后生成的 Web 显示页面

五种链接样式的类及其样式定义

类选择符名 字体 字号 颜色 粗细 样式 装饰
.sidebarlink Garamond, Times, Serif 11pt #FFFFCC Bold Normal None
.navlink Garamond, Times, Serif 11pt #FFFFFF Normal Normal None
.bodylink Arial,Helvetica, Sans-serif 12pt #339999 Normal Normal Underline
.offsitelink Arial,Helvetica, Sans-serif 12pt #339999 Normal Italic Underline
.footerlink Garamond, Times, Serif 10pt #339999 Normal Normal None
类样式的定义
<STYLE>
.sidebarlink {
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFCC;
	text-decoration : none;
}

.navlink {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFFF;
	text-decoration : none;
}

.bodylink {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : normal;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.offsitelink {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : italic;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.footerlink {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : italic;
	font-size : 10pt;
	color : #339999;
	text-decoration : none;
}
</STYLE>
用于生成页面的 HTML 示例(注意,这里对链接使用定制类样式)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Class power with global classes</title>
	<STYLE>

.bold  {
	font-family: arial, helvetica, sans-serif; 
	font-size: 14pt;
	font-weight: bold;
}
	
.12pointsans {
	font-family: arial, helvetica, sans-serif; 
	font-size: 12pt;
	line-height: 12pt;
}

.sidebarlink {
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFCC;
	text-decoration : none;
}

.navlink  {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFFF;
	text-decoration : none;
}

.bodylink  {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : normal;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.offsitelink  {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : italic;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.footerlink  {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : italic;
	font-size : 10pt;
	color : #339999;
	text-decoration : none;
	text-align : center;
}
</STYLE>
</head>

<body>

<div align="center">
<table border="0" width="585" cellpadding="5" cellspacing="5">
<tr><td width="585" valign="top" align="left" bgcolor="#000000" 
colspan="2">
<a href="new.html" class="nav">What's New</a>
<a href="features.html" class="navlink">Features</a> 
<a href="columns.html" class="navlink">Columns</a> 
<a href="forums.html" class="navlink">Forums</a> 
<a href="chats.html" class="navlink">Chats</a> 
<a href="products.html" class="navlink">Products</a>  
<a href="about.html" class="navlink">About Us</a> 
<a href="contact.html" class="navlink">Contact</a> 
</td></tr>

<tr><td width="365" valign="top" align="left">
<h1 class="bold">Welcome!</h1>

<p class="12pointsans">
This page demonstrates the use of Cascading Style Sheet (CSS) classes. 
Specifically, we're examining custom classes. The links running along 
the top of the page were created using the .navlink class. The links 
to the right, in the sidebar, get their presentation features from 
the .sidebarlink class.</p>

<p class="12pointsans">
In the body, there are two class links. The first class link, 
.offsitelink, helps us link to pages that are 
<a href="http://www.molly.com/" class="offsitelink">outside 
of the site</a>. The second class link, .bodylink, is a 
standard body text link that links only to pages 
<a href="classy.html" class="bodylink">within this site</a>. 
The body text itself is created with the .12pointsans custom class. 
And, the header uses the .bold custom class to gain its features.</p>

<p class="12pointsans">
Finally, the links running along the bottom of the page have been 
created with the .footerlink class. These smaller links are 
important, but not as critical as the other links appearing on this
page.</p>
</td>
<td>
<div class="footerlink">
<a href="privacy.html" class="footerlink">privacy policy</a> *
<a href="copyright.html" class="footerlink">copyright info</a>
</div>
</td>

<td width="210" valign="top" align="left" bgcolor="#339999">

<h1 class="bold">Links of Interest</h1>
<a href="http://www.molly.com/"
class="sidebarlink">molly.com</a><br>
<a href="http://www.w3.org/"
class="sidebarlink">W3C</a><br>
<a href="http://www.webreview.com/"
class="sidebarlink">WebReview</a><br>
<a href="http://www.ibm.com/developer/web/"
class="sidebarlink">developerWorks</a>
</td>
</table>
</div>

</body>
</html>
产生的示例 Web 页面
产生的示例 Web 页面

向后兼容性

让样式保持向后兼容可能有一定难度,尤其是在通过类变体应用复杂样式的情况下。尽管不可能仅仅用标准的 HTML 创建 Web 页面示例 所示的链接样式,但是这种做法可能给使用不支持样式的浏览器的访问者造成麻烦。

可以通过一些方法取得两全其美的结果:既使用最好的技术,又可以为尽可能多的用户提供服务。下面这些方法确保访问者看到的页面是可理解的:

  • 了解站点的访问者。定期查看服务器日志和统计数据,了解哪些人访问您的站点以及他们使用的浏览器。应该根据访问者的需求(而不是您的喜好)设计站点。根据统计数据判断大多数用户使用的浏览器是否能够适应您想要的设计。如果是这样,就可以放心地实现您的设计。
  • 如果无法确定目标访问者是否能够看到您希望的页面效果,那么应该使用简单的样式表,同时也添加字体元素,以免出现异常。然后,在 HTML 的头部把页面定义为过渡性 HTML 4.0(添加 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >)。
  • 使用 JavaScript 探测指引脚本探测用户使用的浏览器并把他们重定向到适当的页面,从而确保浏览器能够解释样式。参考资料 中的一篇文章详细说明了如何编写这样的脚本以及可以从哪里下载。当然,这种做法会增加工作量,因为需要为所有页面创建多个版本,但是这可以向用户提供最适合其浏览器的页面。
  • 反复测试。Web 开发人员常常草率地进行测试,甚至跳过这个步骤。仅仅确定代码在自己的浏览器中表现正常,并不意味着它对所有用户都能够产生很好的效果。应该在尽可能多的平台上用各种浏览器执行测试。根据测试结果作出调整。

参考资料

  • 您可以参阅本文在 developerWorks 全球网站上的 英文原文
  • 如果您无法访问服务器的统计数据,可以用下面这些免费或低价的产品获得关于页面的统计数据:
  • javascripts.com 下载一个 JavaScript 探测指引脚本。需要登录才能获得最好的脚本,所以应该先在主页上登录。还可以试试 Ziff-Davis DevHead 库

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=326124
ArticleTitle=用类设计 Web 页面
publish-date=07312008