有關HTML電子郵件時事通訊的CSS編碼標准的困惑

Question

我正在編寫電子郵件通訊。 我已經看到一些有關良好電子郵件編碼的准則。.我想詢問有關電子郵件新聞稿的CSS代碼，例如，它傾向於對內聯CSS進行編碼，但是對於一些免費模板，我發現了這樣的代碼

       <style type="text/css">

       body { color:#000; background-color:#fff; font-family:Arial, Helvetica, sansserif; text-align:center; }
       h2 { color:#2255DB; font-size:16px; margin-top:15px; margin-bottom:0px; }        
       h2 a:link { text-decoration:none; }
      .footer { fontsize:11px; text-align:center; color:#2255DB; }// and son on 

       </style>

在人的身體代碼就像

    <p class="footer" style="color:#2255DB;"> footer...</footer>//again style  tag

有時我發現像這樣的整體內聯樣式..

    <span style="font-weight: bold; width: 525px;">
    Lorem ipsum dolo
    </span><br><br>// and son on  ,,  

上面提到的兩個代碼在電子郵件客戶端中都可以正常工作，我也已經從Campaign Monitor等中看到了標准，所以我很困惑哪種樣式更好。.我們是否應該像上面提到的代碼中那樣使用樣式和/或整體內聯代碼，如果有人可以使我明白這一點。

編輯 ：一旦編碼，有沒有免費的服務可以幫助檢查郵件客戶端的有效代碼？

Answer 1

許多郵件客戶端將刪除嵌入式樣式表。 最好對所有內容都使用內聯樣式。

在您的示例中，您正在設置BODY標簽的樣式-但是，如果我在Gmail中閱讀了您的電子郵件，則該頁面已經具有OWN正文標簽-因此您的郵件將被剝離。

我發現廣告系列監控指南是一個很好的參考資源。

這是一個很好的測試：將電子郵件保存在靜態HTML頁面上，然后在MS Word上打開它。 這是一個非常好的“最壞情況”。

如果您打算進行任何認真的電子郵件營銷工作， Exact Target有一個出色的工具，它實際上可以在不同的客戶端中呈現您的電子郵件，並為您提供這些平台的屏幕截圖PDF以供查看。

Answer 2

從我已經完成的HTML電子郵件中，以及按照http://24ways.org/2009/rock-solid-html-emails/的建議，我建議始終將樣式置於內聯。

您提到了http://www.campaignmonitor.com/css/ ，它確實表明Gmail將成為客戶端，其中樣式不會出現內聯問題。

編輯：如果對這種情況下的Gmail為什么是敗類感興趣，請查看第1194.22節， http：//mail.google.com/mail/help/accessibility.html。

Answer 3

為了確保HTML時事通訊看起來和設計一樣緊密，我肯定會使用內聯樣式。

不幸的是，您必須非常明確自己的樣式，否則某些軟件（例如Gmail）將覆蓋您的樣式聲明。 有時確實很痛苦，但值得IMO這樣做。

HTML電子郵件簽名也是如此。

所以絕對要使用內聯樣式:)

哦，還有一件事。 我知道這是2012年，並且有大量的設計師/前者建議在HTML電子郵件和簽名中使用html標簽（甚至是html5元素），但我會盡量遵循傳統的方法，並使用表格來確保該代碼沒有不必要的偽像。

Answer 4

對於電子郵件新聞稿格式，由於不同的電子郵件客戶端以不同的方式呈現布局，因此我強烈建議您使用內聯css （主要是字體標簽及其屬性）來設置文本樣式。 也可以使用表格結構代替div布局，以使大多數電子郵件客戶端之間的布局保持一致。

Answer 5

為電子郵件創建HTML模板確實很麻煩。 測試也通常極其困難且不可靠，即使從表示已測試所有內容的服務中也是如此。 已知較舊的郵件客戶端會忽略CSS和較新的HTML元素。 此外，郵件客戶端可能會使用其自己的CSS覆蓋布局，從而覆蓋某些CSS。

我的建議：

1）使用內聯樣式，如其他人所述。 將它們應用於一切。 例如，不要指望在div中添加字體大小以應用於div內部的<p> （應該如此！）。 將樣式添加到兩者，或至少添加直接父樣式。

2）使用表格進行任何布局（ugh！），而不要使用邊距和填充。 一些較舊的郵件客戶端可能不太關心CSS，可能會剝離所有CSS，或僅應用其中的摘要。

3）以電子郵件仍然可讀的方式設計電子郵件，即使電子郵件客戶端丟棄了您的所有CSS（這也是很可能的）。 這就是為什么您經常收到大部分為圖像的電子郵件新聞通訊的原因。

Answer 6

對所有內容使用內聯樣式，以確保您的HTML電子郵件在所有客戶端上都顯示相同的樣式 。

您可以使用一個很好的工具來內聯HTML內容。 它由mail-chimp提供（我猜他們對電子郵件了解一兩件事） http://beaker.mailchimp.com/inline-css

Answer 7

最好使用嵌入式樣式而不是嵌入式CSS，因為某些主要的電子郵件客戶端（例如Outlook 2007）不支持電子郵件中的CSS。

Gmail不支持嵌入式CSS。

解決此問題的一種方法是，在每個測試結果的“開發人員工具”下拉菜單中，使用我們的CSS轉換工具將嵌入式CSS轉換為內聯。

解決字體，字體顏色和字體大小之類的問題的另一種方法是：Gmail將您的Body標簽轉換為DIV。 這實際上可以為您帶來好處，因為您可以在BODY中使用DIV支持的任何內聯CSS屬性。 但是，重要的是要知道，某些客戶端不支持BODY標記，因此您還應該在嵌入式CSS中包含相同的聲明。 另外，請記住，您不能依賴於BODY屬性，例如“ bgcolor”，因為DIV不支持該屬性。