在上周的专栏文章中,我讨论了Yahoo! Developer Network,集中论述了在Yahoo! User Interface (YUI) Library(用户界面库)中可用的Java特性(最重要的就是日历)。

利用Yahoo!免费获取可重复使用的CSS

在上周的专栏文章中,我讨论了Yahoo! Developer Network,集中论述了在Yahoo! User Interface (YUI) Library(用户界面库)中可用的JavaScript特性(最重要的就是日历)。我想再花一点时间涉入YUI库中另一个提供了CSS工具的领域。这些工具使你能够很轻松地将以CSS为基础的设计与Web应用相结合。

浏览器支持

CSS工具的一个主要特性就是它的分级提供了对A级浏览器的完美支持。分级浏览器支持纯粹是一个Yahoo!的分级,在它的网站上你可以看到完整的说明,它主要描述了在当今市场上的浏览器中,CSS的良好表现。

在这个在线表格中,浏览器被分为三个级别的浏览器支持(A、C和X)。A级是最高的支持级别。通过充分发挥现代Web标准的强大性能,YUI库发现,A级体验提供了高级的功能性和可视保真度。支持类别和相关文件使你能够切身体会到哪里支持CSS,但是它应该在每一种浏览器中都可用(通过可能的降级)。

可重复使用的CSS

YUI库中包括了三个CSS领域或特性,涉及格式化、字型介绍和以网格为基础的(列和行)版式。网站上用这些术语来描述这三个元素:

Page Grids:使你能够在所用模版容量范围内,嵌入一到四列的网格。
Fonts:提供跨浏览器的排版标准化和控制器。一般来说,它在完全支持用户(在浏览器内)对字体进行调整的同时,还提供了一致的字体和行高。
Reset:提供跨浏览器的HTML元素默认赋值的标准化。它也去除了浏览器中的共同默认表达,如对要强调元素使用粗体,这样是为了帮助保证对所有的字体的定义都是有意图的,并且元素始终用的是它们的语义含义,而不是习惯上的视觉表达。
在被安装了以后,YUI库下载中的每一个元素都可以在Web服务器的以下目录/文件中获得:

Page Grids: buildgridsgrids.css
Fonts: buildfontsfonts.css
Reset: build eset eset.css
你可以在自己的Web服务器上安装这些基础目录或者将它们置于你的站点内,以便根据需要引用它们。CSS的一个重要特性(除了免费之外)就是,它在发布之前,已经经过了彻底的检验和调试。让我们来更仔细地看一下实际操作中的CSS工具。

有网格的页面版式

以网格为基础的版式几乎是所有站点设计或页面版式的动力。过去,这一点常常通过HTML表格来完成,但是CSS为页面版式提供了巨大的力量和灵活性。页面网格提供的代码可以根据你的要求,利用列和行来建立页面。

在页面网格最基本的级别上,它提供了七种Web页面模版,其中六种定义了详细的主要内容/工具条版式;第七个模版定义了一个没有工具条的版式,主要内容占据了整个页面宽度。这些模版的名称如下:

yui-t1:包含一个位于左侧宽度为160px的工具条和一个宽度为570px的主要区域。
yui-t2:包含一个位于左侧宽度为180px的工具条和一个宽度为550px的主要区域。
yui-t3:包含一个位于左侧宽度为300px的工具条和一个宽度为430px的主要区域。
yui-t4:包含一个位于右侧宽度为180px的工具条和一个宽度为550px的主要区域。
yui-t5:包含一个位于右侧宽度为240px的工具条和一个宽度为490px的主要区域。
yui-t6:包含一个位于右侧宽度为300px的工具条和一个宽度为430px的主要区域。
yui-t7:包含一个宽度为750px的主要区域,没有工具条。
你可以结合(或编辑,如果你够大胆)这些模版来达到你的目的。列表A用第一种版式来安排一个页面的格局(注意:CSS工具安装在Web服务器的默认目录中)。

列表A

<html><head>
<title>Yahoo CSS Tools Example 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">Page Header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Main Area</div>
</div><div class="yui-b">Left Column</div>
</div>
<div id="ft">Page Footer</div>
</div></body></html>
HTML页面上的几个注释:

版式被赋予整个页面——主div标签被分配为yui-t2类。这说明采用的是第二种模版。
页面被分为页眉、主体和页脚区域。页眉被赋予标识符hd,主体为bd,页脚为ft。
页面的主体被分为左区域(如果模版支持的话)和主区域。两者都被分配为yui-b类,但是主区域在它的div标签中被附上了yui-main的标识符属性。

这个简单的HTML产生了一个有页眉和页脚的两列页面。页面主区域可以被分离多至四列。列表B将页面的主区域分为两列。列用yui-g CSS类来创建;它指示浏览器将区域分为两个均等的列。一旦使用了它,这两列就可以通过yui-u类插入。

列表B

<html><head>
<title>Yahoo CSS Tools Example 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head><body>
<div id="doc" class="yui-t2">
<div id="hd">Header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first">
Col1
</div>
<div class="yui-u">
Col2
</div>
</div>
</div>
</div>
<div class="yui-b">Left Non-Main Area</div>
</div>
<div id="ft">Footer</div>
</div></body></html>

利用页面网格为布置Web页的格局提供了一种简单的方法。关联的文件为利用代码提供了大量信息。

一致性

CSS工具的字体样式保持了字体的一致性和对其的控制。在使用时,所有的字体都被赋予了一个字体为Arial,像素大小为13,16像素行高的缺省值。前置和代码元素使用单空格的字体族。你可以利用文件中定义的百分比值来改变字体大小。它也许不及页面网格那样华丽,但是对于提供一致的用户体验来说,它也是同等重要的。对于CSS工具重置样式来说,在其通过规格化元素来保证一致性时也是一样的。

节省时间

在当今的快节奏的世界里,就算是最有经验的开发者也会希望使用捷径。Yahoo! Developer Network是一个极好的资源,它既提供了普通代码,也为特定的产品量身定制。此外,CSS工具提供了经过检验的CSS,你可以用它们来快速部署Web应用软件。在你下次开发软件时,好好利用这个资源。

Tony Patton的职业生涯开始于应用程序开发员,并已经获得了代表其专业水平的Java、VB、Lotus和XML认证。

 

热点信息

 

网站优化

SEO/搜索引擎优化

网站推广