各浏览器的默认CSS
时间:2010年07月28日作者:愚人码头查看次数:11,782 views评论次数:12
在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题,依靠的就是看各浏览器的默认CSS,然后重置它,所以很多时候浏览器的默认css还是很有用的。
各浏览器的默认CSS可以在这里http://www.iecss.com/找到,贪心一下,把这些样式都保存了一份:
专注前端开发,关注用户体验
在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题,依靠的就是看各浏览器的默认CSS,然后重置它,所以很多时候浏览器的默认css还是很有用的。
各浏览器的默认CSS可以在这里http://www.iecss.com/找到,贪心一下,把这些样式都保存了一份:
一、css中一些技术、技巧
1.Reset CSS
知道Reset CSS是什么吗?通常情况下,它也被写成CSS Reset,即重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。前端开发工作中有一款好的、统一的Css Reset将提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。网上有很多Reset CSS。(转载请注明出处:WEB前端开发 http://www.css88.com/)
大家可以看看这里:http://www.css88.com/archives/541 和 http://www.css88.com/archives/614
2.CSS Sprites
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;个人认为能CSS Sprites能减少图片的字节,我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和,原因在于每张图片都有额外的图片信息隐藏在图片中,这样多张图片合并,就能节省些字节;
大家可以看看这里:http://www.css88.com/archives/756
3.CSS 选择器
选择器,或者选择符,selector,是构建整个CSS的基础。CSS 选择器能使我们很好的将样式归类。减少样式的耦合,进行区块话管理,如果能实现前端页面的模块化开发,那么CSS 选择器也就更有用武之地了。(转载请注明出处:WEB前端开发 http://www.css88.com/)
例如:
.news{…}
.news h3{…}
.news ui li{….}
这样就很容易维护这个news区块;
大家可以看看这里:http://www.css88.com/archives/1635
4.CSS 渲染效率
CSS渲染规则是:在一条css中,css选择器是从最右边开始之后依次向左移动的,直到它不匹配CSS规则或匹配错误;所以我们的工作重点应该放在最右侧的CSS选择器来匹配大量的页面的元素。(转载请注明出处:WEB前端开发 http://www.css88.com/)
大家可以看看这里:http://www.css88.com/archives/1472
5.haslayout
IE6下bug很多源于haslayout;haslayout 是一个非常有必要彻底弄清除的概念;
大家可以看看:http://www.css88.com/archives/tag/haslayout

CSS作为Web标准的一部分,已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言,但是由于种种原因,真正精通CSS却绝非易事。在使 用CSS开发网站时,会遇到形形色色的浏览器bug和不一致问题,而解决方案又五花八门,往往让使用者感觉千头万绪、不知从何着手。
本书将最 有用的CSS技术汇总在一起,还总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,弥补了一直以来CSS图书的空白。正因如此,英文版出版 后,一时洛阳纸贵,多次重印,并迅速登上Amazon图书排行榜前列,最高时甚至与哈里·波特并驾齐驱,创造了计算机图书的销售奇迹。
本书最后的两个实例研究将书中讨论的许多技术组合起来,使读者不仅理解工作原理,而且能够学到如何将它们应用在实际项目中,迅速精通CSS,成为CSS专家。
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格 设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识欠缺不可或 缺的参考书。
本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。
关于使用line-height的基本语法和单行文本的垂直居中问题可以查看这里,原文地址: http://www.css88.com/archives/1304
line-height的属性值:
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 例如:line-height:1.5;
length 设置固定的行间距。 例如:line-height:18px;
% 基于当前字体尺寸的百分比行间距。 例如:line-height:150%;
line-height是可以继承的,由于这个特性,子元素就可以不用重复定义line-height了,假设一段文字的line-height:200%;font-size:12px;那么行高应该是24px;而当装在这段文字的容器有子元素的时候,子元素会继承line-height:200%的属性。但是假设这个子元素的字体改变的时候,比如字体一下子到font-size:54px;的时候,比肯能回想到行高应该是108px(54*200%),其实错了。(转载请注明出处:WEB前端开发 http://www.css88.com/)
例如代码:
<div style=" line-height:200%;font-size:12px;"><code>line-height:200%;font-size:12px;</code> <pre style="font-size:54px;"> line-height的继承问题 line-height的继承问题 line-height的继承问题</pre></div>
我们看看截图:
在前端开发中经常用line-height定义行高和单行文本的垂直居中,当然偶尔也配合的做其他的垂直居中。
先来看看基本的语法和属性值:
语法:
line-height : normal | number | length | %
参数:
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。说明:
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
如行内包含多个对象,则应用最大行高。此时行高不可为负值。
对应的脚本特性为lineHeight。
————————————————————–
下面说说再说说line-height单行文本的垂直居中问题
先写个height、line-height都为25px,背景为红色的元素,设置文字为12px。然后量下,文字上面是6像素,文字下面是8像素。。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px(加下减上);为偶数时刚好相反:加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变,这能说明什么呢?还不太肯定,继续同时减小heighe、line-height直到一个合适的值:14px,这时候我们可以看到文字和下划线都是完整的,继续减小1px。这时IE已经不按我们刚才发现的规矩办事了,文字上面被截去1px,这样看来14px应该是IE认为的一个临界点,此时整体高低减去文字高度刚好为3px。会不会?。。。因为这时文字是顶这上边界的,我们把文字增加到2行,发现了吧,第二行的文字不是顶这第一行的下划线的,而是有1px的距离。3px果然是下划线的高度。
其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为30px那这时2px会变为3px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释:heighe、line-height同为30px的时候上下空白区域高度差是3px,然后height、line-height同时加1px(就是31px),这1px应该是加到上部空间里,所以3pxbug会变成2pxbug。
IE6-IE8都有这个问题,firefox,Opera,Safari也都存在这个问题,
比如:
<div style="height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>
![]()
■Amazon第一CSS畅销书
■最有用的CSS技术汇总
■解密业界大师绝技
CSS作为Web标准的一部分,已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言,但是由于种种原因,真正精通CSS却绝非易事。在使用CSS开发网站时,会遇到形形色色的浏览器bug和不一致问题,而解决方案又五花八门,往往让使用者感觉千头万绪、不知从何着手。
本书将最有用的CSS技术汇总在一起,还总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,弥补了一直以来CSS图书的空白。正因如此,英文版出版后,一时洛阳纸贵,多次重印,并迅速登上Amazon图书排行榜前列,最高时甚至与哈里·波特并驾齐驱,创造了计算机图书的销售奇迹。(转载请注明出处:WEB前端开发 http://www.css88.com/)
本书最后的两个实例研究将书中讨论的许多技术组合起来,使读者不仅理解工作原理,而且能够学到如何将它们应用在实际项目中,迅速精通CSS,成为CSS专家。
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识欠缺不可或缺的参考书。(转载请注明出处:WEB前端开发 http://www.css88.com/)
本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。
继续阅读:《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载»
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题),原文地址: http://www.css88.com/archives/421;
IE6 BUG大全: http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:
HTML代码:
<ul> <li><a href="#">第1条连接</a></li> <li><a href="#">第2条连接</a></li> <li><a href="#">第3条连接</a></li> </ul>
大家知道页面要使用外部css文件的方式有两种,一种是引用(link),例如:<link rel=’stylesheet’ href=’a.css’>;另一种是导入(@import),例如:<style>@import url(‘a.css’);</style>;两者引用的方式在页面上的展现效果却是一样的,但是两者又有着很重大的区别:就是页面的性能问题!
当然如果站点的流量没达到一定的流量(比如说10万ip或者更大),我觉得用link 或者 @import或者都是无所谓的,只要你维护方便。
假设我们一张页面使用了两个样式文件:a.css和b.css;
第一种方式,两个都导入:
<style>
<!--
@import url('a.css');
@import url('b.css');
-->
</style>
我们可以用使用工具分析一下网页的加载情况,如图:
即两个css同时加载;
CSS Naked Day,也称CSS裸奔节或CSS裸奔日,2009年4月9日是第四界css裸奔节。本站也参加了这次裸奔节!
CSS裸奔节就是将这整站的css样式都去掉,这样所有的布局,颜色,背景什么的就都没有了(除非你使用table布局),只剩下html实体显示出来,起源好像是比较无聊的想法,就是剥去css的外衣,让大家看看你的(x)html代码是否工整,但是时至html语义被极力推崇的今日,CSS裸奔节就给外的有意义!
不管CSS裸奔节的原始意义是什么,或许只是一个网络恶作剧,但是从第一届CSS裸奔节(2006年4月5日)开始,CSS裸奔节的意义在于:推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。
最新评论
可惜不能辞工。。。
Post:2012-05-14 22:24:43群都满了,求入群。 319031954.
Post:2012-05-14 16:41:39可惜不在广州
Post:2012-05-12 16:10:54厉害,受益匪浅!
Post:2012-05-12 13:48:02又在招人。可惜不是我。
Post:2012-05-12 11:50:12很好很好verygood
Post:2012-05-10 10:58:33json官方的定义是 A collection of »
Post:2012-05-09 20:23:49前端爱好者求入群啊 作品地址:http »
Post:2012-05-09 14:32:41