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英寸。

绝对长度常用于网页设计。

Possibleunitsforabsolutelengthunitsarept,px,mm,cm,in,andpc.

绝对长度可能的单位是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和%的行为一样，只是语法有一点不同：

∙0.5em等于50%

∙1em等于100%

∙0.2等于20%

∙0.73等于73%

∙2.21等于221%

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,"TimesNewRoman",serif;

}

在上面的例子中，浏览器将会从左到右地寻找字体直到它找到一个用户计算机中存在的字体。

比如它会查找Georgia字体，如果没有找到，它将会查找Times字体等等。

有很多种方法可以创建字体栈，而且在博客上和IDE（如Dreamweaver）中有很多浏行的预置的字体栈可供使用。

字体栈的目的是提供一套可以用于许多计算机的理想字体方案，并且在希望使用的字体无效时可以退而求其次。

网页设计的一个大目标就是要向大范围的用户提供漂亮的排版，而且要考虑希望的字体并不是对所有用户都有效。

在创建自定义字体栈时需要注意以下个关键点：

∙需要有大量的备选字体。

我们上面的例子只列出了三个，而如果有更多的话会更好。

∙选择的字体应该在很多平台上都存在。

例如，Arial在Windows是广泛使用，同样的Helvetica几乎在所有的Macs都有。

∙适用于Linux用户的字体栈，参看网页设计师的Linux字体教程。

开发字体栈的最佳实践

同一个字体栈下的所有字体应该有相同的（或相似的）高宽比。

一些字体的每个字符比其它的更宽或更高，使它们具有更大的高宽比。

所以，如果我们使用Verdana（绝大多数Windows）和Helvetica（绝大多数Macs），我们就能满足之前的要求。

然而，因为Verdana比Helvetica宽得多，文本在Windows下和Macs下看起来会非常不同。

下面的图片展示了4种常见的Windows字体的不同高宽比。

很容易看到，Verdana和Georgia比起Arial和Times更宽和更高。

在大块的文本中，这个差别尤为明显。

如果我们的字体栈用Verdana来适配Windows并用Helvetica来适配Macs，下面的图片展示了明显的区别。

所以开发字体栈时：

∙确保你考虑了不同的操作系统（Windows，Mac和Linux）

∙确保字体栈中的字体都是sansserif或都是serif（为了一致性）

∙确保字体栈中的字体具有相似的高宽比。

以面是最常见的不同高宽比类型的字体列表：

∙Widesansserif:

Verdana,Geneva

∙Narrowsansserif:

Tahoma,Arial,Helvetica

∙Wideserif:

Georgia,Utopia

∙Narrowserif:

Times,TimesNewRoman

∙Monospace:

Courier,CourierNew,LucidaConsole

如果你需要字体栈方面的更多帮助，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:

05px5px0;

}

可以看到，伪元素对创建首字下沉很有帮助。

:

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中的第二段或者列表中的第二项，如下：

divp:

nth-child

（2）{

background:

#e7f0ce;

padding:

10px;

}

ulli:

nth-child

（2）{

background:

#e7f0ce;

padding:

10px;

}

还可以使用:

nth-child（even）和:

nth-child（odd）伪类来获取偶数个和奇数个元素。

此外还有:

first-child伪元素（CSS2）和:

last-child（CSS3）伪元素可以选择一个集合里的第一个和最后一个元素。

CSS排版：

技术与最佳实践

作者：

RockUX  标签：

css 2011-03-11

在这个系列的第一部分，我们讨论了一些与CSS排版的基础概念。

现在我们将讨论一些出色的技术，建议，技巧以及处理网站排版的最佳实践。

这是CSS排版参考三篇系列中的第二部分，这三篇将涵盖从基本语法到最佳实践，以及CSS排版相关工具的内容。

∙CSS排版：

基础

∙CSS排版：

技术与最佳实践

∙CSS排版：

例子和工具

用@font-face改善网页排版

