css - 排版模板或良好做法

Question

当我用 css 设计网页时，排版是我永远无法做到的事情之一，标题和正文在外观和感觉上都不像我在网络上看到的大多数其他网站那样好。通过这个我主要是我的排版感觉不像这些网站上的那样可读和宽敞

我确实尝试复制这些外观漂亮的网站的 css，但我似乎从来没有得到相同的结果(或者至少我似乎从未将这些技术变成我自己的，以便我将来可以使用它们)。另外，在排版方面，我的 CSS 无处不在；如果以后需要更改样式，我会花很长时间搜索相关值

当我刚开始学习 css 时，我发现了很多关于如何使页面布局正确(静态、流畅、左/右导航)的教程，但我从未发现任何关于如何获得正确外观和感觉的有用的东西当谈到排版时。 另一方面，有很多关于排版的书籍，但似乎对如何使排版在网络上看起来不错没有帮助。

我希望您能建议一些资源，或任何始终保证该类型在网络上看起来不错的固定方法

谢谢

Answer 1

这篇文章可能有用:http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

浏览您喜欢的网站并试用它们的 CSS，您已经在做正确的事；这是最好的学习方式之一。

一般来说，当我处理排版时，您可以做的最好的事情就是考虑三件事:对比度、颜色和视觉层次。

• 对比度:如果您的文本显示在背景颜色对比不佳的背景上，那么它看起来会很糟糕。如此糟糕，事实上，它可能被视为“无法访问”。您可以使用 Colour Contrast Check 等工具确保您的文本符合 Web Content Accessibility Guidelines .
• 颜色:您可能会发现您喜欢的大多数网站都没有真正的黑色文本。纯黑色在自然界中并不常见，白底黑字是您可以获得的最高对比度，看起来有点刺眼。大多数网站通过使用诸如 color: rgb(30,30,30);
  之类的 css 使黑色文本略带灰色来淡化它 如果您想使用颜色，请尝试使用 basic color theory 来选择可以很好地协同工作的颜色。 .要么，要么选择一种漂亮的深色并坚持使用黑色。
• 视觉层次结构:基本上，为更重要的标题使用更大的字体。因此，h1 很可能是您最大的一段文本，每个大小一直下降到 h6，以及 p 中的任何其他内容标签应该与您在此处看到的文本的大小大致相同。 Webdesign Tuts 刚刚发布 an article on visual hierarchy非常好。

希望对您有所帮助!