如何展示你的寫作使其閃耀：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提供