4分钟学会网页样式[译]

长文本很难解析，也因此不易阅读。每行设置字符限制，可以大大提高大量文本的可读性和吸引力。

body {

2margin: 0 auto;

3max-width: 50em;

}

在为文本容器添加了样式后，为文本本身添加样式可好?

字体

浏览器的默认字体为Times，可看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体，如Helvetica或Arial可以大大提高你网页的可读性。

body {

font-family:"Helvetica","Arial", sans-serif;

}

如果你坚持要用衬线体，可以试试Georgia。

当我们让文本更具吸引力时，也需要让它更具可读性。

间隔

当用户觉得一个页面崩坏的时候，通常来说都是间距问题。通过在文本周围和文本内设置适当的间距就可以增加页面的吸引力。

body {

line-height: 1.5;

padding: 4em 1em;

}

h2 {

margin-top: 1em;

padding-top: 1em;

}

虽然到目前为止布局已经大大改善，但让我们添加更多细节处理。

颜色和对比度

白色背景上的黑色文字看起来会比较扎眼。为文本选择一款较软一点的黑色，让页面阅读起来更舒服。

body {

color: #555;

}

为了保持一个良好的对比度，让我们为重要文本选择一个更黑暗的阴影。

h1,

h2,

strong {

color: #333;

}

虽然大部分页面在视觉上已经有所提升，但是一些元素依然显得格格不入，如代码段。

平衡

只需要一些额外的调整就可以平衡页面：

code,

pre {

background: #eee;

}

code {

padding: 2px 4px;

vertical-align: text-bottom;

}

pre {

padding: 1em;

}

在这一点上，你可能想让你的页面脱颖而出，让它更有个性。

主色调

大多数品牌都有一个主色调，作为视觉基调。在一个网页上，这个主色调可以用来强调交互元素，如链接。

a {

color: #e81c4f;

}

但是为了保持平衡/协调，我们还需要一些额外的颜色。

辅助色

主色调可以用更微妙的色调来补充，用于边框，背景，甚至正文中。

body {

color: #566b78;

}

code,

pre {

background: #f5f7f9;

border-bottom: 1px solid #d8dee9;

color: #a7adba;

}

pre {

border-left: 2px solid #69c;

}

已经改变了色调，为什么不一并改变外形/字体...

添加logo

header img {

display: inline-block;

height: 120px;

vertical-align: top;

width: 120px;

}

让我们借这个机会，来提高文本风格。

header h1 {

color: white;

font-size: 2.5em;

font-weight: 300;

}

header a {

border: 1px solid #e81c4f;

border-radius: 290486px;

color: white;

font-size: 0.6em;

letter-spacing: 0.2em;

padding: 1em 2em;

text-transform: uppercase;

text-decoration: none;

transition: none 200ms ease-out;

transition-property: color, background;

}

header a:hover {

background:  #e81c4f;

color: white;

}