时隔一年半再次把《CSS权威指南》读了一遍,受益匪浅,温故而知新!
读书笔记:CSS-Definitive-Guide.doc

收获:

一、Reset CSS的重要性

前端开发者经常容易被浏览器默认样式的差异搞晕,于是Reset CSS 出现了,而风靡一时的 *{margin:0;padding:0;}杀伤力太大无法满足需求。

目前常用的Reset CSS有四份:

  1. YUI CSS Reset。
  2. Eric Meyer 的  Reset CSS。
  3. Shawphy CSS Reset。
  4. KISSY CSS Reset。

对于Reset CSS希望大家能够选取适合自己的一份,进行修改后再使用,直接复制一份不是明智之举。

相关文章:Reset CSS 研究(八卦篇)    Reset CSS 研究(技术篇)   Dawn CSS Reset

二、字体的重要性

文字目前仍然是WEB中的主要信息载体,因此文字的表现形式是十分重要的,以下是我所常用的font设置:

font: 12px/1.5 Arial, "\5b8b\4f53", sans-serif;

  1. px:现在的大部分浏览器都支持Full Page Zoom,因此可以 放弃使用em。
  2. 1.5而非150%:行高1.5倍比较适合阅读;使用1.5并没使用150%是因为1.5形式是行高的“缩放因子”,能够避免文字串行。
  3. font set:很多人都喜欢用Tahoma,Tohama是英文Windows操作系统的默认字体,显示中英文混排很好。 但是经过测试Tohama和Arial在小字体下差距并不大,而且Tahoma在IE6中13px会显示成14px。
  4. “\5b8b\4f53”:这是"宋体"的unicode编码,防止中文乱码,同样“微软雅黑”的unicode编码就是“\5FAE\8F6F\96C5\9ED1”。

相关文章:不给line-height加单位要成为一种习惯    网页设计中的默认字体     是时候不用考虑基于字体大小(em)的设计了    谈谈网页设计中的字体应用(1-4) Font Set

三、连接

  1. HTML语言之所以被称作超文本标记语言,就和超链接密不可分,优秀的<a>会增加用户停留的时间。
  2. 超链接字体颜色要明显区别于普通文本。
  3. title属性尽量指定,有时由于连接文字过长,要进行截断,如果能够在title中显示完整的链接文本是一件很友好的事情。
  4. 连接默认无下划线,:hover时添加下划线。

对于连接的处理,有一篇更好的文章:连接,怎么办?

四、CSS中不要使用@import

@import 和 <link>是常用的两种引入CSS文件的方式,但是这两种方式却有差比别,具体原因如下:

  1. 使用@import会增加页面的总体加载时间。
  2. IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间,阻碍页面渲染。

相关文章:don’t use @import    中文翻译

五、不要使用CSS表达式

  1. CSS表达式只有IE支持。
  2. 表达式的计算频率非常高,因此会占用很多内存。(备注:此问题可以解决...)

相关文章 :Avoid CSS Expressions

六、避免使用 filter

在IE中使用filter改变元素的透明度,浏览器占用的内存会增加5M左右。为了避免这个问题最好使用透明图片替代。
当然,如果要用JavaScript写动画这个问题就无法避免了。

七、Bug & Hack

对于前端来讲,Hack是一种态度! 永远 不要讨厌Bug,学习和研究Bug并不是为了应用Bug,而是避免Bug。

八、充分理解浮动

在CSS中存在三个流,即普通文档流、浮动流、定位流(Position,自己起的名字^o^),这三个流控制着整个页面的布局。

关于浮动的一些琐碎笔记:CSS- Float.doc

九、学习资源

国内资源:

  1. 秦歌:随网之舞
  2. 玉伯:岁月 如歌
  3. 明城
  4. 圆心:怿飞's Blog
  5. 臭鱼的交互设计
  6. 蓝色理想
  7. 园子里也有很多优秀博客....
  8. ......

国外资源:

  1. Eric Meyer:HTML、CSS和Web 标准领域国际公认专家。
  2. css-discuss.org:一个优秀CSS邮件列表网站。
  3. Position Is Everything:专门研究CSS布局兼容性与Bug问题的网站。
  4. Estelle Weyl:一名女前端工程师,CSS属性支持一览表  、CSS选择器一览表。
  5. ......

The End

转载于:https://www.cnblogs.com/rainman/archive/2009/09/07/1561836.html

