印刷术是一个必不可少的组成部分网站的设计．这是有充分理由的:良好的排版不仅是美学吸引力的必要条件，而且当文本的易读性和可读性概念被应用时，还可以提高网站的可用性。排版就是关于比例和间距。
还有一些字体样式需要考虑。排版对用户体验有巨大的影响，最终对企业有很大的影响。”网络声誉．我们如何使用CSS为伟大的版式在我们的网页设计中?
这是一个我们将试图回答的问题。这是第一部分这是一个由三部分组成的系列CSS排版指南，将涵盖从基本语法到最佳实践和相关的CSS排版工具的所有内容。
- CSS排版:基础
- CSS排版:技术和最佳实践
- CSS排版:示例和工具
排版CSS属性
控制排版样式的CSS属性主要有两组:字体而且文本．的字体CSS属性组规定了一般字体特征，例如字体样式而且粗细．下面你会看到p给定一个元素字体样式和一个粗细财产。
P {font- family:宋体;粗细:大胆的;｝
的文本CSS属性组处理字符、空格、单词和段落。例如,文本属性使文本块的第一行缩进。的字母间距属性控制文本块之间的空格。
下面，您将看到p给定一个元素文本和一个字母间距财产。
P {text-indent: 50px;字母间距:2 px;｝
除了字体和文本属性组之外，还有其他的CSS属性可以影响网页排版。例如,颜色属性控制HTML元素的前景色，并可用于更改文本的颜色。
下面，您将看到p元素被赋予红色。
P{颜色:红色;｝
字体大小
浏览器兼容性是网页设计中的一个主要问题，如果你想让你的网页在所有浏览器中看起来都一样，就更是如此了。初出茅庐的网页设计师可能会把字体的大小弄得乱七八糟，直到它看起来刚刚好，才发现它在其他浏览器和平台上已经完全改变了。字体大小正确的方法，可以把这个问题减到最小。
文本大小的简单使用如下:
H6{字体大小:12pt;｝
上面的代码将标题级别6元素设置为12 pt．为字体大小值，有4种类型的测量单位。
绝对规模
由用户代理(例如，web浏览器)定义值的标准关键字。W3C CSS 2.1规范中的值为xx-small，x-small，小，媒介，大，超大号，xx-large．
相对大小
基于父元素调整字体大小的标准关键字。这些也由用户代理定义。可能的值是更大的而且小．
下面你将看到一个段落元素在父元素(< div >)大小为12 pt(Firefox)。
Div{字体大小:12pt;} p{字体大小:大;｝
两个关键字值组(绝对大小和相对大小)在不同的浏览器之间会有很大的差异，所以如果你的目标是完美的像素，它们可能不是一个好的选择，大多数网页设计师都避免使用它们。的小而且更大的然而，当精确的比例对设计无关紧要时，关键词可以很好地提供相对的尺寸。
的更大的而且小值将继承父元素的字体大小，然后相对地相应地调整目标元素的字体大小。例如，如果父元素的值设置为小,更大的关键字将使子元素变大。对于大多数浏览器来说，精确单位的变化是大约的1.2个单位，尽管这一比例在所有浏览器中并不一致。
例如，如果text设置为12 pt,更大的关键字将子元素的文本大小调整为约12 pt x 1.2(取决于浏览器)，这将等于14.4 pt。
绝对长度
绝对长度是文字大小。例如,12 px12像素和2正好是2英寸。绝对长度经常被网页设计师使用。
绝对长度单位的可能单位是pt，px，毫米，厘米，在,个人电脑．毫米(毫米),厘米(厘米)和英寸(在)更适合于实际的尺寸，是印刷设计中经常使用的测量单位。它们不太适合基于屏幕的测量，因为屏幕分辨率的差异很大。
点(pt)和picas (个人电脑)——虽然比毫米，厘米而且在-也可以根据浏览器或设备的dpi在视觉上有所不同。因此，当使用绝对长度时，像素(px)是问题最少的。一个问题px不过，旧版本的IE无法自行调整它们的大小。
如果开发的目标用户可能会通过web浏览器手动调整文本大小，那么px度量单位可能不是一个好的选择。使用时要确保px对于字体大小来说，可访问性不是问题。
相对长度
另一种长度单位是相对长度。这意味着它们的大小取决于字体大小赋给它们的父元素。可能的单位是新兴市场，％而且前女友．
不是很多网页设计师使用前女友-它是字母“x”在当前字体中的高度。新兴市场而且％使用值要容易得多。新兴市场而且％动作一致，这只是语法问题:
0.5 em等于50％1 em等于100％0.2 em等于20％0.73 em等于73％2.21 em等于221%
Html，体{字体大小:85%;/* = (.85em) */} h1{字体大小:110%;/* = (1.1em) */｝
比例都是相对于元素的父元素字体大小．因此，如果基本字体大小(in身体或超文本标记语言)设置为80%，一个孩子与一个字体大小的0.2 em或20％会是原来80%高度的20%
字体栈
CSS字体堆栈是一个字体列表，其中包括可以在各种操作系统和平台上很好地工作的字体，其目标是使版式尽可能保持一致。下面是一个字体堆栈的例子:
body {font-family: Georgia, Times，“Times New Roman”，serif;｝
在上面的例子中，web浏览器将从左到右，直到它在用户的计算机中找到一个字体。例如，它将搜索Georgia字体，如果没有找到，它将继续搜索Times字体，以此类推。
有许多创建字体堆栈的选项，在博客和ide(如Dreamweaver)中也有许多流行的预制字体堆栈。字体堆栈的思想是提供在许多计算机上可用的理想字体，然后在这些计算机后面提供备用字体，以便在首选字体不可用的情况下降级为备用字体。努力实现的一个很好的目标是为广泛的用户创建漂亮的字体，但也要考虑到首选字体并非对所有用户都可用的情况。
有几个关键项目要记住，当创建自定义字体堆栈:
- 应该有大量的后备字体。上面的例子只列出了三个，但是如果有更多的话就更好了。
- 所选择的字体应该可以在许多平台上使用。例如，Arial在Windows上被广泛使用，而与之相当的Helvetica几乎在所有mac电脑上都有。
- 对于适合Linux用户的字体堆栈，请查看Linux字体网页设计师指南．
开发字体库的最佳实践
同一字体堆栈中的所有字体应该具有相同(或相似)的纵横比。有些字体的每个字母比其他字体更宽或更高，因此它们的纵横比更大。所以，如果我们把Verdana(主要是Windows)和Helvetica(主要是mac)放在一起，我们就满足了上述要求。
然而，由于Verdana比Helvetica宽得多，与大多数Windows电脑相比，文本在大多数mac电脑上看起来会有很大的不同。下图显示了四种常见的长宽比的差异窗口的字体．如你所见，Verdana和Georgia比Arial和Times更宽更高。
在较大的文本块中，差异更明显。如果我们有一个字体栈，其中Verdana用于Windows, Helvetica用于mac，下面的图片显示了显著的差异。
因此，当开发字体堆栈时:
- 确保您考虑了不同的操作系统(Windows、Mac和Linux)。
- 确保一个字体栈是全无衬线或者全衬线(为了一致性)
- 确保堆栈中的字体具有相似的纵横比。
以下是各种纵横比类型最常见的字体列表:
- 广泛的无衬线字体:Verdana,日内瓦
- 狭窄的无衬线字体:大河马字体,Arial, Helvetica
- 衬线宽:格鲁吉亚,乌托邦
- 狭窄的衬线:Times, Times New Roman
- 等宽字体:Courier, Courier New, Lucida Console
如果你需要更多关于字体堆叠的帮助，CodeStyle已经创建了一个非常有用的字体堆叠构建器，它包括Mac、Windows和Linux之间的所有字体。
伪类和伪元素
CSS伪类和伪元素非常适合针对特定类型的元素。伪类以冒号(：)后面跟着类/元素名。有几种与版式相关的CSS伪类/伪元素，例如:徘徊而且:首字母．
让我们来看看一些有助于排版风格的方法。
链接和动态伪类
的设计一个网站的超链接是非常重要的。使用锚链接伪类为每个链接状态创建字体样式。:徘徊可能是最熟悉的，为它创建一个单独的(但类似的)样式，以提供链接元素是交互式的视觉提示，这是一个很好的实践。
下面是链接伪类:
A:链接{颜色:#666666;文字修饰:没有;} a:访问{颜色:#333333;} a:hover {text-decoration: underline;} a:active{颜色:#000000;｝
第一个、最后一个和第n个伪元素
下面的伪元素都与一个元素相对于HTML文档及其中的其他HTML元素的位置有关。:首字母允许以元素的第一个字母为目标。这里有一个例子:
P:首字母{字体大小:30pt;显示:块;浮:左;Margin: 0 5px 5px 0;｝
如您所见，这个伪元素有助于创建首字下沉．
的::一线CSS伪元素允许您选择包含文本的HTML元素的第一行。下面是一个将第一行文本加粗并将其字母大写的示例:
P::first-line {font- size:粗体;首字母:大写;｝
注意:截至2015年8月15日谷歌Chrome浏览器有一个bug首字母属性时将忽略CSS属性::一线伪元素选择器。
:nth-child ()是一个CSS3伪元素会以它为目标n页面中的第一个元素或父元素，这取决于选择器的特殊性。在下面的例子中，我们的目标是页面上的第二段。
P:n -child(2) {background: #e7f0ce;填充:10 px;｝
我们也可以针对a内的第二段div或者列表中的第二个列表项如下:
Div p:n -child(2) {background: #e7f0ce;填充:10 px;} ul li:n -child(2){背景:#e7f0ce;填充:10 px;｝
也可以玩一下: nth-child(甚至)而且: nth-child(奇怪的)伪类来获取偶数和奇数元素。
还有:第一个孩子伪元素(CSS2)和:胎(CSS3)伪元素，可以选择集合中的第一个和最后一个元素。
结论
我们已经介绍了CSS排版的基础知识。只要有一点创意，用CSS排版就可以走向一些美丽而有趣的方向。了解CSS非常重要，因为你是否在为本地用户构建站点高尔夫球场或者财富50强的公司，你会遇到很多。
在下一个部分，我们将讨论一些CSS技术和最佳实践的CSS排版。
- CSS排版:基础
- CSS排版:技术和最佳实践
- CSS排版:示例和工具
相关内容
关于作者
凯拉奈特是一个网页设计师和网页开发谁爱编码方式为她自己的好。她从事自由设计/开发工作，并帮助管理XHTML Shop。和她保持联系
