排版是网站设计中的一个基本部分。理由很充分：好的排版不仅是审美的必要，还可能从文字的易读性和可读性方面改善网站可用性。排版的一切就是大小，比例和间距。排版同时也要考虑字体样式。
在我们的网页设计中如何使用CSS来很好的排版呢？这就是我们要努力回答的问题。
这是CSS排版三篇系列中的第一部分，这三篇将涵盖从基本语法到最佳实践，以及CSS排版相关工具的内容。
CSS排版属性
CSS的font属性组指定了一般的特征比如font-style和font-weight。下面你将看到p元素被赋予font-style和font-weight属性。
p {
font-style: oblique;
font-weight: bold;
}
CSS的text属性组主要是处理字符，间距，单词和段落。例如，text-indent属性缩进文本块的第一行。letter-spacing属性控制文本块之间的空白。下面你将看到p元素被赋予text-indent和letter-spacing属性。
p {
text-indent: 50px;
letter-spacing: 2px;
}
还有一些除字体和文本属性之外的其它CSS属性可以影响网页排版的效果。例如，color属性控制一个HTML元素的前景色，并且可以改变文本的颜色。下面你将看到p元素被设置成红色。
p { color: red;}
字体大小
浏览器兼容性是网页设计中的一个主要问题，如果你想把你的网页设计在所有浏览器下看起来一样，这个问题将更严重。网页设计新生可能会乱搞一通直到字体大小看起来ok了，然后发现它在其它浏览器和平台下却完全不一样了。正确的设置字体大小，这个问题就会减小到最小的程度。
下面是一个简单地设置字体大小的方式：
h6 { font-size: 12pt;}上面的代码设置第6级标题元素为12pt。
对于font-size的取值，有4种衡量单位。
绝对大小
标准关键词的值是在用户agent里定义的(比如，web浏览器)。W3C CSS 2.1中的值指定为：xx-small, x-small, small, medium, large,x-large, xx-large。
相对大小
标准关键词的字体大小基于父级元素。这也是在用户agent里定义。可能的取值是larger和smaller。下面你将看到一个段落元素看起来在一个字体大小为12pt的父级元素(
div { font-size: 12pt;}
p { font-size: large;}
这两个关键词组(绝对大小和相对大小)在不同的浏览器下可以有非常大的差别，所以如果你希望的是像素完美，这可能不是一个很好的选择，而且大部分网页设计者完全避免使用它们。
然而当准确的比例对于设计无关紧要时，smaller和larger关键词对于相对大小可能非常方便。larger和smaller值会继承父元素的font-size并且根据情况相对的调整目标元素。例如如果父元素的值设置为small，larger关键词会使得子元素的成为larger。对于大多数浏览器，准确的变化单位大约是1.2个单位，然而这个比例在所有浏览器中并不是一致的。举个例子，如果文本被设置为12pt，larger关键词将会使子元素的文本设置为12pt*1.2(和浏览器相关)，也就是等于14.4pt。
绝对长度
绝对长度是常量的大小。例如，12px就是12像素，2in就是2英寸。绝对长度常用于网页设计。
Possible units for absolute length units are pt, px, mm, cm, in, and pc.
绝对长度可能的单位是pt，px，mm，cm ,in和pc。
毫米(mm)，厘米(cm)和英寸(in)是对于物理的和现实世界尺寸来说是最合适的，并且是常用于打印设计的测量单位。它们不太适合基于屏幕的测量，因为屏幕的规格很不一样。
点距(pt)和12点字(pc)――虽然比起mm，cm和in好一些――在不同的浏览器和设备DPI下也可能很不相同。
因此，当使用绝对长度时，像素(px)问题早少。可是可能有人会说px在老版本的IE下无法原生地调整它们的大小。如果读者可能手动调整浏览器的文字大小，px测量单位可能不是一个好的选择。确保使用px作为字体大小时，辅助功能不是问题。
相对长度
另一种长度单位是相对长度。这意味着它们的大小依赖父元素的font-size。可能的单位是em，%和ex。
很少网页设计者使用ex，它是当前字体中字母“x”的高度。
em和%值更容易使用。em和%的行为一样，只是语法有一点不同：
html, body {
font-size: 85%;
/* = (.85em) */
}
h1 {
font-size: 110%;
/* = (1.1em) */
}这些比例都是相对于父元素的font-size而言的。所以，如果基准文字大小(body或html中)被设置为80%，具有0.2em或20%的子元素的font-size将会是原始的80%高度的20%。
字体栈
CSS字体栈是一系列的字体，它包含了能很好地工作于不同操作系统和平台的字体，以尽可能地使排版保持一致性。
这是一个字体栈的例子：
body {
font-family: Georgia, Times, "Times New Roman", serif;
}在上面的例子中，浏览器将会从左到右地寻找字体直到它找到一个用户计算机中存在的字体。比如它会查找Georgia字体，如果没有找到，它将会查找Times字体等等。
有很多种方法可以创建字体栈，而且在博客上和IDE(如Dreamweaver)中有很多浏行的预置的字体栈可供使用。
字体栈的目的是提供一套可以用于许多计算机的理想字体方案，并且在希望使用的字体无效时可以退而求其次。
网页设计的一个大目标就是要向大范围的用户提供漂亮的排版，而且要考虑希望的字体并不是对所有用户都有效。
在创建自定义字体栈时需要注意以下个关键点：
开发字体栈的最佳实践
同一个字体栈下的所有字体应该有相同的(或相似的)高宽比。一些字体的每个字符比其它的更宽或更高，使它们具有更大的高宽比。
所以，如果我们使用Verdana(绝大多数Windows)和Helvetica(绝大多数Macs)，我们就能满足之前的要求。然而，因为Verdana比Helvetica宽得多，文本在Windows下和Macs下看起来会非常不同。
下面的图片展示了4种常见的Windows字体的不同高宽比。很容易看到，Verdana和Georgia比起Arial和Times更宽和更高。
在大块的文本中，这个差别尤为明显。如果我们的字体栈用Verdana来适配Windows并用Helvetica来适配Macs，下面的图片展示了明显的区别。
所以开发字体栈时：
以面是最常见的不同高宽比类型的字体列表：
如果你需要字体栈方面的更多帮助，CodeStyle创建了一个非常有用的字体栈创建器，它包含了Mac，Windows和Linux下的所有字体。
CSS排版伪类和伪元素
CSS排版伪类和伪元素对于选定某些类型元素来说非常棒。伪类以冒号(:)开头，后面跟着类/元素名。
有好几个与排版有关伪类/伪元素，如:hover和:first-letter。
让我们看看一些能够设置我们排版样式的伪类和伪元素。
链接和动态伪类
网站超链接的设计非常重要。使用锚点链接伪类来为每个链接状态创建字体样式。
:hover可能是最熟悉的了，为它创建一个不一样的(然而还是相似的)样式以提供元素正处在交互状态的视觉暗视。
这是链接伪类代码：
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
color: #333333;
}
a:hover {
text-decoration: underline;
}
a:active {
color: #000000;
}第一个，最后一个和第n个伪元素
下面的伪元素都与元素相对于HTML文档和它内部的HTML元素的位置有关。
:first-letter允许你选定元素的第一个字母。下面是一个例子：
p:first-letter {
font-size: 30pt;
display: block;
float: left;
margin: 0 5px 5px 0;
}
可以看到，伪元素对创建首字下沉很有帮助。
:first-line伪元素让你可以选择HTML元素包含文本的首行。下面一个例子为文本的第一行加粗，并让它的字母大写：
p:first-line {
font-weight: bold;
text-transform: uppercase;
}
:nth-child()是一个CSS3伪元素，它会根据指定的选择器选定页面或父元素的第n个元素。在下面的例子中，我们选中页面中的第二段：
p:nth-child(2) {
background: #e7f0ce; padding: 10px;
}
我们也可以选定div中的第二段或者列表中的第二项，如下：
div p:nth-child(2) {
background: #e7f0ce;
padding: 10px;
}
ul li:nth-child(2) {
background: #e7f0ce;
padding: 10px;
}还可以使用:nth-child(even)和:nth-child(odd)伪类来获取偶数个和奇数个元素。
此外还有:first-child伪元素?SS2)和:last-child?SS3)伪元素可以选择一个集合里的第一个和最后一个元素。
总结
我们讲述了CSS排版的基础知识。只要有一些创造力，使用CSS排版可以走向很美好和有趣的方向。在接下来的部分，我们会讨论一些CSS技术以及与CSS排版有关的最佳实践。