本文内容大部分翻译自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/