个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在使用 Google Apps 脚本(来自电子表格)，并且我创建了几封包含表单超链接等的电子邮件。我想让这些链接看起来像按钮。我是编码的新手，所以解决方案不能太复杂。所有论坛都建议使用 CSS。有没有办法在 Google Apps 脚本中嵌入 CSS 代码？
例如，我想使用 this site (单击右下角的“获取代码”)生成 CSS 代码，然后通过将它们分配给 CSS 代码创建的类来格式化我的超链接。但我不知道在 Google Apps 脚本中创建 CSS 类的正确方法。
这是我的电子邮件的消息部分:
var message = '<HTML>';
message += "Hi, please click this button.";
message += '<br><br>';
message += '<a href="www.google.com" class="button"/>google</a>';
message += '<br><br></HTML>';
这是来自生成器网站的 CSS 代码:
.button{
text-decoration:none;
text-align:center;
padding:11px 32px;
border:solid 1px #004F72;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#E5FFFF;
background-color:#3BA4C7;
background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
最佳答案
既然你想在电子邮件中设置按钮的样式，你应该使用内联样式。这通常不是您想要的样式处理方式，但由于某些电子邮件客户端的限制，这是您的样式将得到尊重的一种方式。 (例如，Mozilla Thunderbird 会遵守内部样式表，但 Gmail 的网络邮件不会。)
为了简化这一点，为什么不将按钮创建移动到一个函数中，然后您可以在构建邮件时调用该函数？ function htmlMailButton()下面是对来自 this blog post 的 Awesome Email Button 的改编。 .
function sendButtonMail() {
var recipient = Session.getActiveUser().getEmail();
var message = '<body>';
message += "Hi, please click this button.";
message = htmlMailButton("Google","www.google.com");
message += '</body>';
GmailApp.sendEmail(recipient, 'Button', '', {htmlBody:message});
}
// Return HTML representing a clickable "button" labled with buttonLabel, going to link.
// Inspired by http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
function htmlMailButton( buttonLabel, link ) {
var button = '<table cellspacing="0" cellpadding="0"><tr>'
+ '<td align="center" width="300" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">'
+ '<a href="##LINK##" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">##BUTTONLABEL##</a>'
+ '</td> </tr> </table>';
return button.replace('##BUTTONLABEL##',buttonLabel)
.replace('##LINK##', link);
}
Awesome Email Button 是一个单单元格表格，这使得它在许多电子邮件客户端和 Web 服务中都非常可靠。博客中提供了调整大小的说明。背景颜色由 <td> 的样式控制(表格数据)标签，而文字颜色在<a>的风格。
编辑:有一些方便的工具，例如 MailChimp 的 CSS Inliner Tool可以帮助您从 CSS 转换 <style>内联样式的标签。如果您更喜欢通过 CSS 开发电子邮件正文的外观，这将很有帮助。参见 How do I use Google Apps Script to change a CSS page to one with inline styles? .
关于html - 如何在电子邮件中使用 CSS(特别是设计超链接按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20570361/
24
4
0
我是一名优秀的程序员,十分优秀！