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)字体调整

在特定语境中使用字体。

相关推荐