No se han visto estilos CSS en el correo electrónico.

StackOverflow https://stackoverflow.com//questions/20007948

Pregunta

No puedo ver los estilos de CSS cuando se envía la siguiente página HTML (Yahoo / Gmail) utilizando Mutt.i, solo vea una tabla normal. Pero obtengo el estilo deseado cuando lo vea en un navegador.Por qué es así ?¿Me estoy perdiendo algo? 

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html

test.html 

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>

¿Fue útil?

Solución

HTML-EARRIL está muy limitado al punto donde incluso DIV y P Las etiquetas no siempre actúan como se espera.Tratar de crear tus propias etiquetas simplemente está pidiendo problemas.

Sus dos celdas de mesa deben verse así en lugar: 

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>

Además de sumar siempre su CSS, debe usar el color hexagonal de 6 dígitos para obtener un máximo de atención al cliente de correo electrónico.También debe re-declarar sus estilos de fuente en cada celda de mesa.Redundante como es, desafortunadamente eso es lo que se necesita en HTML-Email.

No olvide la pila de fuentes, ya que actualmente asume que el lector tiene instalado Helvetica.

Otros consejos

La forma de incluir CSS en un correo electrónico HTML es usar estilos en línea. 

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>

REF: http://www.htmlgoodies.com/beyond/css/article.php / 3679231

Es posible que tenga que echar un vistazo a este tutorial Comenzando con correos electrónicos HTML en tutsplus Este es un tutorial viejo pero realmente útil.

la mejor de las suertes.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top