如何展示你的写作使其闪耀：3 个 CSS 样式技巧

已发表: 2022-03-22

你的写作是你博客的核心。

内容为王对吧？

这就是吸引人们并让他们阅读您的博客的原因。

但同样重要的是你如何实际展示你的写作。 视觉上，就是这样。

您的内容可能很棒，但如果有人难以阅读，您可能会失去比您想象的更多的读者。

看，我不是一个受过训练的作家，但我是一个网页设计师，我知道什么看起来不错。 而且通常看起来不错的东西与其说是装饰和品味，不如说是关于什么有效，什么使事情易于阅读和理解。

多年来，我一直在研究以数字形式显示内容的各种方法，因此我想向您展示一些快速简便的方法，您可以确保从网页设计师的角度来看，您的内容在博客文章中很好地显示。

有几种方法可以让您使用一点 CSS（层叠样式表）对您的博客进行快速样式调整，这样您，作者就可以展示您的内容，并让您的读者尽可能轻松地享受它。

我将为您提供一些 CSS 滑动代码，您可以将它们添加到自定义样式表中并根据自己的喜好进行编辑。 如果您不确定如何访问博客的自定义样式表，请按照有关如何在博客中编辑 CSS 的说明进行操作。

三个技巧来设计你的内容以展示你的写作

  1. 美化你的段落

为了确保您的段落易于阅读，请记住一些提示。 我们将在这里一起设置 p（段落）标签的样式。

  • 选择一种对眼睛容易的字体。 瞄准衬线或无衬线字体，而不是手写字体。

选择一个不太薄的重量。 某些非常细的字体在某些浏览器和操作系统（即 mac 或 PC）中看起来不太好，因此请人们为您检查并为您竖起大拇指。

同时，选择不太粗的字体。 您希望它与任何粗体文本有足够的对比。

选择字体时，请确保您使用的是系统字体、已上传到博客文件的字体或 Google 字体。 我建议使用 Google 字体，因为它们是免费的、种类最多且最容易使用的。 有关更多详细信息，请查看如何在您的博客上使用酷字体。

选择字体后，您将转到自定义样式表并添加以下代码：

<上一页>
p {
字体系列：插入字体名称；
}
</pre>

  • 使用在任何尺寸的屏幕上都易于阅读的字体大小。 在手机上查看您的博客，确保文字不会太小，不适合疲倦或年老的眼睛。

一个好的段落大小通常是 14 到 16 像素。 并非所有字体都以相同的大小显示相同，因此请与它们一起玩，看看什么看起来最好。

<上一页>
p {
字体系列：插入字体名称；
字体大小：16px；
}
</pre>

  • 使用适当的行高（前导）。 适当的行高也有助于提高可读性，因为它们为您的段落提供了喘息的空间。 一个好的行高是 1.5，换句话说，是文本大小的 1.5 倍（行高为 2 将是双倍行距）。

<上一页>
p {
字体系列：插入字体名称；
字体大小：16px；
行高：1.5；
}
</pre>

  • 避免在白色上使用纯黑色文本。 眼睛很难受。 而是为您的副本选择深灰色（我喜欢#333333）以降低对比度。

<上一页>
p {
字体系列：插入字体名称；
字体大小：16px；
行高：1.5；
颜色：#333333；
}
</pre>

  • 避免居中对齐段落。 将正文放在中心看起来很业余，并且更难阅读。 为什么？ 每次您的视线移到新的一行时，它都必须努力寻找下一行的起点，因为它永远不会在同一个位置。为诗歌、标题或短片吸引注意力的文本保留居中对齐并选择向左对齐或证明您的常规段落。 对齐文本的间距使段落的左侧和右侧都具有直边。

<上一页>
p {
字体系列：插入字体名称；
字体大小：16px；
行高：1.5；
颜色：#333333；
文本对齐：对齐；
}
</pre>

