YUI CSS框架学习笔记一

YUI是一个免费的，开源的Javascript和CSS库，用于构建丰富的交互式web应用程序。

YUI为我们提供了一个强大的JS框架的同时还提供了几个CSS的框架，分别是Reset、Base、Font以及Grid。通过在页面中引用这几个CSS，可以让我们的前端开发工作事半功倍，达到快速将美工图转化为实际产品、并且能够保证在绝大多数浏览器上的正常表现。

接下来我们来了解一下YUI的这几个CSS

1、YUI3 Css Reset

Css Reset 清除各浏览器设置的默认样式。这样，我们在 Build 我们的页面的时候，就是建立在一个完全一致的基础上，能够非常方便的让我们按照自己的想法去进行排版布局。

YUI3的Css Reset还提供了局部的Reset样式的功能，在我们想对某一容器内的元素（而不是整个页面）进行样式统一时使用。

2、YUI3 Css Base

Css Base对通用的元素设置相同的样式。

3、YUI3 Css Fonts

Css Fonts保证了跨浏览器的字体一致，即使在用户对字体进行调整情况下也是如此。不管是标准模式（Standard）还是怪异模式（Quirks），只要是A-Grade Browsers 都支持。

4、YUI3 Css Grids

Css Grids 提供了一套基本的、简单的布局系统。

YUI Grid CSS建议把网站整体划分为3打部分，header, body, footer,并且这三部分放在一个大的div里,这三大部分使用id selector来做定义

<div id="doc">
    <div id="hd"><!-- header --></div>
    <div id="bd"><!-- body --></div>
    <div id="ft"><!-- footer --></div>
</div>

Css Reset、Css Font、Css Grids三个合起来，构成了YUI CSS的一个核心。我们可以一次将这三个文件引入进来。