正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到:

*{
   margin: 0;
   border: 0;
   padding: 0;
 
}

这也是一种CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,以减少资源浪费,所以推荐学习YUI Reset CSS。

YUI Reset CSS

Q:什么是YUI Reset CSS?
A:顾名思义,其是 Yahoo! User Interface Library出品的一个CSS

Q:它的作用是什么?
A:作用很单纯,重置(reset)浏览器的默认样式。例如ul li 在IE 和Firefox下的默认margin值是不同的,使用YUI Reset CSS可以让各个浏览器默认值相同,这样页面各个元素默认显示的效果就相同了。

Q:如何使用?
A:粘贴代码到你的CSS文件的最上部分。

以上都是简单的使用。下面来说说为什么要自定义。
我们拿strong标签来说明,它实际的效果是加粗显示。但是在YUI Reset CSS 中strong标签失去了加粗的作用。
从页面显示效果来看,strong并没有起到作用,我个人觉得这不是很合理,大多数情况下我们加strong就是为了使字体加粗显示,如果你需要其他的效果完全可以在CSS中单独定义。这种情况在站点比较大的情况下尤为重要,所以我觉得还原它们原有的表现比较好。同样的,还有em(用来斜体显示)。
通常,我都会把strong>和em从YUI Reset CSS中去除。当然最终还要看个人习惯自定义你的YUI Reset CSS。

附:YUI Reset CSS [ 原汁原味,未经自定义 :-) ]

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,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;
}

YUI Reset CSS 官方链接:http://developer.yahoo.com/yui/reset/

参考学习链接http://www.lofter.com/postentry?from=search&permalink=98680_254ff0    http://www.nowamagic.net/librarys/veda/detail/732

另外相关博文链接http://www.blogjava.net/shenang/archive/2009/04/21/266712.html

http://every-best.iteye.com/blog/808345

英文:

Y! DN

我是一只小菜鸟,小呀嘛小菜鸟,有用求点赞!!!

YUI Reset CSS (学习摘抄)的更多相关文章

  1. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  2. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. Reset CSS:只选对的,不选"贵"的

    玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...

  5. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  6. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  7. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  8. 打造自己的reset.css

    http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...

  9. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

随机推荐

  1. 修改phpmyadmin文件的最大上传大小

    修改php.ini 1.file_uploads on 是否允许通过HTTP上传文件的开关 2.upload_tmp_dir 文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹 ...

  2. C++经典编程题#4:单词翻转

    总时间限制:  1000ms  内存限制:  65536kB 描述 输入一个句子(一行),将句子中的每一个单词翻转后输出. 输入 只有一行,为一个字符串,不超过500个字符.单词之间以空格隔开. 输出 ...

  3. 我的工具箱之VNC

    下载地址:http://pan.baidu.com/s/1bovEoZ9 这个工具可以连接到Linux并进行可视化操作. 如何搭建VNC环境请见 在centOS上安装VNC 2016年2月26日11: ...

  4. iOS8 UIAlertController弹出框中添加视图(例如日期选择器等等)

    UIDatePicker *datePicker = [[UIDatePicker alloc] init]; datePicker.datePickerMode = UIDatePickerMode ...

  5. saltstack之(八)配置管理部署LAMP

    场景:公司有10台服务器需要安装lamp测试环境,使用saltstack编写state文件进行批量部署,可以提高工作效率,减少人为出错的可能性,保证环境的一致性. saltstack之配置管理lamp ...

  6. PHP接口类interface的正确使用方法

    对于那些初学PHP语言的人来说,对于PHP的接口类也许了解的还不是很深入,接下来我们就来具体讲述PHP接口类interface的使用方法. 如何正确运用PHP XMLReader解析XML文档 深入解 ...

  7. redsocks 配合iptables设置全局sockts5代理

    参照:http://kuaile.in/archives/1370 架构图: 第一步,安装redsocks 1. 安装依赖 yum install libevent-devel 2. 下载编译 git ...

  8. DG - dataguard trouble shooting的相关视图

    •V$DATAGUARD_STATS:显示dataguard统计信息 备库 SQL> select * from v$dataguard_stats; NAME VALUE UNIT TIME_ ...

  9. leetcode96 Unique Binary Search Trees

    题目: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For e ...

  10. 转:python webdriver API 之浏览器的操作

    1.1.浏览器最大化在统一的浏览器大小下运行用例,可以比较容易的跟一些基于图像比对的工具进行结合,提升测试的灵活性及普遍适用性.比如可以跟 sikuli 结合,使用 sikuli 操作 flash.# ...