<pre>文本对齐：左； </pre> 是默认行为，除非您需要覆盖以前的样式，否则不需要指定。

  • 最后，添加空格。 您需要在段落之间留有足够的空白空间以获得最佳可读性。 一个好的经验法则是在每个段落下方添加一个边距，该边距大约等于字体大小的两倍。

<上一页>
p {
字体系列：插入字体名称；
字体大小：16px；
行高：1.5；
颜色：#333333；
文本对齐：对齐；
边距底部：32px；
}
</pre>

  1. 使用层次结构

当您使用标题和副标题概述您的帖子时，您会使用层次结构。

要在帖子中创建视觉层次结构，请设置标题和副标题的样式，以便轻松区分它们。 这里有一些提示：

  • 为所有不同大小的标题使用相同的字体。
  • 使用易于阅读的字体，例如衬线或无衬线字体。 您可以选择使用与正文相同的字体，但重量较重，或者您可以选择与正文形成鲜明对比的不同字体。
  • 将标题和副标题设置为粗体或更重。
  • 使用 Typecast 为您的标题使用不同的字体、大小和粗细，并将它们与您的段落文本进行比较。

如果您的段落的字体大小设置为 16 像素，以下是您可能会想出的大小调整示例。 然后你会从那里上去：

  • h6 标题 = 16px（通常与段落文本大小相同，但粗体并在自己的行上）
  • h5 标题 = 18px
  • h4 标题 = 22px
  • h3 标题 = 26px
  • h2 标题 = 30px
  • h1 标题（您的博客文章标题）= 36px

再次，使用 Typecast 看看什么看起来最适合您的眼睛。 一旦你决定了你想为你的标题使用的字体和大小，你会想要去你的自定义样式表并为你的所有标题添加这个 CSS：

<上一页>
h1，h2，h3，h4，h5，h6 {
字体系列：插入字体名称；
字体大小：36px；
字体粗细：粗体；
}
</pre>

接下来，您将添加一些 CSS 覆盖来更改每个级别标题的大小：

<上一页>
h2 {
字体大小：30px；
}

h3 {
字体大小：26px；
}

h4 {
字体大小：22px；
}

h5 {
字体大小：18px；
}

h6 {
字体大小：16px；
}
</pre>

  1. 使用链接

不要让你的读者思考！ 您的链接应该看起来像链接，这意味着它们应该完全显而易见，它们是可以点击的东西。 这里有一些方法可以做到这一点：

  • 为链接选择一种与常规文本形成对比的颜色。
  • 为您的链接保留一种颜色。 不要对标题、副标题、侧边栏小部件标题或任何其他文本使用相同的颜色。
  • 但是，如果您愿意，可以将这种颜色用于按钮，因为它们也是可点击的元素。
  • 不要在不是链接的文本下划线，这会让人困惑，因为人们通常认为带下划线的文本是链接。

<上一页>
一种 {
颜色：粉红色；
文字装饰：下划线；
}
</pre>

为各种链接状态设置样式，以进一步帮助您的读者将它们区分为链接。 当用户将鼠标悬停在它们上时，让它们改变外观会额外表明它是一个活动链接。

<上一页>
一：悬停{
颜色：蓝色；
文字装饰：无；
}
</pre>

您还可以选择以不同的方式设置已访问链接的样式，以向用户表明他们已经访问过某个链接。

<上一页>
一个：访问{
颜色：蓝色；
}
</pre>

展示你的作品，让它闪耀只需要几个简单的编辑

这些只是展示您的写作的一些技巧，使它们易于阅读，从而帮助您的内容脱颖而出！

您还有哪些其他方式来布局您的博客文章以使它们易于为您的用户阅读？

您想了解更多关于如何利用 CSS 使您的博客对您的读者更具吸引力并真正展示您的作品的信息吗？ 惊人的！ 那么我希望你能和我一起参加关于 CSS 的免费视频培训。 它很快就开始了，所以现在就注册。

图片由Pixabay提供