再读《CSS权威指南》
来源:互联网 发布:socket 编程实例 编辑:程序博客网 时间:2024/05/01 13:07
- 一、Reset CSS的重要性
- 二、字体的重要性
- 三、连接
- 四、CSS中不要使用@import
- 五、不要使用CSS表达式
- 六、避免使用 filter
- 七、Bug & Hack
- 八、充分理解浮动
- 九、学习资源
时隔一年半再次把《CSS权威指南》读了一遍,受益匪浅,温故而知新!
读书笔记:CSS-Definitive-Guide.doc
收获:
一、Reset CSS的重要性
前端开发者经常容易被浏览器默认样式的差异搞晕,于是Reset CSS 出现了,而风靡一时的 *{margin:0;padding:0;}杀伤力太大无法满足需求。
目前常用的Reset CSS有四份:
- YUI CSS Reset。
- Eric Meyer 的 Reset CSS。
- Shawphy CSS Reset。
- KISSY CSS Reset。
对于Reset CSS希望大家能够选取适合自己的一份,进行修改后再使用,直接复制一份不是明智之举。
相关文章:Reset CSS 研究(八卦篇) Reset CSS 研究(技术篇) Dawn CSS Reset
二、字体的重要性
文字目前仍然是WEB中的主要信息载体,因此文字的表现形式是十分重要的,以下是我所常用的font设置:
font: 12px/1.5 Arial, "\5b8b\4f53", sans-serif;
- px:现在的大部分浏览器都支持Full Page Zoom,因此可以 放弃使用em。
- 1.5而非150%:行高1.5倍比较适合阅读;使用1.5并没使用150%是因为1.5形式是行高的“缩放因子”,能够避免文字串行。
- font set:很多人都喜欢用Tahoma,Tohama是英文Windows操作系统的默认字体,显示中英文混排很好。 但是经过测试Tohama和Arial在小字体下差距并不大,而且Tahoma在IE6中13px会显示成14px。
- “\5b8b\4f53”:这是"宋体"的unicode编码,防止中文乱码,同样“微软雅黑”的unicode编码就是“\5FAE\8F6F\96C5\9ED1”。
相关文章:不给line-height加单位要成为一种习惯 网页设计中的默认字体 是时候不用考虑基于字体大小(em)的设计了 谈谈网页设计中的字体应用(1-4) Font Set
三、连接
- HTML语言之所以被称作超文本标记语言,就和超链接密不可分,优秀的<a>会增加用户停留的时间。
- 超链接字体颜色要明显区别于普通文本。
- title属性尽量指定,有时由于连接文字过长,要进行截断,如果能够在title中显示完整的链接文本是一件很友好的事情。
- 连接默认无下划线,:hover时添加下划线。
对于连接的处理,有一篇更好的文章:连接,怎么办?
四、CSS中不要使用@import
@import 和 <link>是常用的两种引入CSS文件的方式,但是这两种方式却有差比别,具体原因如下:
- 使用@import会增加页面的总体加载时间。
- IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间,阻碍页面渲染。
相关文章:don’t use @import 中文翻译
五、不要使用CSS表达式
- CSS表达式只有IE支持。
- 表达式的计算频率非常高,因此会占用很多内存。(备注:此问题可以解决...)
相关文章 :Avoid CSS Expressions
六、避免使用 filter
在IE中使用filter改变元素的透明度,浏览器占用的内存会增加5M左右。为了避免这个问题最好使用透明图片替代。
当然,如果要用JavaScript写动画这个问题就无法避免了。
七、Bug & Hack
对于前端来讲,Hack是一种态度! 永远 不要讨厌Bug,学习和研究Bug并不是为了应用Bug,而是避免Bug。
八、充分理解浮动
在CSS中存在三个流,即普通文档流、浮动流、定位流(Position,自己起的名字^o^),这三个流控制着整个页面的布局。
关于浮动的一些琐碎笔记:CSS- Float.doc
九、学习资源
国内资源:
- 秦歌:随网之舞
- 玉伯:岁月 如歌
- 明城
- 圆心:怿飞's Blog
- 臭鱼的交互设计
- 蓝色理想
- 园子里也有很多优秀博客....
- ......
国外资源:
- Eric Meyer:HTML、CSS和Web 标准领域国际公认专家。
- css-discuss.org:一个优秀CSS邮件列表网站。
- Position Is Everything:专门研究CSS布局兼容性与Bug问题的网站。
- Estelle Weyl:一名女前端工程师,CSS属性支持一览表 、CSS选择器一览表。
- ......
The End
原文链接地址:http://www.cnblogs.com/rainman/archive/2009/09/07/1561836.html
- 再读《CSS权威指南》
- 再读《CSS权威指南》
- 再读《css权威指南》
- 再读Maven权威指南
- CSS权威指南
- 《CSS权威指南》--附录
- 《CSS权威指南》
- CSS权威指南 笔记
- 《CSS权威指南》读书笔记
- CSS权威指南-@import
- CSS权威指南-特殊性
- CSS权威指南-继承
- CSS权威指南-层叠
- 《css权威指南》笔记
- 《css权威指南》笔记
- css权威指南学习笔记
- 《CSS权威指南》笔记-选择器
- 《CSS权威指南》笔记-样式
- 零起步6-CentOS6.3源码安装mysql5.5.28
- java守护进程
- JFreeChart详细使用说明,附案例
- Android FactoryTest框架
- ARM9_S3C2440学习(七)SDRAM学习总结
- 再读《CSS权威指南》
- jquery easyui datebox 的使用 .
- 一致性哈希机器在分布式中的作用
- xml DTD约束
- [Java GUI] Swing中JList和JRadioButton的联合使用
- 伤别
- RtlInitializeGenericTable系列函数的总结
- Python 摸索(一) class的初步学习
- 虚拟化技术应用现状