Blogger 新手必看！搞懂模板 CSS，打造獨一無二的部落格風格！

身為 Blogger 新手，您是否曾經對部落格的外觀感到不滿意，卻又不知道從何下手修改呢？別擔心，這篇文章將帶您一步步了解 Blogger 模板的奧秘，學會用 CSS 打造獨一無二的部落格風格！

為什麼要把 CSS 寫在模板裡？

您可能會想：「為什麼不直接在文章裡寫樣式就好？」把 CSS 寫在模板裡，就像把所有化妝品都收在化妝包裡一樣，有以下幾個好處：

進入後台： 登入您的 Blogger 後台。
找到模板： 點擊左側選單的「主題」，再點擊「自訂」按鈕旁邊的下拉箭頭，選擇「編輯 HTML」。
編輯 HTML： 這時候您會看到一堆程式碼，別害怕！我們要找的就是 <b:skin><![CDATA[ 和 ]]></b:skin> 這兩個標籤，它們中間包圍的就是 CSS 程式碼。

CSS 就像是網頁的化妝師，可以讓您的文字變得更漂亮。以下是一些常用的 CSS 屬性，可以用來設定標題和段落的樣式：

font-family：字體。想用可愛的圓體、專業的襯線體，還是百搭的無襯線體？由您決定！
範例：font-family: 'Noto Sans TC', sans-serif; （使用思源黑體）
font-size：字體大小。
範例：font-size: 1.5em; （1.5 倍行高）
color：字體顏色。
範例：color: #333; （深灰色）
text-align：對齊方式。靠左、置中、靠右，還是兩端對齊？
範例：text-align: center; （置中對齊）
text-shadow：文字陰影。讓您的標題更有立體感！
範例：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); （陰影向右下方偏移，帶有透明度）
line-height：行高。調整行與行之間的距離，讓文字更易讀。
範例：line-height: 1.6;
margin：外邊距, 可以設定 element 與 element 之間的距離.
範例: margin: 20px; (上下左右都是 20px)
padding：內邊距, 可以設定 element 內容與邊框的距離。
範例: padding: 10px; (上下左右都是 10px)
border-bottom：下邊框, 常用來做底線效果
範例: border-bottom: 1px solid #000; (1px 寬, 實線, 黑色)

假設您想要讓所有的一級標題（<h1>）變成藍色、粗體、帶有陰影，可以這樣寫：


h1 {
  color: blue;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

如果想讓某個特定的標題或段落, 與其他同 element 的不一樣, 可以用 class。


.my-special-paragraph {
  font-size: 20px;
  color: red;
}
<p class="my-special-paragraph">這是一個特別的段落</p>

HTML 就像是網頁的骨架，決定了內容的結構。以下是一些常用的 HTML 標籤：

現在您已經掌握了 Blogger 模板 CSS 的基本知識，可以開始動手改造您的部落格了！別忘了，多嘗試、多練習，您一定能打造出獨一無二的部落格風格！如果遇到問題，可以善用瀏覽器的開發者工具（F12 或右鍵「檢查」），它可以幫助您找到問題所在。也可以把您的問題和程式碼貼出來，大家一起討論！