CSS笔记（一）

1. 有意义的元素

有意义的标记可以简便地将元素调整为你所需的样式。

2. ID和类名

ID用于标记页面上的特定元素，而且必须唯一。同一个类名可以应用于页面上任意多个元素，因此类的功能强大得多。

3. 为元素命名

在分配ID和类名时，一定要尽可能保持名称与表现方式无关。应该根据"它们是什么”来为元素命名，而不应该根据"它们的外观如何"来命名。

在写类名和ID名时，需要注意区分大小写，因为浏览器认为.andybudd和.andyBudd是不同的类名。处理这个问题的最好方式就是统一命名约定。

推荐采用完全小写的类名和ID，多个单词之间用连字符分隔。例如andy-budd比andyBudd清楚得多。

只有目标元素非常独特，绝不会对网站上其他地方使用这个名称，才会使用ID。

"多类症"：常常在几乎所有的东西上添加类，从而试图更精细地控制它们的样式。在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的代码。

如：<h2 class="news-head"></h2><p class="new-text"></p><a class="news-tink"></a>。

上面是一个关于新闻的糟糕结构，可以使用层叠来识别新闻标题和文本，如:

<div class="news"><h2></h2><p></p><a></a></div>

这种方式删除不必要的类有助于简化代码，使页面更简洁。

4. div和span

div实际上代表部分(division)，它可以将文档分割为几个有意义的区域。所以，通过将主要内容域包围在div中并分配content类，就可以在文档中添加结构和意义。

为了将不必要的标记减少到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。

div可以用来对块级元素进行分组，而span可以用来对行内元素进行分组或标识。

尽管目标是让代码尽可能简洁且有意义，但是有时候为了以自己希望的方式显示页面，无法避免添加额外的无语义的div或span。如果是这样，那也不用过分担心。关键是知道在什么时候必须进行折中，并且要有正确的原因进行折中。

5.微格式

由于HTML中缺少相应的元素，很难突出显示人，地点或日期等类型的信息。为了解决这个问题，有一组开发人员决定开发一套标准的命名约定和标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式，现在称为微格式。

6.浏览器模式

两种呈现模式：标准模式和混杂模式。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法，如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或者DOCTYPE侦测。

补充：

Mozilla和Safari还有第三种模式，称为"几乎标准的模式"，除了在处理表格的方式上有一些细微的差异之外，这种模式和标准模式没差别。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂模式呈现，其行为就有可能会有错误或不可预测。因此，一定要在站点的每一个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。