YUI 3 CSS

YUI3:CSSReset

基本的CSSReset去除了不同浏览器之间HTML元素的样式不一致。这样创建了一个踏实、平实的基础环境。加载了CSSReset，可以书写项目需要的精确的CSS。

注意：CSSBase应用了为通用A级别浏览器HTML元素应用了一种基础样式来补充CSSReset。

1.准备

1）包含文件

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

2）全局和语境

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-context-min.css">

2.使用CSSReset举例

YUI3:Cssgrids

基本的cssgrids为布局内容提供了一个简单的系统。基本组件是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.准备

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css">

2.使用cssgrids

（1）unit的大小：.yui3-u-23-24,占据了可用宽度的23/24

首先，units的大小使用百分比表示。所以，为了创建一个页面模板，必须定义最大容器的宽度。为了美观，可以让该容器居中显示。如：

body{

margin:auto;/*centerinviewport*/

width:960px;

}

然后，下一步就是如何定义每列的宽度大小，以及选择合适的united

（2）举例

YUI3:CSSBase

CSSBase是一个可选的CSS文件，组成了YUIcoreCSS基础（CSSReset和CSSFonts）。CSSBase为A级别浏览器的HTML元素应用一种样式基础。

CSSBase也可以作为你自己的基础文件模板，或者作为样式化HTML元素的片段库。

1.准备

1）包含文件

<linkrel="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元素。

语境版本：

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-context-min.css">

3）YUICSS基础

注意：如果你使用的是全部的YUICss基础，包括CSSReset，Fonts，Grids资源，我们已经可以为您提供了一个级联的、精缩的文件供您使用。仅使用reset-fonts-grids.css文件能提供性能，比分开使用这些文件性能更好。

<linkrel="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.使用CSSBase举例

YUI3:CSSFonts

YUI基础CSSFonts提供了跨浏览器排版正常化和控制，并仍然允许用户选择和调整他们的字体大小。在A级别浏览器都支持两种标准和混杂模式。

注意：CSSBase能补充CSSReset，通过对通用A级别浏览器一致支持的HTML元素应用基础样式。

1.准备

1）包含文件

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css">

2）全局和语境

<linkrel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-context-min.css">

2.使用CSSFonts

1）默认字体Arial,13px,line-height:16px

2）字体大小调整

使用百分数表示。如表所示。

3）字体调整

在特定语境中使用字体。