基于CSS的布局最初看起来的确很难,但是CSS的好处非常多,包括代码更少、下载更快和更容易维护等。
1.ID和类名
ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。ID也可以用来标识持久的结构性元素,例如主导航或内容区域。ID还可以用来标识一次行元素,例如某个链接或表单元素。
注意:一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于页面上任意多个元素。
2.为元素命名
在分配ID和类名时,一定要尽可能保持名称与表现方式无关,也即应该根据“它们是什么”来为元素命名,而不应该根据“它们的外观如何”来命名。
注意:写类名和ID名时,需要区分大小写。为了容易辨认,可以采用完全小写的类名和ID,多个单词之间用连字符分隔。
3.ID还是类?
常常很难决定一个元素应该用ID还是类名。一般原则是,类应该应用于概念上相似的元素,这些元素可以出现在同一个页面上的多个位置,而ID应该应用于不同的唯一的元素。
只有在绝对确定这个元素只会出现一次的情况下,才应该使用ID,如果你认为以后可能需要相似的元素,就使用类,保持命名约定通用。
4.div和span
div实际上代表部分(division),它可以将文档分割为几个有意义的区域。为了将不必要的标记减到最少,应该只在没有现有元素能够实现区域分割的情况下使用div元素。
应该使用div根据条目的意或功能对相关条目进行分组,而不是根据它们的表现方式或布局分组。
div可以用来对块级元素进行分组,而span可以用来对行内元素进行分组或标识:
<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Published on <span class="data">February 22nd, 2009</span> by <span class="author">Harry Knowles</span></p>
5.文档类型、DOCTYPE切换和浏览器模式
DTD(文档类型定义)是一组机器可读的规则,它们定义XML或HTML的特性版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用那个DTD,由此知道要使用HTML的哪个版本。
DOCTYPE声明是指HTML文档开头处的一行或两行代码,它描述使用哪个DTD。
DOCTYPE通常——但不总是——包含指定的DTD文件的URL。浏览器一般不读取这些文件,而是只识别常见的DOCTYPE声明。
DOCTYPE当前有两种风格,严格(strict)和过渡(transitional)。顾名思义,过渡DOCTYPE的目的是帮助开发人员从老版本迁移到新版本。因此过渡版本仍然允许使用已经废弃的元素,但严格版本禁止使用废弃的元素,从而把内容和表现分隔开。