Inline CSS 與安全屬性

上一課我們學了用 Table 排版。但光有結構還不夠，你的 EDM 需要顏色、字體大小、間距——這些全靠 CSS。

問題來了：Email 裡的 CSS 規則跟網頁完全不同。

為什麼 class 在 Email 裡不能用？

在網頁上，你通常會這樣寫 CSS：

<style>
  .product-name { color: #333; font-size: 18px; }
</style>
<p class="product-name">經典白 T</p>

但在 Email 裡，這招行不通：

寫法	說明	Email 支援
外部 CSS 檔案	`<link href="style.css">`	完全不支援
`<style>` 標籤	寫在 `<head>` 裡	Gmail 會整段砍掉
Inline CSS	寫在標籤上 `style="..."`	幾乎全部支援

結論：Email 裡只能用 inline CSS。

所謂 inline CSS，就是把樣式直接寫在 HTML 標籤的 style 屬性裡：

安全的 CSS 屬性清單

不是所有 CSS 屬性在 Email 裡都能用。以下是「安全名單」——在主流郵件客戶端都能正常運作的屬性：

文字相關

屬性	用途	範例
`color`	文字顏色	`color: #e74c3c;`
`font-size`	文字大小	`font-size: 16px;`
`font-weight`	文字粗細	`font-weight: bold;`
`font-family`	字體	`font-family: Arial, sans-serif;`
`text-align`	文字對齊	`text-align: center;`
`text-decoration`	底線/刪除線	`text-decoration: none;`
`line-height`	行高	`line-height: 1.5;`

區塊相關

屬性	用途	範例
`background-color`	背景色	`background-color: #f5f5f5;`
`padding`	內距	`padding: 15px;`
`border`	邊框	`border: 1px solid #ddd;`
`width`	寬度	`width: 100%;`
`vertical-align`	垂直對齊	`vertical-align: top;`

危險名單（避免使用）

屬性	為什麼危險
`margin`	Outlook 支援不穩定，改用 `padding` 或空白 `<td>`
`float`	Outlook 完全不支援
`display: flex/grid`	大部分不支援
`position`	不支援
`box-shadow`	大部分不支援
`border-radius`	Outlook 不支援（其他還行）
`background-image`	支援度很差

實作：用 Inline CSS 美化商品卡片

還記得上一課的商品卡片嗎？我們來加上完整的 inline CSS 讓它變好看：

按鈕的特殊技巧

你可能注意到上面的「立即搶購」按鈕不是用 <button>，而是用一個 Table 包著 <a> 連結。

這是因為 Email 裡的 <button> 不可靠。最安全的做法是：

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="background-color: #e74c3c; padding: 12px 30px;">
      <a href="https://shop.example.com" style="color: #ffffff; text-decoration: none; font-size: 16px;">
        立即搶購
      </a>
    </td>
  </tr>
</table>

用 <td> 的 background-color 做按鈕底色，用 <a> 做連結和文字樣式。這樣在所有客戶端都能正常顯示和點擊。

Inline CSS 的缺點與應對

Inline CSS 最大的缺點就是重複又冗長。同樣的樣式要寫在每一個標籤上。

但在 EDM 裡，這是唯一可靠的方式。應對策略：

善用複製貼上：做好一個商品卡片的模板，複製修改
用 AI 幫忙：告訴 AI 你要的樣式，讓它幫你生成重複的 inline CSS
CSS Inliner 工具：先用 <style> 寫好 CSS，再用工具自動轉成 inline

AI 協作：學了這個，跟 AI 怎麼配合？

Inline CSS 寫起來很煩，但 AI 超擅長這種重複性工作。

你的人類優勢：

你知道哪些 CSS 屬性在 Email 裡安全，能幫 AI 把關
你能判斷配色和排版是否符合品牌風格

可以這樣跟 AI 說：

幫我把這段 EDM HTML 加上 inline CSS：標題用 #333333、22px、粗體，說明文字用 #666666、14px，價格用 #e74c3c、24px 粗體。所有 CSS 都要 inline，不要用 class 或 style tag。

練習題

互動示範

DEMO 1可以修改程式碼試玩

DEMO 2可以修改程式碼試玩

挑戰任務

Task 1

寫一個 <p> 標籤，用 inline CSS 設定：文字顏色 #e74c3c、字體大小 24px、粗體、文字置中。內容寫「限時特價 NT$ 499」。

Task 2

做一個 Email 安全的按鈕：用 table + td + a 的組合，按鈕底色 #27ae60（綠色），文字白色、16px、無底線，padding 12px 30px，按鈕文字寫「加入購物車」。

Task 3

用 inline CSS 做一個商品資訊區塊：背景色 #f9f9f9、padding 20px、1px 實線 #e0e0e0 邊框。裡面放商品名稱（20px、#333、粗體）、說明（14px、#666、行高 1.6）和價格（22px、#e74c3c、粗體）。

← BackNext Lesson →