如何在頁面中呈現電子郵件模板？

Question

我有一個電子郵件模板，我想在頁面中呈現。電子郵件模板有自己的CSS，如：

<style> 
body{ 
    font-size : 20px; 
} 
</style> 

，當我試圖使我的網頁電子郵件模板的CSS是壓倒我的網頁CSS。如何解決這個壓倒一切的問題？ ，我想呈現像gmail這樣的模板。

注意：不想在iframe內呈現。

Answer 1

選項1在進行電子郵件造型時，請將樣式保持內聯。儘管今天很多電子郵件客戶端都支持CSS，但防止它們干擾頁面其餘部分的最好方法是將樣式限制爲單個單元格。

在本質上，你會擁有很多：

<td style="font-size:20px"> 
    content here 
</td> 

選項2如果你不能改變的電子郵件HTML出於某種原因，另一種方式是，以適應你的網頁CSS更嚴格，並更多地針對頁面上的特定元素。

假設你的頁面有一個標題，一個主要內容和一個頁腳，並且電子郵件出現在你的主要內容的一部分中，你應該給每個這些塊一個id。然後，你的頁面的CSS看起來是這樣的：

/*** 
* Header 
***/ 
#header { 
    font-size:16px; 
} 
#header-nav { 
    font-size:15px; 
} 
#header-nav > a { /* affects all links inside header-nav */ 
    font-size:14px; 
} 

/*** 
* Main Content 
***/ 
#main { 
    font-size:18px; 
} 
#email-section { 
    /* we expect font-size of the email to be declared within itself. 
     And we are not worried that its style would overwrite any other 
    */ 
} 
#some-other-section { 
    font-size:14px; 
} 
#some-other-section > p { /* all paragraphs in this section */ 
    font-size:16px; 
} 

/*** 
* Footer 
***/ 
#footer { 
    font-size: 16px 
} 

如果你按照你的CSS定位的要素非常明確的這門學科，你平時幾乎不用擔心當您導入外部樣式表到您的網頁有關。

通常，你會發現人們使用過於寬鬆的選擇器規則適用於太多事情。 CSS開發人員非常瞭解級聯和特異性。

Answer 2

您收到的錯誤是合乎邏輯的，因爲網頁和電子郵件模板都具有相同樣式標籤名稱，例如「body」標籤。

你有2種方式 1）做電子郵件模板的所有內聯樣式（這很難做到）。 或 2）在html和CSS中更改電子郵件模板的樣式標籤名稱。 （這是完成任務的簡單方法，只需在電子郵件模板的html和css頁面的每個樣式標籤前添加「email」）即可。

然後在您的網頁中創建一個div標籤，並將相應的高度和寬度作爲您的電子郵件模板並將其放入該模板中。