CSS YUI reset

CSS YUI resetYUIreset雅虎重置css模板

一、YUI简介(了解内容)

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

YUI首页

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

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的框架,他只是一个样式表嘛 😃

二、 YUI reset (重点内容)

本篇文章主要介绍YUI的reset CSS

The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon. With CSS Reset loaded, write explicit CSS your project needs.

基础CSS Reset移除了浏览器提供的HTML元素的(默认的)不一致的样式。他创建了一个可靠统一的构建基础,随着CSS Reset加载,可以书写写明确的你的项目需要的CSS样式。

举个例子,如下图所示,p元素默认样式margin,Google览器是20px,Firefox浏览器是16px。这样的话,相同的代码在不同的浏览器中渲染效果可能不一致,这是我们不希望的结果。因此需要重置(reset)样式,保证显示效果一致。

Google浏览器渲染效果
在这里插入图片描述

Firefox浏览器渲染效果

在这里插入图片描述

使用方式

方式一:引入在线的css

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

方式二:在本地添加css

访问上面的网址http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

内容如下

/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */

html{ 
   color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ 
   margin:0;padding:0}table{ 
   border-collapse:collapse;border-spacing:0}fieldset,img{ 
   border:0}address,caption,cite,code,dfn,em,strong,th,var{ 
   font-style:normal;font-weight:normal}ol,ul{ 
   list-style:none}caption,th{ 
   text-align:left}h1,h2,h3,h4,h5,h6{ 
   font-size:100%;font-weight:normal}q:before,q:after{ 
   content:''}abbr,acronym{ 
   border:0;font-variant:normal}sup{ 
   vertical-align:text-top}sub{ 
   vertical-align:text-bottom}input,textarea,select{ 
   font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{ 
   color:#000}#yui3-css-stamp.cssreset{ 
   display:none}

新建一个css文件,例如reset.css把内容添加到里面。

今天的文章CSS YUI reset分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/27709.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注