对于普通文本块，使用巧妙的字体栈（如第一部分讨论的）是一个不错的主意，但是对于标题和短文本块，可以借助@font-face使用更多有趣的字体。

使用得当，@font-face可以很大程度地与各种浏览器兼容，是的，甚至是IE。

只需要在你的Web服务器上放一份字体文件并且在你的CSS代码中如下使用@font-face规则：

@font-face{

font-family:

CurlzMTRegular;

src:

url（fonts/CurlzMTRegular.eot）;

}

然后仅需要在CSS中使用font-family声明：

h1,h2,h3,h4,h5,h6{

/*Alwaysuseafontstack,evenwithcustomwebfonts!

*/

font-family:

CurlzMTRegular,Helvetica,Arial,sans-serif;

}

虽然IE4+支持@font-face，但是字体必须是.eot文件格式。

很容易——只需要先对你选择的每个字体使用工具进行转换：

ttf→eotConvertor。

想了解更多的@font-face的信息，请阅读以下文章：

∙TheEssentialGuideto@font-face

∙AGuidetoGoogleFontAPI

想更简单地实现@font-face，使用FontSquirrel的@font-face生成器。

垂直节奏

网页排版设计其实都是在关注易读性和可读性。

好的易读性和可读性的一个主要因素就是文字如何在网页中垂直地流动。

文字是否太挤，或是太宽松？

这是理解和切实实施垂直节奏起作用的地方。

垂直节奏是用户从上往下读页面时的文本间隔和排列。

垂直节奏主要是用font-size和line-height来处理，还有top/bottommargin和padding。

垂直节奏的概念很简单：

行高，间距，填充都必须相同或有相同的比例。

下面是一个例子：

p,ol,ul,blockquote,pre,code{

line-height:

18px;

margin-bottom18px;

/*1.5emprovidesgoodverticalspacing（=150%ofthefont-size）*/

line-height:

1.5em;margin-bottom:

1.5em;

}

考虑顶边距和填充一个文本块（比如段落，列表，引用块），同时含有图像和其它块级元素。

试着使用相同的line-height或使用它们的倍数（比如对于上面的例子来说使用18px,32px,64px等）。

相同比例很容易计算出来。

让我们试着指出下面的例子中line-height应该是多少。

h1{

font-size:

2em;

line-height:

?

;

}

如果body的line-height设为1.5em，那么我们只需要用我们的font-size除它来得到我们的比例：

1.5em/2em=0.75em

h1{font-size:

2em;line-height:

0.75em;}

对于大于line-height的字号，line-height必须减小到匹配基线网格。

我们可以使用相同的算法来确定较小字号的line-height。

让我们再来试试，不过这次我们的font-size比body元素的line-height小。

h2{font-size:

.7em;line-height:

?

;}

如果body的line-height还是1.5em，那么我们将用它除以我们的font-size：

1.5em/.7em=2.14em。

h2{font-size:

.7em;line-height:

2.14em;}

需要了解更多的在网页布局中创建基线或垂直节奏的信息，查看以下列出的文章。

此外还有一个方便的工具“垂直节奏生成器”，如果你不想计算所有东西的话。

∙ComposetoaVerticalRhythm

∙GettheEye–VerticalRhythm

∙SettingTypeontheWebtoaBaselineGrid

使用文本与空白CSS属性

@font-face和垂直节奏有时候可能会太困难，所以为我们放慢一点并回到一些更基础的技术。

文本CSS属性

CSS文本属性组包含一些处理文本样式的属性。

很好的理解这些属性可以帮助你设计中的文本块达到更高的用户友好的程度。

这是一些文本CSS属性（它们的名字具有自明性）：

∙text-align：

取值可以是left，center，right，或justify

∙text-decoration：

取值可以是overline，line-through，或underline或blink

∙text-transform：

取值可以是uppercase，lowercase，或capitalize

让我们用例子来看看这些属性是如何工作的。

