读《Pro CSS and HTML Design Patterns》第二章

第二章 HTML 设计模式

看不下去了。。

还是先做点东西吧。。。

读《Pro CSS and HTML Design Patterns》第一章

    一次在Apress的网站上看到 《Pro CSS and HTML Design Patterns》这本书，当时就到处去找，但是都没有找到，可能是因为刚出版不久吧，其实我一直都是下载电子版的，嘿嘿。

 

    前不久才下载到这本书，却搁置了好久都没有看，我电脑里的电子书容量是用G做单位的，但是我看过的加起来肯定没有100M，浪费啊。不过也不太可能把这么多的东西都看完，如果真的要看的话，可能到我挂掉也看不完的:)。那么我就开始看这本书吧。

    以前只在一些编程书籍里看到过设计模式，像HTML和CSS这些标记语言其实连脚本语言都不算的。这促使我想看看这个HTML和CSS的设计模式是什么样的。

=================================我是分割线==================================

 

第一章

CSS看起来很简单，只有一些简单的语法，一些属性，但是学习CSS不止是学习一些隔离属性。

像width属性就有很多的意思，这取决于它和什么属性一起使用以及这个属性赋给那个对象。比如width 对inlines元素根本就没有用，width: auto 会让float元素自动收缩到它的内容的宽度。

CSS中优先级的由高到低顺序为：

1. 含有!import的样式有最高的优先级
2. 直接编写在标签中的style属性
3. 接下来就是含有一个或多个ID选择器的样式比如： #first{/**/} 的优先级就高于 *.second{/**/}的优先级
4. 第四个就是含有一个或多个类选择器的样式比如 .first{}的优先级高于div{}的优先级
5. 第五个就是含有一个或多个元素选择器的样式比如： div{}的优先级高于 *{}的优先级
6. 通配选择器的优先级最低，任何样式都可以覆盖。*{}为通配选择器

 

调试CSS

    该书建议的调试CSS步骤：

1. 验证HTML文档。 这样可以确认没有错误的HTML语法错误导致浏览器错误的解释CSS
2. 验证CSS文档。
   • 确保度量单位没有错误。确保度量大小和单位之间没有空格比如：100 %是错误的
   • 确保只有一个冒号（:）在属性和值直接是可以有空格的
   • 确保每个属性对后都有分号来结束，否则下一条属性将会失效
3. 检查CSS解释错误。Dreamweaver等工具可以直观的显示语法错误。。。
4. 检验选择器选择到并且只应用到你要应用的对象，可用通过给样式添加border 属性或者outline属性（不支持IE7.0）
5. 仔细检查出错的层叠样式的优先级。
6. 检查元素，类和ID的大小写。因为XHTML是大小写敏感的。可是始终保持小写来避免这样的问题。
7. 仔细检查简写属性，比如border, background等属性。他们可能会复写之前定义的border-color，background-img等的值。
8. 确认浏览器加载了所有的样式。
9. 尽量避免使用@import
10. 确认样式表是以你想要的顺序加载的。

应该明白了

  昨天在宿舍一天什么事情都没有做，除了找了个blog客户端，感觉这样写日志轻松一点，有什么想写的直接写就是了，用不着非得打开浏览器，说实话，现在有点讨厌浏览器了，因为每次打开浏览器我都不知道要干吗，除了那几个网站我根本就没有其他的网站可以浏览，不知道要干吗，想安下心来把一件事情做好。

  踏踏实实把该做的做好！