【CSS笔记之八】CSS标签语义化、怪异模式和CSS的组织方式

CSS语义化标签需要注意的问题

1.虽然CSS布局中不推荐使用table。但是table布局在二维数据展示方面是最好的选择。table除了table、tr、td标签外，表格标题要用caption，表头用thead包围，主体部分tbody包围，尾部用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td。
2.尽可能减少使用div、span等无语义标签。
3.在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；
4.避免使用纯样式标签，如b、font、u等，改用css设置。语义上强调文本使用strong和em。

CSS怪异模式和文档类型定义DTD

在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器（比如Microsoft IE4　和Netscape Navigator4）的行为以防止老站点无法工作．这两种模式的差异较大，比较典型的就是IE对盒模型的解析：在标准模式中，网页元素的宽度是由padding/border/width三者的宽度相加决定的；而在怪异模式中，widht本身就包括了padding和border的宽度．此外，标准模式下块级元素的经典的居中方法－－设定width，然后margin-right:auto，margin-left:auto;　在怪异模式下也无法正常工作．

同样的代码，为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页．在怪异模式和标准模式下的表现很可能相差甚远．因为发明怪异模式的目的就是为了兼容老式浏览器下的代码，它的很多解析方式是不符合标准的．所以，一般情况下，我们应该避免触发怪异模式，应选用标准模式．

怪异模式是如何被触发的呢？与DTD有关．DTD全称Document Type Definition，即文档类型定义．DTD是一种保证HTML文档格式正确的有效方法，可以通过比较HTML文档和DTD文件来看文档是否符合规范，以及元素和标签使用是否正确．一个DTD文档包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可作用的实体或符号规则．

在网页中最常用的DTD类型包括4种：

（1）用于HTML4.01的严格型：strict

（2）用于HTML4.01的过渡型:Transitional

（3）用于XHTML1.0的严格型

（4）用于XHTML1.0的过渡型

按照W3C的标准，我们需要在HTML的最开始声明文件的DTD类型．如果漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6/7/8）就会触发怪异模式．为了避免怪异模式给我们带来不必要的麻烦，我们要养成书写DTD声明的好习惯。

CSS的组织方式

应用CSS的能力，一看CSS的API掌握情况，控制页面元素样式，只有对错之分，易掌握。二是CSS框架，对CSS进行组织，只有好坏优劣之分。如base.css+common.css+page.css层叠的框架。

base层，位于最底层，提供CSS reset功能和粒度最小的通用类——原子类。供所有页面引用。力求精简、通用，保证高度可移植性。不同网站可以用同一个base文件，base层相对稳定，很少需要维护。

common层，位于中间，强调模块化，便于网站内部重用。common层是网站级的，不同的网站有不同的common层，同一网站只有一个common层。根据网站规模，该层可用一个css文件也可分散为多个。

page层，位于最高层，提供页面级别的样式。网站中高度重用的模块，视为组件，放在common层；非高度重用的模块，可放在page层。每个页面都可能有自己的page层CSS。中小规模网站可将所有page层代码放在一个page.css文件，添加注释，分块书写，易管理、加载快、便于维护。能用base层和common层CSS解决的，尽量不要用page层。page层力求精简。