10个自学 建网站必知的 CSS知识

自己学习做网站时，CSS是非常重要的，下面是自己学习做网站必知的10个CSS知识点。

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

   body { margin: 0 auto; max-width: 50em; }

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

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

   body { font-family: “Helvetica”, “Arial”, sans-serif; }

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

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

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

   body { line-height: 1.5; padding: 4em 1em; } h2 { margin-top: 1em; padding-top: 1em; }

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

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

   body { color: #555; }

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

   h1, h2, strong { color: #333; }

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

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

   code, pre { background: #eee; } code { padding: 2px 4px; vertical-align: text-bottom; } pre { padding: 1em; }

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

   a { color: #e81c4f; }

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

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

   body { color: #566b78; } code, pre { background: #f5f7f9; border-bottom: 1px solid #d8dee9; color: #a7adba; } pre { border-left: 2px solid #69c; }

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

8. 自定义字体由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。

   当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

   @import ‘https://fonts.googleapis.com/css?family=Roboto:300,400,500’; @import ‘https://fonts.googleapis.com/css?family=Roboto:300,400,500’; body { font-family: “Roboto”, “Helvetica”, “Arial”, sans-serif; }

9. 在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?header { background-color: #263d36; background-image: url(“header.jpg”); background-position: center top; background-repeat: no-repeat; background-size: cover; line-height: 1.2;         padding: 10vw 2em; text-align: center; }
10. 添加logo图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。让我们从Unsplash挑选一张漂亮的背景图片来美化header。

    header img { display: inline-block; height: 120px; vertical-align: top; width: 120px; }