使用 YUI CSS

声明：本文内容大部分翻译自YUI 文档，加上一些个人的理解。

YUI CSS 由四个部分组成： Reset, Base, Fonts, Grids . 如果想阅读官方文档，请按照此顺序阅读这四个部分。

1、Reset

Reset用来消除各种浏览器之间对HTML元素样式表现的差异，从而提供一致的样式。比如margin, padding, border设置为0; 字体大小设置为YUI的默认大小，去除斜体和粗体样式; list-style设置为none等.

使用Reset后的例子可以参见http://developer.yahoo.com/yui/examples/reset/reset-simple_source.html。

Reset的特性包括：

black text on a white page background, margin and padding to zero, table borders to zero, no visual list style (

ol

ul

dl

), all fonts at 100% of base, font-weight and font-style to normal, better (but still incomplete) font inheritance into forms, reduced line-height disruption from

sub

and

sup

2、Base

因为Reset去除了浏览器提供的默认样式，但是在使用中通常希望为HTML元素保留它原本应该有的一些样式，比如H1元素的字体大小等，而Base就是为此准备的，在使用Reset消除了浏览器默认样式，使用Base就可以使HTML元素在A级浏览器中获得一致的表现。

使用Base的例子可以参见http://developer.yahoo.com/yui/examples/base/base-simple_source.html。

3、Font

Font提供跨浏览器的字体样式和控制。包括以下特性：

Offers full A-grade browser support. Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths. Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes. Works in both "Quirks Mode" and "Standards Mode."

默认字体：

在使用Font后，页面上的所有文本都设置为 Arial font, at 13 pixel size, with 16 pixel line-height. The

pre

and

code

elements use the "monospace" font-family.

字体大小调整：

在使用Font后，如果想自己设置某些字体大小，需要使用百分比作为大小单位，因为那样才可以跨浏览器支持以及用户可以自己调整字体大小。

这是一个百分比和px的对照表：

.ft10 {font-size:77%;}

.ft11 {font-size:85%;}

.ft12 {font-size:93%;}

.ft13 {font-size:100%;}

.ft14 {font-size:108%;}

.ft15 {font-size:116%;}

.ft16 {font-size:123.1%;}

.ft17 {font-size:131%;}

.ft18 {font-size:138.5%;}

.ft19 {font-size:146.5%;}

.ft20 {font-size:153.9%;}

.ft21 {font-size:161.6%;}

.ft22 {font-size:167%;}

.ft23 {font-size:174%;}

.ft24 {font-size:182%;}

.ft25 {font-size:189%;}

.ft26 {font-size:197%;}

关于字体大小调整的例子，参见http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html。

字体样式调整：

因为Font使用Arial 作为默认字体（除了pre和code元素），并且在没有找到需要字体的情况下提供了 fallback 。因此可以简单的使用font-family 来设置字体。比如：

#demo {font-family:verdana;}

关于字体样式调整的例子，参见http://developer.yahoo.com/yui/examples/fonts/fonts-family_source.html

4、Grid

Grid主要用来进行布局，提供了四种页面宽度和六种布局模板，并且可以通过堆叠和嵌套组合出成百上千种页面布局。主要特性包括：

Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. Supports easy customization of the width for fixed-width layouts. Flexible in response to user initiated font-size adjustments. Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO). Self-clearing footer. No matter which column is longer, the footer stays at the bottom. Layouts less than 100% are automatically centered. Accommodates IAB's Ad Unit Guidelines for common ad dimensions. Offers full A-grade browser support.

一般来说一个页面包括3个主要区域: header, body, footer. 所以基本的HTML代码会像是这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Grids CSS </title>
	<!-- Source File -->
	<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
<div id="doc">
   <div id="hd"><!-- header --></div> 
   <div id="bd"><!-- body --></div> 
   <div id="ft"><!-- footer --></div> 
</div>
</body>
</html>

当然Grid并不强制你只包含这3个区域，你的HTML代码也可以像是这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Grids CSS </title>
	<!-- Source File -->
	<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
<div id="doc">
   <div id="hd"><!-- header --></div> 
   <div id="bd"><!-- body --></div> 
   <div id="ft"><!-- footer --></div> 
   <div id="debug"><!-- debug --></div> 
</div>
</body>
</html>

通过改变最外层div的id就可以对页面宽度进行设置，下面是一个id和宽度的对应表：

详细用法，参见Gid的例子http://developer.yahoo.com/yui/examples/grids/index.html。

需要注意的是，100%宽度布局还是在左右各有10px的margin，防止内容过于接近浏览器边缘。如果想去除这10px，可以添加以下css代码：

<style>
#doc3 {margin:auto;}
</style>

当然你也可以使用自定义的页面宽度，把你所需要的宽度的像素值除以13，就得到了非IE浏览器使用的以em为单位的宽度值，对于IE浏览器需要除以的是 13.3333。这是一个自定义600px宽度的代码示例（完整例子）：

<style> 
#custom-doc {
	margin:auto;text-align:left; /* leave unchanged */
	width:46.15em;/* non-IE */
	*width:45.00em;/* IE */
	min-width:600px;/* optional but recommended */
}
</style>

以上代码中需要注意的是以em作为单位可以在用户调整字体大小同时调整页面宽度，对IE的宽度设置必须放在对其他浏览器宽度设置的后面，min-width是可选的，但是在用户调整可视区域大小时可以保持完整性。

在设定好了整个页面宽度之后就应该来设置一下版式布局了，这是Grid的template部分，主要一个观念来展开：内容区域通常有一个固定宽度的secondary block 以及一个占据剩余宽度的main block组成。比如在前面示例代码中的id为bd的div中加入以下代码：

...
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
      <div class="yui-b"></div>
   </div>
...

包裹在id为yui-main中的区域中的yui-b即上面的main block，而另外那个不包裹在yui-main中的就是secondary block，需要注意的是这两个区域出现的顺序并没有先后关系，所以以上代码写成下面这样也是可以的：

...
   <div id="bd">
      <div class="yui-b"></div>
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
   </div>
...

可以方便的进行先后顺序调整主要是为了accessibility 和SEO。

在将bd区域划分出了2个block之后就可以选择 template 确定两个区域的大小和左右位置关系。这是通过在最外层的div中添加一个class来实现的，示例代码如下：

...
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
   <div id="hd"></div>
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
      <div class="yui-b"></div>
   </div>
   <div id="ft"></div>
</div>
...

Grid提供了6个常用的 template，其class名和样式的对应表如下：

Template Class	Preset Description	Example
`.yui-t1`	160 on left	Example
`.yui-t2`	180 on left	Example
`.yui-t3`	300 on left	Example
`.yui-t4`	180 on right	Example
`.yui-t5`	240 on right	Example
`.yui-t6`	300 on right	Example

通过该表可以看出上面的示例将产生一个在右边，宽度为180px的secondary block，和一个占据剩余宽度的main block。

再将内容区域分割成2个 block 之后，就到了真正的grid上场的时间了，可以暂时简单地将grid看成一个可以放置在任何div中，会占据所在div 100%宽度的一个容器，然后可以在该grid中放置一定数量的unit，从而组合出各种各样的布局。

接着上面的示例，假设要将页面布局设置成如图所示的样子：

使用 YUI CSS

可以使用以下代码来完成：

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>
...

一个grid是class 为 yui-g的div元素，而unit 则是class为yui-u的div元素。后面将会提到预置的其他grid，如果以yui-g作为class，那么它必须嵌套2个class为yui-u的div元素，2个yui-u将各占据一般的宽度。

因为不是所有的浏览器都支持:first-child 伪类选择器，所以手动的添加一个class first来指出哪一个是第一个节点。给某个节点添加一个class为first是必要的，它包含一些有用的信息来指出如何浮动那些相邻的节点。

在上面，我们说在一个grid中包含的是节点，而不是最初提到的unit。因为如果一个grid内嵌套的是另一个grid，并不需要将嵌套在内的grid先嵌套入一个unit中，在这种情况下，那个grid的行为就像是一个unit，所以在一个grid中即可以包含unit也可以包含grid，简而言之就是一个节点。回到上面的例子，假如现在想将两栏分成四栏（通过嵌套两次来实现），那么代码将如下所示（完整例子）：

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-g first">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
         <div class="yui-g">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
      </div>
   </div>
</div>
...

可以看到，在一个grid中直接嵌套另一个grid，但是不管那个节点是grid还是unit，还是必须指出哪一个是第一个节点（即添加一个class为first）。

然而，标准的grid永远都只能简单地分割成2栏，所幸还有其他各种grid可以用来分割更多形式栏数和宽度比例，而通过组合使用，将可以得到更多的栏数和比例。要使用其他grid，简单的将原本为yui-g的class替换成另一个class，并且在里面嵌套相应的节点数即可。比如分成2/3 +1/3：

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-gc"> <!-- the "special grid" -->
         <div class="yui-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>
...

下面是其他grid和栏数情况对应表：

Special Grid Class	Description	Example
`.yui-gb`	1/3 - 1/3 - 1/3	Example
`.yui-gc`	2/3 - 1/3	Example
`.yui-gd`	1/3 - 2/3	Example
`.yui-ge`	3/4 - 1/4	Example
`.yui-gf`	1/4 - 3/4	Example

需要注意的是grid可以用在任何你想进行分栏的div内，而不仅仅限制在内容区域。所以通过使用grid是可以组合出非常多的布局和版式。

这是所有关于Grid部分的示例http://developer.yahoo.com/yui/examples/grids/index.html。

最后，关于如果使用YUI的css文件：

1、每个部分都有一个单独的css文件，可以直接使用雅虎提供的服务器也可以你自己下载下来后由你自己的服务器提供。

2、因为Reset，Font，Grid通常一起使用，所以YUI提供了一个打包的文件将这三个文件组合起来一起提供，再加上Base，所以我们的css链接通常只需要包含这2个文件就够了。

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" target="_blank" rel="external nofollow" >

3、YUI还专门有放置在中国的服务器，服务器地址为 http://cn.yui.yahooapis.com/ 。要使用该服务器的话，直接替换服务器地址即可。详见http://www.yuiblog.cn/。

4、关于Grid，YUI提供了一个CSS Grid Builder，可以很方便的进行在线的布局设计。地址http://developer.yahoo.com/yui/grids/builder/。

使用 YUI CSS

继续阅读

CSS的伪类与伪元素的区别

css中伪类与伪元素的区别

谈谈css的伪类和伪元素

伪类与伪元素的区别伪类与伪元素的区别

web前端布局练手项目

CSS----对字号的控制:Points, ems, pixels, 及其它单位,关键字,比例参数

赶工心得（一）

单字母域名

web OS —— goowy.com

（C# 编程指南）

两种清除浮动的方法

如何成为一名.net 工程师?

tabpanel 使用问题

CSS之折叠菜单

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”