CSS基础知识

浏览数：11 / 时间：2015年06月09日

为元素命名：

在分配ID和类名的时候，一定要尽可能的保持名称与表现方式无关！

因此，应该根据“他们是什么”来为元素命名，而不应该根据“他们的外观如何”来命名。在书写类名和ID的时候要注意大小写。我们建议采用完全小写的类名和ID，多个旦夕之间用连字符分隔，例如，andy-budd比andyBudd清楚得多。

选择ID还是类：

一般原则是，类应该应用于该面上相似的元素，这些元素可以出现在同一个页面上多个位置，而ID应该应用于不同的唯一的元素。其实一般来说，应用类的机会大很多，只有在目标元素非常独特，绝对不会对网站上的其他地方的别的东西使用这个名称是才会使用ID。换句话说，就是在绝对确定这个元素只会出现一次的情况下才会使用ID。如果你认为以后会使用相似的元素那么你就使用类。但是也不可陷入“多类症”，应该类名和层叠结合使用来达到目的。

DIV和span：

许多人误认为DIV没有语义，但是，DIV实际上代表部分（division），他可以将文档分为几个有意义的区域。

DIV可以对会计元素进行分组，而span可以用来对行内元素进行分组或标识。

HTML的不同版本：

HTML4.01在1999年成为推荐标准，这是大多数人现在使用的HTML版本。2000年1月，W3C发布了HTML4.01的XML版本，并命名为XHTML1.0。它HTML4.01的主要差异是它遵循XML编码约定，这意味着与常规的HTML不同，所有的XHTML属性必须包含引号，所有的元素必须封闭。

文档类型（DTD），DOCTYPE切换和浏览器模式：

DTD：

DTD是一组机器可读的规则，他们定义了XML或HTML的特定版本中允许有什么不允许有什么。在解析网页的时候，浏览器将使用这些规则检查网页的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。

DOCTYPE：

DOCTYPE是指在HTML文档开头处的一行或两行代码，他描述使用哪个DTD，如下面的示例描述的是使用XHTML 1.0 Strict的DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE通常--但不总是--包含指定DTD文件的DTD。例如HTML5就不需要URL，浏览器一般不读取这些文件（.dtd文件），而是只识别常见的DOCTYPE声明。

DOCTYPE当前有两种风格：严格（strict）和过渡（transitional）。顾名思义，过渡DOCTYPE的目的是帮助开发人员从老版本迁移到新版本。因此，HTML4.01和XHTML1.0的过渡版本仍然允许使用废弃的元素，比如font元素。但这些语言的严格版本禁止使用废弃的元素。

浏览器模式：

当年浏览器厂商创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老师浏览器的行为以防止老式站点无法工作。

一个比较典型的例子就是盒模型。

具体内容参见我的博客：http://www.cnblogs.com/ttcc/p/3849515.html

DOCTYPE切换：

浏览器根据DOCTYPE的存在与否以及使用的哪种DTD来选择要使用什么呈现方式。

如果XHTML文档包含形式完整的DOCTYPE，那么它一般使用标准模式呈现。

对于HTML4.01文档，包含严格（strict）DTD的DOCTYPE常常导致页面以标准模式呈现。

包含过渡（transitional）DTD和URL的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD但是没有URL的会导致页面以混在模式呈现。

DOCTYPE不存在或者形式不正确的会导致HTML和XHTML以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。并非所有的浏览器都采取这些规则，但是这些规则很好地说明了DOCTYPE切换的工作方式。更具体的内容参见：http://hsivonen.iki.fi/doctype。

而且要注意，在IE6中如果DOCTYPE不是页面中的第一个元素，那么会自动切换为混杂模式，IE7已经做了纠正，但是除非将页面作为XML文档，否则最好避免使用XML声明：<?xml version=”1.0” encoding = “utf-8”?>

为样式找到应用目标

伪类：

表单元素或链接元素

:link和:visited称为链接伪类，只能应用于锚元素。:hover, :active和:focus称为动态伪类，理论上可以应用于任何元素。但是IE6只注意应用于锚链接的:hover, :active选择器，完全忽略:focus。IE7在任何元素上都支持:hover，但是忽略:active和:focus。

高级选择器：

IE6和更低版本不支持

如果浏览器不理解某个选择器，那么他会忽略整个规则。但是要注意，对于站点布局很重要的任何元素上，要避免使用这些高级选择器。

子选择器和相邻同胞选择器：

子选择器（“>”）只选择元素的直接后代，即子元素。IE7和更高版本的浏览器支持子选择器。相邻同胞选择器（“+”）用于定位同一个父元素下某个元素之后的元素。

但是，IE7中这两类选择器有一个小BUG，如果父元素和子元素之间有HTML注释，就会出问题。

属性选择器：

“[attr]” or ”[attr=val]”，IE6不支持。

层叠和特殊性：

层叠：

即使不太复杂的样式表中，寻找同一个元素可能有两个或更多的规则。CSS通过一个成为层叠（cascade）的过程处理这种冲突。层叠为每个规则分配一个重要度。如下：

优先级由上至下依次增高