Blogger CSS 範例大全：20+ 個常用屬性，複製貼上就能用的樣式速查手冊 | CCC Blog

Blogger CSS 範例大全：20+ 個常用屬性，複製貼上就能用的樣式速查手冊

在學會如何將 CSS 放入 Blogger 範本後，下一步就是擴充您的「屬性軍火庫」。您認識的屬性越多，能做出的風格變化就越豐富。

本篇文章將採用「程式碼註解」的方式，直接展示文章排版中最常用的 CSS 屬性及其效果。您可以將此頁面當作速查手冊，在需要時快速找到並複製您想要的樣式程式碼。

一、文字樣式進階 (Advanced Text Styling)

font-weight - 字體粗細

控制文字的粗細程度，數值可以是 100-900（400=正常，700=粗體）。

.post-body .my-title {
  /* --- 字體粗細 --- */
  font-weight: 700; /* 設定字體為粗體 */
}

text-decoration - 文字裝飾

為文字加上或移除底線、刪除線等。

.post-body .my-link {
  /* --- 文字裝飾 --- */
  text-decoration: none; /* 移除超連結預設的底線 */
}
.post-body .old-price {
  text-decoration: line-through; /* 為文字加上刪除線 */
}

letter-spacing - 字元間距

調整每個「字」之間的水平距離，適度使用可增加設計感。

.post-body h1 {
  /* --- 字元間距 --- */
  letter-spacing: 2px; /* 讓標題文字之間拉開 2px 的距離 */
}

text-transform - 文字大小寫轉換

快速將英文字母轉換為全大寫、全小寫或首字大寫。

.post-body .all-caps-title {
  /* --- 文字大小寫轉換 --- */
  text-transform: uppercase; /* 將所有字母轉換為大寫 */
}

二、區塊背景與邊框 (Block Backgrounds & Borders)

background-color - 背景顏色

設定一個區塊的背景顏色。

.post-body .info-box {
  /* --- 背景顏色 --- */
  background-color: #f0f8ff; /* 設定一個淡藍色背景 */
}

border - 邊框

設定區塊的邊框，是寬度樣式顏色的簡寫。

.post-body .warning-box {
  /* --- 邊框 --- */
  /* 分開設定的寫法 */
  border-left-width: 5px; /* 左邊框寬度 5px */
  border-left-style: solid; /* 左邊框樣式為實線 */
  border-left-color: #ffc107; /* 左邊框顏色為黃色 */

  /* 簡寫法的寫法 (效果同上) */
  border-left: 5px solid #ffc107;
}

border-radius - 邊框圓角

將區塊的直角邊框，變成圓滑的導角。

.post-body img {
  /* --- 邊框圓角 --- */
  border-radius: 12px; /* 為圖片加上 12px 的圓角 */
}

box-shadow - 區塊陰影

為區塊加上立體感的陰影，數值分別是：水平偏移、垂直偏移、模糊半徑、顏色。

.post-body .card-style {
  /* --- 區塊陰影 --- */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 產生一個柔和的下方陰影 */
}

三、排版與空間控制 (Layout & Spacing Control)

display - 顯示類型

決定一個元素是自己佔據一行 (block)，還是跟文字排在一起 (inline)。

.post-body .my-button {
  /* --- 顯示類型 --- */
  display: inline-block; /* 像文字一樣並排，但又可以設定寬高和上下邊距 */
}

width / max-width - 寬度 / 最大寬度

控制區塊的寬度，max-width常用於響應式設計，避免內容在電腦大螢幕上變得過寬。

.post-body .article-container {
  /* --- 寬度 / 最大寬度 --- */
  width: 100%; /* 寬度為 100% */
  max-width: 800px; /* 但最寬不超過 800px */
}

list-style-type - 清單樣式

改變 <ul> 或 <ol> 清單前面的項目符號。

.post-body .no-bullets-list {
  /* --- 清單樣式 --- */
  list-style-type: none; /* 移除清單預設的圓點或數字 */
}

四、互動與裝飾性效果

:hover - 滑鼠懸浮偽類別

定義當滑鼠「懸浮」在一個元素上時，該元素要變成的樣子。

.post-body .my-link:hover {
  /* --- 滑鼠懸浮效果 --- */
  color: #d9534f; /* 滑鼠移到連結上時，顏色變紅 */
  text-decoration: underline; /* 同時浮現底線 */
}

::before / ::after - 偽元素

在不新增 HTML 的情況下，用 CSS 在一個元素的「內容之前」或「之後」插入裝飾性的東西。

.post-body .external-link::after {
  /* --- 偽元素 --- */
  content: ' ↗'; /* 在元素後面插入一個右上箭頭符號 */
  font-size: 0.8em; /* 讓這個符號小一點 */
  color: #5bc0de; /* 設為藍色 */
}

回到Google Blogger指南

Blogger CSS 範例解說