原文地址:
某日,从Yahoo!的开发网站上看到一段视频讲座,是由YUI团队的高级工程师,YUI CSS Foundation的作者讲解的.看完视频后,我是受益匪浅,好东西不敢独享,和大家共同分享.
视频地址:
作者:Nate Koechley
2007年10月25日
Yahoo!总部
YUI视频专题:
更多请关注:
YUI(Yahoo! User Interface)
文档:
邮件列表: groups.yahoo/group/ydn-javascript
博客: yuiblog
Nate Koechley: natek@yahoo-inc
声明:由于作者水平有限,本文不是翻译,只是把作者意思表现出来.由于视频过早,有几个连接已经失效.
Css reset(清除浏览器的css样式)
Css base(对通用元素设置一直的样式基础)
Css fonts(字体排列和字体大小的基础)
Css grids(4k文件中包含了超过1000种的css驱动的线框)
(清晰明了,直观的给我们介绍了网页UI的组成,Reany注)
来自任何地方的属性值可能在形成最终值之前经过了复杂的混合.(这个我们很清楚,我们的web页面很多时候会由于各个浏览器不同会显现出不同的样式,于是,为了统一,我们需要进行以下的工作,Reany注)
csscade模型
根据权值和自身(设置)进行规则排序
Inheritance模型
有些属性可以传递给子节点,子节点可以部分的接受(尤其是当值重复的时候,比如"80%")
错误和差异同样会被有效的传递
为稳定做准备
差异的标准化
解决再利用的问题
集中管理繁杂问题
Reset-干净的基础
Fonts-字体排列控制
Grids-布局和页面控制
Base-基本helper或者说微不足道的库
"Base"是额外的
基础
Helper
Reset
Base
Fonts
Grids
(又是一个直观的图片展示,Reany注)
建议:
1 使用<link>
2 使用
3 你自己的css连接
更多信息:
引用Reset.css
Href=".3.1/build/reset/reset-min.css"
引用Fonts.css
Href=".3.1/build/fonts/Fonts-min.css"
引用Grids.css
Href=".3.1/build/grids/grids-min.css"
原连接版本
Href=".3.1/build/reset-fonts-grids/reset-fonts-grids.css"
(连接的文件默认已经最小化了)(就是被压缩了的,用过css压缩和js压缩的应该知道是怎么回事.Reany注)
1 全面控制页面的宽和居中方式
2 拥有6套预设的模板,可以兼容所有IAB(Internet Architecture Board ,inertnet事物管理委员会,不知道翻译的对不对,我这边不能上网,可能是这个组织吧,Reany注)的广告尺寸,几乎包含Yahoo!的所有页面.
3 轻松创建嵌套的多列区域
大小约 4kb
所有页面的"宽"
750px 居中
950px 居中
974px 居中
100%可变的
(可以轻松的自定义,但是应该很少有机会用到自定义)
控制页面是从根节点开始的.如:
<body>
<div></div>
</body>
为什么是"div"?
"div元素,与id和class属性一起为文档增加结构,从而提供了通用的组织构造"--w3c
750px 居中 #doc
950px 居中 #doc2
974px 居中 #doc4
100%可变的 #doc3
750px居中文档
<body>
<div id="doc"></div>
</body>
以此类推
注意:
1 页面的宽是用"EM"定义的.
这也就是说,当用户放大缩小字体时,页面会自动扩展.
在必要情况下,你可以轻易锁定它.
锁定页面的宽
默认:
#doc2{
width:73.04em;
*width:71.313em;
}
重写当地文件来轻松锁定
#doc2{
width:950px;
}
2 "div #doc"可以包含任何东西.
<body>
<div id="doc">
<div id="hd"></div>
<div id="hd"></div>
<div id="hd"></div>
</div>
</body>
3令人惊讶的是,居中仍然无法完全兼容A级系列浏览器(不知道是不是这个意思,这个地方的A级浏览器是指YUI CSS能够得到最好支持的浏览器,Reany注)
对YUI和Yahoo!获得A级支持浏览器白名单
Win 2000
Win XP
Win Vista
Mac 10.4
Mac 10.5
Firefox 3.†
A-grade
A-grade
A-grade
A-grade
A-grade
Firefox 2.†
A-grade
A-grade
IE 7.0
A-grade
A-grade
IE 6.0
A-grade
A-grade
Opera 9.5†
A-grade
A-grade
Safari 3.1†
A-grade
A-grade
(实际应该为,Reany注)
较窄的列指定宽度,主框架的宽是余下的宽度
他们父节点的尺寸是毫无关联的
2列=2段内容
Two content blocks
<div id="doc">
<div class="yui-b"></div>
<div class="yui-b"></div>
</div>
Now ,identify the main block.
这样就标识出了主要区域.
<div id="doc">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
有效的模板类
<div id="doc" class="yui-t3">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
block的规则不会影响布局
重要信息放在前面会提高可访问性,易用性,并且对SEO更友好.
Grid holder: .yui-g
Units: .yui-u
<div class="yui-g">
<div class="yui-u"></div>
<div class="yui-u"></div>
</div>
Grid holder: .yui-g
Units: .yui-u
First unit .first
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
(.yui-gc 应该为 2/3--1/3,应该是作者手误,文中还有一些小地方我自己更改了,Reany注)
1 page width: div#doc
2 Templates: .yui-t1
3 Grids: .yui-g .yui-u
4 Fill any space
5 Nestable & Stackable
至此你可以安全快速的构建复杂的布局了
1 几乎全自动
2 安全的设置字体尺寸
3 其他妙处
For free:
Arial(font-family)
13px(font-size)
16px(line-height)
px尺寸会使IE丧失缩放字体的能力
总是使用百分比
h1{font-size:123.1%}
.hd h1{font-size:77%}
允许用户缩放
提供适合操作系统的字体
避免使用速记字体(自我认为类似font-family下一些字体的缩写,Reany注)
因为不同的浏览器对其解释不相同.
YUI CSS的最底层
建立干净 健壮的CSS基础
小测验:
1 strong元素的默认可视化是什么样的?
2 ul li元素的呢?
答案是: HTML没有可视化(的样式)
浏览器包含一个 browser.css 文件.(用过FF和opera的指导,自定义很多,当然IE也有,但是可定制的地方太少,Reany注)
这样很好,但是他们都各不相同
Rest.css清除这些浏览器默认样式.
详情请看reset.css(网上有具体的css reset 的文章,不过用的最多的还是YUI的CSS Reset,Reany注)
1 一个几乎微不足道的库
2 恢复reset清除的属性
3 主要针对HTML内容线形页面
使用Grid和Base的页面
pixel width/13px="em width"
"EM width"*0.975="IE's EM width"
#custom-doc{
width:46.15em;/* non-IE */
*width:45.04em;/*IE*/
}
说明
EM PX
EM:相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
PX:像素（Pixel）。相对长度单位。
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
转载于:.html
本文发布于:2024-02-02 01:49:30，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170681368940634.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
