|
声明：本文内容大部分翻译自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的特性包括： ol, ul, dl),
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提供跨浏览器的字体样式和控制。包括以下特性：
默认字体： 在使用Font后，页面上的所有文本都设置为 Arial font, at 13 pixel size, with 16 pixel line-height. The
字体大小调整： 在使用Font后，如果想自己设置某些字体大小，需要使用百分比作为大小单位，因为那样才可以跨浏览器支持以及用户可以自己调整字体大小。 这是一个百分比和px的对照表： .ft10 {font-size:77%;} /* for setting 10px */
关于字体大小调整的例子，参见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主要用来进行布局，提供了四种页面宽度和六种布局模板，并且可以通过堆叠和嵌套组合出成百上千种页面布局。主要特性包括：
一般来说一个页面包括3个主要区域: header, body, footer. 所以基本的HTML代码会像是这样： Html代码
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> <html> <head> <title>YUI Grids CSS </title> <!-- Source File --> <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> </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代码也可以像是这样： Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> <html> <head> <title>YUI Grids CSS </title> <!-- Source File --> <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> </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和宽度的对应表： <!-- #doc = 750px width, centered-->
<!-- #doc2 = 950px width, centered -->
<!-- #doc3 = 100% width -->
<!-- #doc4 = 974px width, centered --> 详细用法，参见Gid的例子http://developer.yahoo.com/yui/examples/grids/index.html。
需要注意的是，100%宽度布局还是在左右各有10px的margin，防止内容过于接近浏览器边缘。如果想去除这10px，可以添加以下css代码：
Html代码
<style>
#doc3 {margin:auto;}
</style>
当然你也可以使用自定义的页面宽度，把你所需要的宽度的像素值除以13，就得到了非IE浏览器使用的以em为单位的宽度值，对于IE浏览器需要除以的是 13.3333。这是一个自定义600px宽度的代码示例（完整例子）： Html代码
<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中加入以下代码： Html代码
... <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，需要注意的是这两个区域出现的顺序并没有先后关系，所以以上代码写成下面这样也是可以的： Java代码
... <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来实现的，示例代码如下： Html代码
... <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名和样式的对应表如下：
通过该表可以看出上面的示例将产生一个在右边，宽度为180px的secondary block，和一个占据剩余宽度的main block。
再将内容区域分割成2个 block 之后，就到了真正的grid上场的时间了，可以暂时简单地将grid看成一个可以放置在任何div中，会占据所在div 100%宽度的一个容器，然后可以在该grid中放置一定数量的unit，从而组合出各种各样的布局。
接着上面的示例，假设要将页面布局设置成如图所示的样子：
可以使用以下代码来完成： Html代码
... <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，简而言之就是一个节点。回到上面的例子，假如现在想将两栏分成四栏（通过嵌套两次来实现），那么代码将如下所示（完整例子）： Html代码
... <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：
Html代码
... <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和栏数情况对应表：
需要注意的是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个文件就够了。 Html代码
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui./2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="http://yui./2.5.2/build/base/base-min.css">
3、YUI还专门有放置在中国的服务器，服务器地址为 http://cn.yui./ 。要使用该服务器的话，直接替换服务器地址即可。详见http://www./。 4、关于Grid，YUI提供了一个CSS Grid Builder，可以很方便的进行在线的布局设计。地址http://developer.yahoo.com/yui/grids/builder/。 |
|
|
来自： weiledream > 《我的图书馆》
