将样式应用于放置在 C# 代码中的 <a href> 标记答案

【问题标题】：Applying style to <a href> tag placed inside C# code将样式应用于放置在 C# 代码中的 <a href> 标记
【发布时间】：2016-08-18 10:30:06
【问题描述】：

我正在使用 .cs 文件中的 html 代码来设计用于发送电子邮件的模板。我在<a href>标签中添加了style标签，但是在邮件实际发送时并没有生效。代码如下：

public static void Email()
{
   StringBuilder sb= new StringBuilder();
   sb.Append("<a href='#' style='font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;color:#fff;text-decoration:none;line-height:2em;font-weight:bold;text-align:center;display:inline-block;border-radius:5px;text-transform:capitalize;background-color:#208ed5;margin:0;border-color:#208ed5;border-style:solid;border-width:10px 20px' target='_blank'>");
   sb.Append("link</a>");
}

【问题讨论】：

我认为您应该在样式属性后使用双引号，例如style = "font-family:'Helvetica Neue'; color: green; width: 100px;".
字符串格式化问题
@Reddy 是的字符串格式问题，感谢您指出。我删除了 Helvetica Neue 周围的单引号，现在它可以正常工作了。谢谢
@sumedha 从Helvetica Neue 中删除引号将不会采用此字体。
@sumedha 如果我的回答解决了您的问题，请将其标记为答案。

标签： c# html css asp.net

【解决方案1】：

用反斜杠转义引号：

style=\"font-family:\'Helvetica Neue\',Helvetica,Arial,sans-serif;font-size:14px;color:#fff;text-decoration:none;line-height:2em;font-weight:bold;text-align:center;display:inline-block;border-radius:5px;text-transform:capitalize;background-color:#208ed5;margin:0;border-color:#208ed5;border-style:solid;border-width:10px 20px\"

【讨论】：

【解决方案2】：

问题在于您构建 HTML 字符串的方式...

在这段代码中

"<a href='#' style='font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;color:#fff;text-decoration:none;line-height:2em;font-weight:bold;text-align:center;display:inline-block;border-radius:5px;text-transform:capitalize;background-color:#208ed5;margin:0;border-color:#208ed5;border-style:solid;border-width:10px 20px' target='_blank'>"

style 属性将在此处停止 style='font-family:'，因为打开样式规则的单引号是闭合的...因此，您的其他规则甚至不被考虑到此样式属性中。

解决方案：您真的不需要将字体系列值用引号引起来。您可以说style='font-family:Helvetica,Arial,sans-serif;

如果你有一个带有空格的字体系列名称，那么你必须用引号括起来。

编辑1：如果您的字体系列名称包含空格，您需要将它们用引号括起来。所以您必须将Helvetica Neue 用引号括起来。添加双引号并使用反斜杠转义其含义..如下所示..

style='font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;

【讨论】：

Helvetica Neue 字体将被忽略。因为带空格的字体系列名称需要引号。
@BhojendraNepal 是的，谢谢.. 我注意到了。我会更新
@BhojendraNepal 更新

【解决方案3】：

使用双引号，但带有转义字符，如下所示：

sb.Append("<a href=\"#\" style=\"font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:14px;color:#fff;text-decoration:none;line-height:2em;font-weight:bold;text-align:center;display:inline-block;border-radius:5px;text-transform:capitalize;background-color:#208ed5;margin:0;border-color:#208ed5;border-style:solid;border-width:10px 20px\" target=\"_blank\">");
sb.Append("link</a>");

或者您可以始终使用旧的连接方式：

string sb = "<a href=\"#\" style=\"font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:14px;color:#fff;text-decoration:none;line-height:2em;font-weight:bold;text-align:center;display:inline-block;border-radius:5px;text-transform:capitalize;background-color:#208ed5;margin:0;border-color:#208ed5;border-style:solid;border-width:10px 20px\" target=\"_blank\">";
sb += "link</a>";

【讨论】：

【解决方案4】：

很简单，在你的 .css 文件中定义样式为类，并在后端在这里指定类。示例：

.css

.custom-style-a {
 font-family:"Helvetica Neue Helvetica,Arial,sans-serif";
font-size:14px;
color:#fff;
text-decoration:none;
line-height:2em;
/*rest of styles here*/
....
}

附加的 html 将是：

sb.Append("<a href='#' class=' custom-style-a' .....>");

优点：

实现简单，以后可以轻松维护样式。不需要复杂的格式，必要时重新使用样式。

【讨论】：

他正在构建一个电子邮件模板。如果您使用类，您将如何呈现样式？？

【解决方案5】：

您不能在单引号内嵌套单引号。您在style = '... 'Helvetica Neue' ...' 中使用'Helvetica Neue'。你应该这样做style = "... 'Helvetica Neue' ...".`

我还看到锚元素周围已经有双引号，因此在样式之后直接添加双引号将是有问题的。在 Bhojendro 已经解释过的样式之后，您必须使用转义字符 \" 而不是 "。

【讨论】：