YUI 3 CSS

YUI3:CSS Reset
基本的CSS Reset去除了不同浏览器之间HTML元素的样式不一致。这样创建了一个踏实、平实的基础环境。加载了CSS Reset，可以书写项目需要的精确的CSS。
注意：CSS Base应用了为通用A级别浏览器HTML元素应用了一种基础样式来补充CSS Reset。
1. 准备
1） 包含文件
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

2） 全局和语境
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-context-min.css">
2. 使用CSS Reset举例

YUI3:Css grids
基本的css grids为布局内容提供了一个简单的系统。基本组件是grids和units。一个grid（yui3-g）包括一个或多个units（yui3-u）。unit的类型选择描述了如何规定大小（如yui3-u-1-2占了网格的一半，yui3-u-1-3占据网格的三分之一）。YUI3唯一的约束是所有的units都是grid的子节点。你所需要做的就是定义一个grid，及其内部的一个或多个units和units的宽度。包括stack和nest。
1. 准备
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css">

2. 使用css grids
（1） unit的大小：.yui3-u-23-24,占据了可用宽度的23/24
首先，units的大小使用百分比表示。所以，为了创建一个页面模板，必须定义最大容器的宽度。为了美观，可以让该容器居中显示。如：
body {
    margin: auto; /* center in viewport */
    width: 960px;
}
然后，下一步就是如何定义每列的宽度大小，以及选择合适的united
（2） 举例

YUI3:CSS Base
CSS Base是一个可选的CSS文件，组成了YUI core CSS基础（CSS Reset和CSS Fonts）。CSS Base为A级别浏览器的HTML元素应用一种样式基础。
CSS Base也可以作为你自己的基础文件模板，或者作为样式化HTML元素的片段库。
1. 准备
1） 包含文件
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css">
2） 全局和语境
YUI的CSS资源直接对HTMl元素使用规则。一种可选资源版本的可选方案是通过语境选择目标元素。这种语境——context.css版本仅当继承至.yui3-cssbase类名时，即是.yui3-cssbase的后裔，才选择HTML元素。
语境版本：
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-context-min.css">
3） YUI CSS基础
注意：如果你使用的是全部的YUICss基础，包括CSS Reset，Fonts，Grids资源，我们已经可以为您提供了一个级联的、精缩的文件供您使用。仅使用reset-fonts-grids.css文件能提供性能，比分开使用这些文件性能更好。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css&3.3.0/build/cssfonts/fonts-min.css&3.3.0/build/cssgrids/grids-min.css">
2. 使用CSS Base举例

YUI3:CSS Fonts
YUI基础CSS Fonts提供了跨浏览器排版正常化和控制，并仍然允许用户选择和调整他们的字体大小。在A级别浏览器都支持两种标准和混杂模式。
注意：CSS Base能补充CSS Reset，通过对通用A级别浏览器一致支持的HTML元素应用基础样式。
1. 准备
1） 包含文件
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css">
2） 全局和语境
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-context-min.css">

2. 使用CSS Fonts
1） 默认字体Arial,13px,line-height:16px
2） 字体大小调整
使用百分数表示。如表所示。
3） 字体调整
在特定语境中使用字体。