过渡性的设计

使用margin 和padding 来代替多余的表格单元和间隔GIF。

使用link 和@import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。 

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--

@import url(modern.css) screen;

--></style>

一些实例：

Santa Cruz Montessori School http://www.scms.org/ycc.html

k10k http://k10k.net/

Fox Searchlight Pictures http://foxsearchlight.com/

想了解更多关于过渡性设计的信息，请阅读Eric Meyer on CSS 的第一章。和Jeffrey Zeldman  的Designing with Web Standards 的大部分内容。

CSS 排版：并没有想象的难

　　大部分用户使用的浏览器都有很好的CSS 支持，当然它们也有个各自的脾性，不过只要你习惯了它们，就能够处理得很好。 

　　编写CSS 代码很简单。 每条CSS 规则都有一个选择符和一个声明。声明是由属性名(property) 属性名(property) 和属性值(value) 组成的。属性名一般使用连字符(-)连接。

　　属性值(value) 

body {margin:0; padding:0}
 .related
{
float:right; width: 15em;
margin-left:1em;
margin-bottom: 1em;
color:blue
}

 #footer
{
color: gray;
font-size: 0.6em;
line-height: 1.2em;
background-color:white;
margin: 0
}

结构化标记：所写即所想，所想即所写

　　即便书写CSS 很简单，使用CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

　　我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。

　　我们用<h1> 标记来标示最重要的头条；次一级的条目则用<h2> 来标记，以此类推；而段落则放在<p> 标记中。

这就是我们称之为“结构标记”或“语义标记”的东西。

　　你的内容将不放在表格和表格元素中，取代它们的是div 元素。还要给你的div 元素安排一个id 或class，不过这是为了描述它们的内容或功能， 而非它们的外观。

避免<b>ed 与<br>eakfast 标记

　　且想想为何你希望某个对象按特定的方式出现；它有什么含义？你的标记能够也能够必须表达意思，即便对于那些无法观看页面的人来说也是如此。语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。

　　当你把某个对象设为斜体时，大概要么就是想强调它，要么是想引用某个书中标题吧？如果是前者，应该用<em>；如果是后者，其实得用<cite>。

　　如果某个对象被标记为粗体，事实上它应该被标记的是，<strong>。

　　如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头， 会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用CSS 替换<br> 。

　　.foo {display:block}