Blogger新手教學：如何設計文章標題樣式

先說一下，我也是新手，這篇比較像是我自己的筆記。如果能幫到你，那就太好了；如果有錯誤的地方，也可以在留言指正喔。

首先，在撰寫模式時只要將文字選取，使用想要的標題層級即可。

而HTML模式則要使用<h1>／<h2>／<h3>／<h4>／<h5>／<h6>做開頭，以下說明如何使用HTML設計標題。

文章目錄

文字樣式

文字大小

標題標籤<h1>~<h6>有預設的大小之分，例如：

也可以以數值【font-size】 指定標題的大小：

<h1 style="font-size: 2rem;"> 我是h1標題 </h1>
<h2 style="font-size: 1.7rem;"> 我是h2標題 </h2>
<h3 style="font-size: 1.5rem;"> 我是h3標題 </h3>

參考網站▼

中文 CSS 排版原則指南
CSS font-size 文字大小

粗體／斜體

粗體【strong】

Blogger無論在撰寫模式還是HTML模式，將文字選用標題，文字都會顯示成粗體字。

但！是！，預覽文章就可以發現文字實際上還是細字體，所以我們還是需要在HTML模式加上<strong>或<b>標籤。

在意義上，<strong>表示重要文字，<b>則無意。▼

<h1><strong>我是標題</strong></h1>

斜體【em】

斜體標籤是<em>或<i> 。在意義上，<em>表示強調文字，<i>則無意。▼

<h1><em>我是標題</em></h1>

文字顏色【color】

可以以單字使用預設顏色，也可以使用色號指定▼

文字背景顏色【background-color】

依照背景顏色的範圍，我們有兩個標籤可以使用：<span>或<div>。

<span>是區塊標籤，所以只有文字部分有背景顏色▼

<div>是區域標籤，所以是整行文字的背景都有顏色▼

框線

框線的設定分別有以下幾種寫法：

• 四條框都相同     〉只要寫一個數值
• 四條框都不同     〉以【上、右、下、左】順時針的順序寫四個數值
• 兩兩條框線相同 〉以【上下、左右】寫兩個數值
• 只設定單一框線 〉例如設定某一框線的顏色：
  border-color-top(上)／border-color-bottom(下)／border-color-left(左) ／ border-color-right(右)

框線顏色/粗細

一樣，依照框線的範圍使用<span>或<div>標籤。

• 【border-style】指定框線樣式和位置
• none：無框線
• solid：實線
• dashed：長虛線
• double：雙條線
• dotted：短虛線



如果四條框線都一樣，例如實線，那麼寫法如下▼




如果四條框線想用不同的樣式，那麼順序以【上、右、下、左】設定▼



• 【border-width】指定框線寬度：
可以用thick(粗線)／medium(中等寬)／thin(細線)指定預設寬度
也可以直接指定數值


• 【border-color】 指定框線顏色


• 【border-radius】 讓框線導圓角


• 【margin】 框線邊界(外距)


• 【padding】 框線內距

分隔線

使用<hr>標籤▼

也可以設定一下分隔線的樣式▼

實作

說了這麼多，直接來實作看看吧。▼