博客新手 CSS 提示

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

对于许多人来说,他们接触网页设计和 CSS 这一奇妙世界的途径就是博客。他们开始写博客,因为它非常容易,而且你根本不需要了解任何设计知识。不久之后,他们希望稍微改变一下网站的设计以适应一些新的想法,于是他们发现自己越来越深入地了解自己花哨的博客是如何运作的。

迟早,他们会发现那个又肥又厚的 style.css 文件,他们的眼睛会因其可能性而大开。如果你是这种情况,这里有一些提示和需要注意的事项。

  1. 为您的主要内容设置良好的排版。人们访问您的页面,并继续访问您的页面,是因为您的内容。当然,您应该在整个页面中都使用良好的排版,但您确实应该确保您的主要内容非常易读。下面是一个非常易读的排版示例。背景颜色和颜色可能会应用于主要内容的 div,其余部分应用于 <p> 标签。
    background-color: white;
    color: #1c1c1c;
    font-family: helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-indent: 25px;
    margin-bottom: 20px;
  2. 为您的块引用设置漂亮的样式。有关本周早些时候 格式化块引用 的更多信息。
  3. 满足评论者的需求。如果您的博客评论数量不多,请不要让评论者在发表评论前进行注册。这很烦人,而且评论的人会少很多。此外,拥有一个好看的 文本区域提交按钮 也无妨。有一些插件可以让评论者订阅特定帖子的评论,我知道一些访客非常喜欢这个功能(但默认情况下不要选中它)。
  4. 在博客的所有页面上测试您的更改。由于博客使用数据库并在 PHP 等内容上运行,因此在没有一些非常可靠的技术知识的情况下,很难在本地机器上运行它们。因此,许多人“赤膊上阵”,直接在他们的实时博客上编辑 CSS。这有点吓人,因为如果您不知道自己在做什么,或者即使您知道,也可能会真的破坏某些东西!每次进行任何“赤膊上阵”编辑时,都要备份您的 css 文件,以便在出现任何问题时可以快速重新上传。在进行这种“赤膊上阵”样式更改时,往往会进行更改,然后重新加载主页并查看更改。请记住,(在大多数情况下)CSS 会影响所有页面,而不仅仅是主页!在进行 CSS 更改后,浏览您的博客,并确保在某个页面上看起来不错的更改不会破坏其他页面。
  5. 记住在所有主要浏览器中测试您的更改。 非常容易理解。如果您是 Mac 用户,您真的需要想办法在 IE 6 中查看您的浏览器。这可能是运行 Parallels、VMWare、Bootcamp 和您储藏室里旧的 Windows 机器,或者在凌晨 3 点打电话给您的朋友让他们发送屏幕截图。无论如何,都必须完成。
  6. 验证您的 CSS。不妨将您的 CSS 通过考验,并确保它通过了审查。