再读《CSS权威指南》相关推荐

  1. 再读《SAP德国造》

    再读<SAP德国造> 这本书早在2003年已经阅读.书名<SAP德国造>,但这本书确实是中国造,作者并非SAP人,也非德国人.但这本书还是有一定水准的,把SAP这个低调的德国公 ...

  2. 一个 SAP 开发工程师在 SAP 德国总部出差的见闻系列 2:Walldorf 附近的小旅馆

    本系列第一篇文章 一个 SAP 开发工程师在 SAP 德国总部出差的见闻系列 1:出差 ≠ 公费旅游 发出来之后,有读者留言:德国房子怎么这么矮啊? 这是因为,SAP 德国总部,坐落在距离法兰克福约1 ...

  3. 【学术相关】直博和读完硕士再读博,在能力上的差距有多大?

    点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 来自:机器学习初学者 直博和读完硕士再读博,在能力上的差距有多大? 高赞回答一 作者: ...

  4. 【学术】直博和读完硕士再读博,在能力上的差距有多大?

    直博和读完硕士再读博,在能力上的差距有多大? 高赞回答一 作者:胖博士 链接:https://www.zhihu.com/question/425860957/answer/1549964990 能力 ...

  5. 人工智能德国造 “弱AI“强势登场

    https://www.toutiao.com/a6673249163565597191/ 2019年德国政府用于AI研发的预算为5亿欧元.在德国联邦政府近期正式发布的<德国联邦政府人工智能战略 ...

  6. 老问题,SQL保存图片。保存以后再读出来,发现stream的大小不一致。虽然老,但没搜到结果。...

    老问题,SQL保存图片.保存以后再读出来,发现stream的大小不一致.虽然老,但没搜到结果. Delphi / Windows SDK/API http://www.delphi2007.net/D ...

  7. 讨论下直博和读完硕士再读博,在能力上的差距

    直博和读完硕士再读博,在能力上的差距有多大? 高赞回答一 作者:胖博士 链接:https://www.zhihu.com/question/425860957/answer/1549964990 能力 ...

  8. 负样本的艺术,再读Facebook双塔向量召回算法

    负样本的艺术,再读Facebook双塔向量召回算法 Facebook这篇Embedding召回的论文,之前已经有几篇文章涉及过了,分别是<Embeding-based Retrieval in ...

  9. 32岁武汉硕士毕业4年后重新高考,考上本硕需再读8年:“不是一时冲动”

    全世界只有3.14 % 的人关注了 爆炸吧知识 9月5日,程传坤收到了湖北中医药大学的录取通知书. 7月8日下午5时10分,32岁的程传坤走出湖北省武汉市新洲一中考点,一脸轻松,拿着准考证特意在新洲一 ...

  10. 聊聊内卷之下,直博和读完硕士再读博该怎么选择?

    大家好,我是写代码的篮球球痴,转发一篇考研读博的文章,希望对大家求学生涯有所帮助. 大家好,我是千与千寻,在上一篇推送之中,我们讨论了,五年之内博士是否会出现内卷,阅读量相当的高啊,在那篇推送中,我说 ...

最新文章

  1. js设计模式每次10分钟:字面量和构造函数模式对比
  2. win10 64位下运行汇编
  3. 2018年9月份GitHub上最热门的Python项目
  4. 树莓派设置NTP同步
  5. 红队中易被攻击的一些重点系统漏洞整理
  6. JUnit 5 –条件
  7. PL/SQL TOAD 不安装Oracle客户端连接数据库的方法
  8. 微信公号“架构师之路”学习笔记(二)-高可用高并发负载均衡的架构设计(冗余+自动故障转移、水平扩展等)
  9. 哈佛引用格式(Harvard referencing system)
  10. L1-078 吉老师的回归 (15 分)
  11. 【寒江雪】SSL通信详解
  12. MySQL数据库实操教程(25)——权限管理
  13. 微信小程序setData视图不更新的问题
  14. 智慧公厕智能镜子厕所管理系统一站式服务
  15. web linux 桌面,Ubuntu无桌面进行Web浏览器测试
  16. EC MCAD Connector 3010 AdminGuide-2
  17. DB2 For AS400 字符函数
  18. 易搜资料v1.2.8
  19. 2015年中国网络管理技术大会落幕 锐捷RIIL摘获“IT运维管理首选品牌”
  20. NOip2000税收与补贴问题

热门文章

  1. 天翼校园客户端“中毒”,江苏、广东、湖南成重灾区
  2. Android 实现微信扫码登陆功能-详细教程
  3. 谷歌浏览器的前端代码调试
  4. linux 下安装wps
  5. 2021年上半年软考真题网络工程师真题及答案解析
  6. WiFi密码破解之Aircrack实战演示
  7. Linkedin领英如何避免封号
  8. 俄罗斯方块python代码
  9. 文武双全!为什么数据分析师需要既懂业务又懂技术
  10. 《深入理解Nginx》 学习笔记(二)