Incorporador de CSS para Email
Incorpore regras de bloco CSS <style> no atributo style de cada tag HTML correspondente, para HTML de email onde a maioria dos clientes remove tags <style>. Suporta seletores simples de tag, classe, ID e tag+classe — sem combinadores descendentes, pseudo-classes ou cascata de especificidade.
Entrada
When off, rules this tool can't inline are dropped instead of preserved.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-email-inliner \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlInput": "<style>p { color: red; }</style><p>Hello</p>",
"keepUnsupportedRules": "true",
"removeClassAttrs": ""
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-email-inliner` tool (CSS Email Inliner) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-email-inliner/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Incorporador de CSS para Email — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
A maioria dos clientes de email — Gmail, Outlook e muitos outros — remove blocos <style> e conteúdo <head> quando renderizam um email HTML, ou os ignora de forma imprevisível. O único CSS garantido de permanecer é CSS escrito diretamente em cada elemento como um atributo style="...". "Incorporação de CSS" é o processo de pegar regras escritas em um bloco <style> normal e copiar suas declarações para cada elemento que correspondem, para que o email seja renderizado corretamente em qualquer lugar sem depender do suporte de stylesheet.
Esta ferramenta faz exatamente isso: cole HTML que contém um bloco <style>, e ele reescreve cada tag correspondente com um atributo style inline carregando as declarações resolvidas, então remove (ou opcionalmente mantém) o bloco <style> original.
Escopo honesto: apenas seletores simples
Um mecanismo completo de seletor CSS — combinadores descendentes (div p), combinadores filho/irmão (div > p, p + span), pseudo-classes e pseudo-elementos (a:hover, p::first-line), seletores de atributo ([href]), e resolução de cascata baseada em especificidade — é um problema de análise genuinamente difícil sem um DOM de navegador real para consultar. Esta ferramenta funciona de forma isomórfica (navegador, servidor e API) sem um analisador DOM disponível, portanto não tenta deliberadamente nenhum disso.
O que ela suporta, combinado com varredura baseada em padrão da fonte HTML bruta:
- Seletores de tag —
p,td,h1 - Seletores de classe —
.button - Seletores de ID —
#header - Seletores de tag + classe —
p.intro
Qualquer outra coisa em sua folha de estilos — um seletor descendente, uma pseudo-class, um seletor de atributo, uma lista de vírgula misturando formas suportadas e não suportadas — é classificada como "não suportada" e, por padrão, mantida em um bloco <style> no topo da saída em vez de ser silenciosamente descartada ou não correspondida. Desative isso se preferir que a saída não tenha bloco <style> algum.
Também não há cascata de especificidade: quando duas ou mais regras suportadas correspondem ao mesmo elemento, aquela que aparece mais tarde em sua folha de estilos vence para qualquer propriedade que ambas definirem — independentemente de ser um seletor de tag, classe ou ID. Um navegador real ponderaria seletores de ID acima de seletores de classe acima de seletores de tag; esta ferramenta não. O atributo style="..." pré-existente de um elemento é sempre preservado e sempre vence sobre qualquer coisa extraída da folha de estilos.
Se seu template de email depender de seletores descendentes, pseudo-classes ou resolução de especificidade precisa, use um inliner baseado em ferramenta de construção — juice ou Premailer ambos implementam um mecanismo de seletor completo e são a escolha certa para folhas de estilos complexas.
Como usá-lo
- Cole HTML contendo um bloco
<style>na caixa de entrada. - Deixe "Manter regras não suportadas" marcada para preservar media queries, regras de pseudo-class e outros seletores que esta ferramenta não pode incorporar em um bloco
<style>no topo da saída (a maioria dos clientes de email que suportam media queries de forma alguma ainda lerão um bloco<style>colocado lá). Desmarque para descartá-los completamente. - Marque "Remover atributos de classe" se quiser que
class="..."seja removido da saída após seus estilos terem sido incorporados — útil porque alguns inboxes marcam emails que ainda fazem referência a nomes de classe externos. - Copie ou baixe o HTML resultante do painel de saída.
A saída é atualizada automaticamente conforme você edita a entrada.
FAQ
Isso vai lidar com meu template de email inteiro corretamente?
Ele lida com o caso comum — tag, classe, ID e regras tag+classe — corretamente. Se sua folha de estilos usar seletores descendentes, pseudo-classes ou depender de especificidade CSS para resolver conflitos entre regras, esta ferramenta deixará essas regras em um bloco <style> em vez de adivinhar, portanto verifique a saída antes de enviar. Veja a seção de escopo acima.
O que acontece com as consultas @media?
Elas não podem ser incorporadas (media queries não estão vinculadas a um único elemento), portanto são deixadas em um bloco <style> na saída quando "Manter regras não suportadas" está marcada. Alguns clientes de email (notavelmente Apple Mail e versões mais recentes do Outlook/Gmail) realmente leem um bloco <style> para media queries mesmo após remover outro styling — essa é exatamente a razão pela qual esta ferramenta as preserva lá em vez de descartá-las.
Meu elemento já tinha um atributo style="..." — o que acontece com ele?
Ele é mantido e sempre tem precedência sobre qualquer coisa incorporada da folha de estilos, correspondendo a como um navegador real prioriza estilos inline sobre regras de stylesheet.
Isso valida ou corrige HTML quebrado? Não — é uma transformação best-effort, não um validador HTML. Em entrada malformada, ele volta a retornar seu HTML inalterado em vez de produzir saída garbled ou um erro.
Privacidade
Esta ferramenta funciona inteiramente em seu navegador. Seu HTML — incluindo quaisquer links incorporados, pixels de rastreamento ou conteúdo personalizado — nunca é carregado em um servidor.