4

Tenho um arquivo CSS contendo o seguinte código.

.texto{

Color: Red;

}

Tenho o arquivo HTML com essas tags:

<html>
<body>

<span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>

<body>
</html>

Como faço para embutir o código CSS em todas as tags que tiver a classe .texto de modo automático?

Exemplo:

<html>
<body>

<span class="texto" style="Color: Red;">TEXTO 1<span>
<span class="texto" style="Color: Red;">TEXTO 2<span>
<span class="texto" style="Color: Red;">TEXTO 3<span>

<body>
</html>

Preciso para enviar e-mail com HTML formatado.

2
  • Correção. Pessoal desculpa, eu não mencionei que eu uso ASP.NET MVC C#. Possivelmente deve ter algo do lado do servidor que possa faz isso diretamente na View quando ela for carregada. Só que eu procurei mas não encontrei uma solução pratica. Commented 5/11/2014 às 19:14
  • 2
    Mencionou sim. Está nas tags. meta.pt.stackoverflow.com/questions/297/…
    – Maniero
    Commented 5/11/2014 às 19:56

5 Respostas 5

5

Alguns programas de email se dão bem com CSS declarado no próprio HTML:

<html>
<head>
    <style type="text/css">
    .texto {
        color: red;
     }
    </style>
</head>
<body>

<span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>

<body>
</html>

Porém é provável que certas coisas só funcionem com o atributo style inline em cada elemento, como você colocou na pergunta. Nesse caso não há solução simples, geralmente é o caso de fazer manualmente mesmo. Lembrando que CSS em email é sempre sujeito a falhas (certos programas de email aceitam algumas propriedades, outros não).

1
  • 1
    Concordo, utilizo CSS declarado no próprio CSS e não tenho problema. E fica mais fácil para um possível suporte futuro. Commented 5/11/2014 às 19:16
3

Existe um projeto muito interessante no GitHub chamado PreMailer.Net da autoria de Martin H. Normark para lidar precisamente com este assunto:

Biblioteca em C# para mover CSS para atributos de estilo inline, de forma a ganhar o máximo de compatibilidade com os clientes de e-mail.

Exemplo:

string htmlSource = File.ReadAllText(@"C:\caminho\para\email.html");

var result = PreMailer.MoveCssInline(htmlSource);

result.Html         // HTML com o CSS já no atributo `style`.
result.Warnings     // string[] com os eventuais erros durante o processamento.

O Blog a falar sobre este projeto:

Colocar CSS inline em C# e ASP.NET usando PreMailer.Net

1

Utilizando jquery vc pode fazer o seguinte:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('.texto').css('color', 'red');
  });
</script>

<body>
  <span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>
<body>
</html>

Desse jeito, ele fará com que a tag style seja carregada dentro do span quando a pagina for carregada.

4
  • 1
    Mas ele está falando de email! Ninguém vai deixar esse jQuery rodar dentro de uma mensagem de email.
    – bfavaretto
    Commented 5/11/2014 às 19:08
  • 1
    Valeu pela resposta. Mas eu não posso usar scripts no envio de e-mail porque os clientes de email não deixa executar os scripts. Pelo menos eu tentei e não funcionou. Commented 5/11/2014 às 19:09
  • 3
    Faltou mais jQuery.
    – Zuul
    Commented 5/11/2014 às 20:23
  • @Zuul Você ganhou a Internet hoje! Commented 5/11/2014 às 20:33
1

Olá alguns servidores de email não dão suporte ao CSS, somente inline visite esse site http://beaker.mailchimp.com/inline-css que faz a conversão do seu html para CSS inline

1
  • 1
    A ideia é boa, mas a "venda" da mesma carece alguma atenção: "faz a conversão do seu html para CSS" ?
    – Zuul
    Commented 5/11/2014 às 20:25
1

Olá, Antes de enviar o texto por email, prepare-o o texto para envio, segue um pequeno exemplo com Jquery:

$( "#prepareToSend" ).one( "click", function() {
  $("[class=texto]").css( "color", "red" );
});
.texto{
  color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="texto">email</p>

<button id="prepareToSend">Prepara html para enviar</button>

Como o Zull postou, tem o Projeto Premailer.net: Instale via Nuget (Package Manager Console):

PM> Install-Package PreMailer.net

Veja o uso no controller:

        public ActionResult TesteEmail()
    {
        string htmlFile = System.IO.File.ReadAllText(@"C:Emails\teste.html");

        var htmlToEmail = PreMailer.Net.PreMailer.MoveCssInline(htmlFile,true);// true para remover a tag style do html dps de copiar os estilos para tags no atributo syle:

        return Content(htmlToEmail.Html);
    }

Pelo que pude ver nesta biblioteca, é que ele só move o css para style inline se a mesma estiver na prória pagina html: - Entrada:

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<style>
    .well {background-color: #f5f5f5;}
    .text-success {color: green;}
    .text-center {text-align: center;}
</style>
</head>
<body>
<div class="well">
    <h1 class="text-center text-success">Hello World</h1>
</div>
</body>
</html>

Saida do Content(htmlToEmail.Html);:

<div class="well" style="background-color: #f5f5f5">
<h1 class="text-center text-success" style="text-align: center;color: green">Hello World</h1>
</div>

dei uma lida rápida também neste artigo: http://chrispebble.com/inlining-a-css-stylesheet-with-c/

1
  • 4
    Faltou mais jQuery, afinal o navegador é quem envia os emails e não o servidor.
    – Zuul
    Commented 5/11/2014 às 20:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .