读《精通CSS：高级Web标准解决方案》

    因为最近在看《精通CSS:高级Web标准解决方案》，做了一些记录。

---

  因为很多开发人员对于XHTML2的开发不满，于是出现了WHATWG和W3C的分裂，WHATWG决定开发自己的规范，也就是HTML5,而W3C的XHTML2标准已被放弃，HTML5成为了W3C的正式标准。XHTML和HTML的区别就是XHTML严格遵守XML编码规定，浏览器会依据文档的MIME类型来解析文档，如果不遵循规范会导致错误，而HTML却是很宽松的。

     Doctype类型和浏览器模式，DTD（文档定义类型）是一组机器可读的规则，它们定义XML或HTML的特定版本中运行有什么，不允许有什么。浏览器会对页面进行相应的措施，并决定采取何种行为。浏览器会通过分析页面的Doctype来了解使用哪个DTD。

 

添加在所有站点上都使用的常用规则，形成某种原型CSS文件，这可以节省更多的时间。

 

模式组合是一个页面或一系列页面，他们使用当前的样式表显示站点上可能吸纳时的每种样式排列组合，从标题级别和文本样式直到特定的内容和布局类型。

 

最基本的样式指南应该描述一般性设计指南，比如rue处理标题和其他排版元素，网格结构的设计方式是什么，以及使用哪个调色板。

 

IE7和更低版本不支持在除链接之外的其他元素上使用伪类选择器，但是所有现代浏览器都支持。

 

链接应该只用于get请求，决不要用于post请求。

 

把表单反馈信息写在label标签里，然后绝对定位更好？

 

CSS框架试图通过在标记和表现之间建立强耦合来简化CSS布局，但是这种耦合正式我们抛弃基于表格布局的主要原因。

 

要想创建可伸缩且容易维护的CSS相同，首先应该检查设计，寻找重复的模式，这包括页面结构中的模式或在站点中等元素反复出现的方式。在这个阶段，不应该太关注表现方式，而是应该注意结构和意义。

1，先把页面划分为大的结构性区域，比如容器，页眉，页面区域和页脚。

2，然后注意力转移到内容区域本身，开始建立网格结构。寻找共同的特征而不是视觉表现。

3，然后在各个区域中寻找不同的布局结构，是否想要把某些信息分成两列，三列或四列。

4，结构设计完之后，现在可以开始关注不同类型的内容。给每个内容块起一个有意义的名称，然后分析他们的关系。

5，查看每个内容块的结构，看看不同的类型中是否有共同的模式，不如公告和新闻其实和一样的。

6，找出模式并确定命名约定之后，最好马上开始定义将使用的元素，这是有好处的。

 

混杂模式中IE5.x和IE6不支持margin:auto声明，IE可以设计text-align：center确定居中，

 

用CSS进行布局有集中不同的方式，包括绝对定位和使用负的外边距。

 

为了提高可访问性，我选择在源代码中将祝内容区域放在次要内容区域的前面，这深深考虑到了屏幕阅读器，因为屏幕阅读器不用再经过不重要的内容，到达主内容部分。

 

在所有浮动元素中添加display:inline。这个预防措施用来防止IE中的外双边距产生的bug.

 

这两个元素嵌套在contetn元素中，可以创建关联，我利用了这个事实，这有两个好处。首先不需要为要应用的每个元素创建新的类名，而应使用层叠找到元素。

 

利用浮动包含浮动，从而简化清除浮动这一步，简直赞。

 

如果选用某个框架，你可能会在每个项目中都使用它，因此思维方式很可能会逐渐僵化。正如俗话所说的，如果你只有一把锤子，那么是那么东西看起来都是钉子。

 

这个工具箱可以包含全局reset,排版样式和表单处理，以及登录表单，日历表格和导航列表等常用HTML组建的标记模式。

 

最常见的CSS问题并非来自源于浏览器BUG，而是来源于对CSS规范的理解不完整。

 

IE的开发节奏比其他浏览器慢得多。

 

reset样式表可以避免和缓解HTML元素默认样式不一致的问题，跨所有浏览器一个一致的舞台。

 

我非常喜欢采用最小宽度和最大宽度的流式设计。

 

网格通常有预先确定的宽度，包含指定数量的列和可选的隔离带。网格是你最好的朋友，可以帮助你克服困难。它是Photoshop和CSS之间的的“中间人”，可以帮助你做出浮动，定位，外边距，内边距，边框等相关的初步定位决定。