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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

vue.js 的组件感觉比react的直观&&面试相关的七个实例

今天的标题有点长,没办法,文章内容都在标题上呢。 //////// 今天上午把vue的组件定义讲完了。组件嘛,向外是扩展功能,向内是封装分治,说来说去都是这些东...

3186
来自专栏Android机器圈

OpenGL ES学习001---绘制三角形

PS:OpenGL ES是什么? OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL三维图形 API 的子集,针对...

37013
来自专栏互联网杂技

基础JavaScript装逼指南

本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧。 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,l...

3535
来自专栏带你撸出一手好代码

JavaScript消除游戏实现思路讲解

之前讲解过一款JavaScript贪食蛇游戏详细的设计与实现,但是以那种方式进行描述 , 整篇文章会显得复杂冗长,除非深入细致的阅读和思考,否则文中内容并不容易...

3935
来自专栏HansBug's Lab

算法模板——并查集 2(支持快速即时查询本连通块内容,纯原创!)

实现功能:输入N,现在有N个数;接下来输入任意行,如果是"1 x y"则表示把x和y所在的块合并;如果是"2 x"则表示输出x所在的块的全部内容 原理:其实主要...

3216
来自专栏菜鸟前端工程师

JavaScript学习笔记007-js的执行

1056
来自专栏菜鸟前端工程师

JavaScript学习笔记004-if判断0for循环

1183
来自专栏北京马哥教育

Python 循环嵌套

? 文 | 云豆 来源 | 菜鸟教程 云豆贴心提醒,本文阅读时间3分钟,文末有秘密! Python 语言允许在一个循环体里面嵌入另一个循环。 Pyt...

42810
来自专栏JavaQ

写这样的方法让人很反感

写作文要做到段落清晰、每段思路流畅、每段主旨明确,要有一条清晰的线穿插整篇内容,编写程序代码和写作文是一个套路。一个类就像一篇小作文,类的单一职责就是小作文要叙...

3467
来自专栏小樱的经验随笔

Codeforces Round #408 (Div. 2)(A.水,B,模拟)

A. Buying A House time limit per test:2 seconds memory limit per test:256 megaby...

2947

扫码关注云+社区

领取腾讯云代金券