日期:2014-05-17  浏览次数:20620 次

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) 字体调整
在特定语境中使用字体。