本文内容大部分翻译自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://blog.sina.com.cn/s/blog_5ea463780100cxyp.html~type=v5_one&label=rela_prevarticle

在线yui css 布局工具
http://developer.yahoo.com/yui/grids/builder/