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排版有关的最佳实践。

    查看英文源文