薄荷音的歌手有谁:使用 YUI CSS

来源:百度文库 编辑:偶看新闻 时间:2024/03/29 05:09:17
明:本文内容大部分翻译自YUI 文档,加上一些个人的理解。

YUI CSS 由四个部分组成: Reset, Base, Fonts, Grids .  如果想阅读官方文档,请按照此顺序阅读这四个部分。

 

1、Reset

Reset用来消除各种浏览器之间对HTML元素样式表现的差异,从而提供一致的样式。比如margin,  padding,  border设置为0;  字体大小设置为YUI的默认大小,去除斜体和粗体样式;  list-style设置为none等.

 

使用Reset后的例子可以参见http://developer.yahoo.com/yui/examples/reset/reset-simple_source.html。

 

Reset的特性包括:

  • black text on a white page background,
  • margin and padding to zero,
  • table borders to zero,
  • no visual list style (ol, ul, dl),
  • all fonts at 100% of base,
  • font-weight and font-style to normal,
  • better (but still incomplete) font inheritance into forms,
  • reduced line-height disruption from sub and sup.
  •  

     

    2、Base

    因为Reset去除了浏览器提供的默认样式,但是在使用中通常希望为HTML元素保留它原本应该有的一些样式,比如H1元素的字体大小等,而Base就是为此准备的,在使用Reset消除了浏览器默认样式,使用Base就可以使HTML元素在A级浏览器中获得一致的表现。

     

    使用Base的例子可以参见http://developer.yahoo.com/yui/examples/base/base-simple_source.html。

     

     3、Font

    Font提供跨浏览器的字体样式和控制。包括以下特性:

  • Offers full A-grade browser support.
  • Provides consistent font sizing and line-height.
  • Provides appropriate cross-OS font-family degradation paths.
  • Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes.
  • Works in both "Quirks Mode" and "Standards Mode."
  •  

    默认字体:

    在使用Font后,页面上的所有文本都设置为  Arial font, at 13 pixel size, with 16 pixel line-height.  The pre and code elements use the "monospace" font-family.

     

    字体大小调整:

    在使用Font后,如果想自己设置某些字体大小,需要使用百分比作为大小单位,因为那样才可以跨浏览器支持以及用户可以自己调整字体大小。

    这是一个百分比和px的对照表:

    .ft10 {font-size:77%;} /* for setting 10px */
    .ft11 {font-size:85%;} /* for setting 11px */
    .ft12 {font-size:93%;} /* for setting 12px */
    .ft13 {font-size:100%;} /* for setting 13px */
    .ft14 {font-size:108%;} /* for setting 14px */
    .ft15 {font-size:116%;} /* for setting 15px */
    .ft16 {font-size:123.1%;} /* for setting 16px */
    .ft17 {font-size:131%;} /* for setting 17px */
    .ft18 {font-size:138.5%;} /* for setting 18px */
    .ft19 {font-size:146.5%;} /* for setting 19px */
    .ft20 {font-size:153.9%;} /* for setting 20px */
    .ft21 {font-size:161.6%;} /* for setting 21px */
    .ft22 {font-size:167%;} /* for setting 22px */
    .ft23 {font-size:174%;} /* for setting 23px */
    .ft24 {font-size:182%;} /* for setting 24px */
    .ft25 {font-size:189%;} /* for setting 25px */
    .ft26 {font-size:197%;} /* for setting 26px */

     

    关于字体大小调整的例子,参见http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html。

     

    字体样式调整:

    因为Font使用Arial 作为默认字体(除了pre和code元素),并且在没有找到需要字体的情况下提供了 fallback 。因此可以简单的使用font-family 来设置字体。比如:

    #demo {font-family:verdana;}

     

     关于字体样式调整的例子,参见http://developer.yahoo.com/yui/examples/fonts/fonts-family_source.html

     

    4、Grid

    Grid主要用来进行布局,提供了四种页面宽度和六种布局模板,并且可以通过堆叠和嵌套组合出成百上千种页面布局。主要特性包括:

  • Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
  • Supports easy customization of the width for fixed-width layouts.
  • Flexible in response to user initiated font-size adjustments.
  • Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
  • Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  • Layouts less than 100% are automatically centered.
  • Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
  • Offers full A-grade browser support.
  •  

    一般来说一个页面包括3个主要区域:  header,  body, footer. 所以基本的HTML代码会像是这样:

    Html代码  
    1.   
    2.   
    3.   
    4.     YUI Grids CSS   
    5.       
    6.       
    7.   
    8.   
    9.   
    10.    
       
  •    
  •    
  •    
  •    
  •   
  •   
  •   
  •   

    当然Grid并不强制你只包含这3个区域,你的HTML代码也可以像是这样:

    Html代码  
    1.   
    2.   
    3.   
    4.     YUI Grids CSS   
    5.       
    6.       
    7.   
    8.   
    9.   
    10.