YUI学习笔记 – CSS Rest、Base、Font以及Grid-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

YUI学习笔记 – CSS Rest、Base、Font以及Grid

简介: YUI不仅为我们提供了一个强大的JS框架,同时还提供了几个CSS的框架,分别是Reset、Base、Font以及Grid。通过在页面中引用这几个CSS,可以让我们的前端开发工作事半功倍,达到快速将美工图转化为实际产品、并且能够保证在绝大多数浏览器上的正常表现。

YUI不仅为我们提供了一个强大的JS框架,同时还提供了几个CSS的框架,分别是Reset、Base、Font以及Grid。通过在页面中引用这几个CSS,可以让我们的前端开发工作事半功倍,达到快速将美工图转化为实际产品、并且能够保证在绝大多数浏览器上的正常表现。今天我们就来了解一下这几个CSS。

YUI这几个CSS存在于两个版本的YUI中(YUI2和YUI3)。本文的介绍以YUI3版本为例。

1、YUI3 Css Reset。

做过前端的朋友都知道,目前众多的浏览器,对于HTML的解析并不是完全一样。比如 li ,这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在各个浏览器下的不同而设计的。这样,我们在 Build 我们的页面的时候,就是建立在一个完全一致的基础上,能够非常方便的让我们按照自己的想法去进行排版布局。通过这个例子我们可以看到,使用了 Css Reset之后的样式会是什么样的。

YUI3的Css Reset还提供了局部的Reset样式的功能,在我们想对某一容器内的元素(而不是整个页面)进行样式统一时使用。

2、YUI3 Css Base。

Css Base是一个补充YUI的核心CSS框架的文件,Css Base 为符合 A-Grade Browsers的浏览器提供了一个标准的基础。这个文件也可以作为我们扩展自己CSS框架的基础。同样Css Base也有全局(Global)和局部(Contextual)的选择。

3、YUI3 Css Fonts。

Css Fonts保证了跨浏览器的字体一致,即使在用户对字体进行调整情况下也是如此。不管是标准模式(Standard)还是怪异模式(Quirks),只要是A-Grade Browsers 都支持。

4、YUI3 Css Grids。

Css Grids 提供了一套基本的、简单的布局系统。我们使用CSS进行布局时,不需要再为两栏、三栏以及各种分栏形式而烦恼,使用Css Grids可以快速的实现。YUI3 Css Grids中对于命名规则进行了改变,这与YUI2 Css Grids中有很大的不同。不过基本原理还是一样的熟悉了任何一个,就能够方便快速的进行页面的布局。Css Reset、Css Font、Css Grids三个合起来,构成了YUI CSS的一个核心。我们可以一次将这三个文件引入进来。当然,现在YUI3的Css Grids还在Beta阶段,还不是太完善,如果我们需要一个成熟的解决方案,可以考虑使用YUI2的Css Grids,使用YUI2的Css Grids并不会影响我们使用YUI3的框架,他只是一个样式表嘛 :)

参考资料:
1、YUI CSS Reset
2、YUI CSS
3、A-Grade Browsers

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章