多个css类不起作用答案

【问题标题】：Multiple css classes not working多个css类不起作用
【发布时间】：2017-01-03 00:29:03
【问题描述】：

我正在将 docx 转换为 html 格式（使用 apache poi）并将其作为电子邮件发送。

生成的 html 的 sn-p 看起来像这样

<html>
<head>
	....
	<style>

		span.Normal{
			font-family: 'Arial';font-size: 9.0pt;
		}

		span.Title{
			font-family: 'Cambria';font-size: 28.0pt;color: #000000;
		}

		span.MySubtitle{
			font-family: 'Arial';font-size: 18.0pt;color: #000000;
		}

		span.MyTitle{
			font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
		}

	...
	</style>
</head>
<body> 
....

	<p class="Normal Title MyTitle">
		<span id="_GoBack">
			<span class="Normal Title MyTitle">Welcome Message</span>
			<span class="Normal Title MyTitle"> </span>
			<span class="Normal Title MyTitle">Username</span>
		</p>
		<p class="Normal Title MySubtitle">
			<span class="Normal Title MySubtitle">Issues and Solutions</span>
		</p>

	...
</body>
</html>

Outlook 客户端无法识别多个 css 类。它只渲染第一个 css 类“普通”并忽略其余部分。但我的原始格式（在 docx 中）存在于“MyTitle”和“MySubTitle”类中。

Outlook 是否支持多个 css？有没有办法可以控制多个 css 生成。

【问题讨论】：

您的问题可能与CSS Styling won't work in outlook 2010?有关。为了帮助调试，您还可以尝试更改各种类的内容。也许 Outlook 可以支持多个类，但您的特定样式不起作用。例如，为font-family、font-weight、color 等尝试单独的类。
Here 是一个很好的工具，可以确定 HTML 和 CSS 与多个电子邮件客户端的兼容性。

标签： css outlook apache-poi openxml outlook-2010

【解决方案1】：

好的，这里出了很多问题。首先，html 根本不正确。您有段落嵌套在段落中，并且您正在使用跨度来定义标题，并将每个单词分成它自己的跨度。

我不知道开头和结尾的那三个点是干什么用的，但它们不应该出现在样式标签中。

您的类名并不是真正的描述性，它们是重复规则，您将每个类应用于每个元素，并且它们在样式表中的顺序不正确，使理解发生的事情变得混乱。

我的建议是：

使用语义标记
丢弃类并使用语义选择器
使用 DRY 原则（不要重复自己）
按逻辑顺序列出规则，例如从最大开始到最小结束。

这里有一些使用您的样式规则重构的代码，并演示了如何使用每个元素。

<html>
	<head>
		<style>
			body {
				color: #000000;
			}
			h1,
			h2,
			p { 
				font-family: 'Arial';
			}
			h3 {
				font-family: 'Cambria';
			}
			h1 {
				font-size: 28pt;
			}
			h2 {
				font-size: 22pt;
			}
			h3 {
				font-size: 18pt;
			}
			p {
				font-size: 9pt;
			}
		</style>
	</head>
	<body> 
		<h1>Heading 1</h1>
		<h2>
			Heading 2
		</h2>
		<h3>
			Heading 3
		</h3>
		<p>
			This is paragraph text.
		</p>
	</body>
</html>

【讨论】：

这个 html 是由 apache-poi 自动生成的。我对此没有任何控制权。三个点代表更多代码。

【解决方案2】：

如前所述，您应该首先检查您的 html 以使其更清晰。电子邮件很难在每个单独的邮件客户端/服务器中正确和完善。因此，如果您想把事情做好，请查看网络上任何地方提供的所有免费和响应式模板。

邮件的经典而有效的解决方案是依赖 table 标签。

您可以找到good example here

此外，当涉及到在不同的邮件客户端上显示时，Outlook 是最困难的之一。有像 Litmus 这样的工具可以让您预览电子邮件的结果，但它非常昂贵。幸运的是，他们还提出了free responsive templates，您可以从中获得灵感。

不要犹豫，发布您的电子邮件的改进版本，以便我们查看并更有效地帮助您。

【讨论】：