在下面这个例子中，我们将对所有段落做缩进：

p{

text-indent:

3em;

}

文字方向

你可以通过使用direction属性来设置文字方向。

默认方向是ltr，是从左到右的缩写。

如果想反过来的话，我们可以把direction设置为rtl。

p{direction:

rtl;}

direction属性不是很流行，因为它只用于专门的目的，但是它可以更好地处理其它书写语言。

比如许多中东语言就是从右到左读的。

空白，字符间距，与及词间距

这些属性为字和词之间提供间距。

white-space属性控制文本如何在它的父元素内部环绕。

取值可以是normal,nowrap,pre,pre-line,pre-wrap和inherit。

word-spacing属性影响词与词之间的间距。

取值可以是任何CSS测量单位（如0.5em或5px）。

letter-spacing属性与word-spacing属性类似，只不过它是处理单个字符之间的间距。

取值可以是任何CSS测量单位。

文字阴影

CSS3为我们提供了更多用于网页排版的属性。

其中一个新加入到CSS的属性是text-shadow。

这里是为段落加上漂亮文本阴影的样式规则：

p{

text-shadow:

1px1px1px#000;

}

要创建嵌入文本，你可以使用负值，如下：

h1{

/*Usenegativeoffsetstocreateinsettext.*/

text-shadow:

#000-1px-1px0;

}

更多text-shadow的使用技巧参看教程如何使用CSS3创建嵌入版式。

CSS排版最佳实践

接下来是我们已经提到过的最佳实践的一个回顾，以及补充一些额外的知识。

CSS排版的核心理念是关注可读性以改善用户体验。

Serif还是Sansserif？

没有一个结论性的研究指明一组类型比另一组更易读。

最影响易读性的是我们讨论的CSS属性，比如font-size和letter-spacing。

对于serif字体，更多地使用line-height，letter-spacing，甚至更多地使用word-spacing，因为serif字体需要一些间距来展现它们的弯曲。

对于sansserif字体，更简单字体风格允许更紧凑的间距，以及更小的字体而最小程度地影响易读性。

语义标签

总是使用合适的标签。

比如使用代替，使用代替，然后使用CSS去控制它们的样式。

适当地使用标题（h1-h6）：

描述你的内容的不同部分到不同的逻辑分组。

在

之后使用

表明接下来的部分是

的字部分。

使用CSS给它们定义任何你想要的样式，但是要保持你的标签主义化。

使用HTML标签来向HTML文档内容中添加值，并且使用CSS来控制他们的样式。

例如，使用代替

。

创建基准样式

减小浏览器在找不到某个元素的样式规则时的猜测总是好的实践。

别忘了给基本的HTML元素加上样式。

h1,h2,h3,h4,h5,h6{}

 

p{}

 

ol,ul{}

 

a{}

 

blockquote{}

 

pre,code{}

 

small{}

 

对Line-Height使用1.5em

1.5em是最普遍且推荐的基准line-height；这表示line-height比文本font-size大50%，给文本块垂直空余空间。

这并不是说任何其它的line-height值都不好；但是在不确定的情况下，1.5em是比较安全的选择。

针对line-height使用相对测量单位也免去了计算相应的line-height，像下面这个例子：

p{font-size:

12px/1.5em;}

对于12px的font-size，18px的line-height可以达到相同的目的，但是如果你的改变其它元素的font-size时你需要重新计算line-height值是多少。

使用简写CSS

总是在可能的地方使用简写CSS，因为这是现在写CSS的一个惯例。

这是一个font属性的简写结构：

font:

[font-style][font-size]/[line-height][font-family1,font-family2,...,font-familyn]

例如：

p{

 

font:

normal12px/1.5emArial,Helvetica,sans-serif;

 

}

 

结论

在这部分，我们涵盖了一些CSS排版的技术，技巧，和最佳实践。

在下一部分，我们会带给你一些非常好的CSS排版的例子以及一些可以简化你的工作的工具