CSS de entrada

Snippets de estilos inline

Exemplos CSS para inline

Converta regras CSS em snippets de style inline para e-mail ou HTML. Exemplo:

Estilos de título e botão

CSS de entrada:

Entrada

Saída de snippets inline:

Saída

Use Exemplo acima para carregar mais dados de exemplo.

O que é CSS para estilos inline?

Estilos inline são atributos style em elementos HTML. Clientes de e-mail, alguns CMS e certos frameworks exigem estilos inline porque removem ou ignoram folhas de estilo externas. Esta ferramenta converte regras CSS em snippets style="..." inline que você pode colar em HTML. As especificações W3C CSS definem o formato fonte.

A conversão é executada completamente no seu navegador. Nada é enviado a nenhum servidor. A saída está pronta para HTML. Para inlining completo de e-mail HTML (corresponder seletores a elementos), use uma ferramenta dedicada como Juice ou similar. Esta ferramenta gera snippets de estilo a partir de regras CSS.

Como usar esta ferramenta

Colar ou enviar CSS

Copie seu CSS e cole no editor à esquerda. Também pode clicar em Enviar para carregar um arquivo .css. O botão Exemplo carrega dados de exemplo. CSS inválido mostrará um erro.

Revisar os snippets inline

O painel direito mostra snippets de estilo para cada regra. Cada snippet é uma string <code>style="..."</code> que você pode adicionar a elementos HTML. Os seletores são listados para você saber qual elemento recebe quais estilos.

Copiar ou baixar

Use Copiar ou Baixar. Cole os snippets no seu HTML. Para formatar CSS primeiro, o Formatador CSS. Para minificar, o Minificador CSS.

Como funciona a conversão

A ferramenta analisa suas regras CSS e converte cada bloco de declaração em uma string style="property: value; ...". Os seletores são listados para você saber qual snippet se aplica a qual elemento. A saída segue a sintaxe do atributo style HTML. Para inlining completo HTML+CSS (corresponder seletores a elementos automaticamente), ferramentas como Juice ou Can I Email documentam o suporte de clientes de e-mail.

Quando CSS para inline ajuda

O HTML de e-mail é o caso de uso mais comum. Gmail, Outlook e muitos clientes removem tags <style> e folhas de estilo externas. Estilos inline são a forma mais confiável de estilizar e-mail. Converter seu CSS aqui fornece snippets para adicionar a <td>, <div> e outros elementos.

Sistemas CMS, geradores PDF ou ferramentas legado que aceitam HTML mas não arquivos CSS frequentemente precisam de estilos inline. Converter aqui fornece o formato esperado. Para prefixos de vendor antes do inlining, o Prefixador CSS. Para formatar ou minificar CSS primeiro, Formatador CSS ou Minificador CSS.

Perguntas frequentes

Inlina em HTML completo?

Esta ferramenta gera snippets de estilo a partir de regras CSS. Não analisa HTML nem aplica estilos a elementos. Para conversão completa (HTML + CSS para HTML com estilos inline), use uma ferramenta como Juice ou similar.

Meus dados são privados?

Sim. A conversão é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.

E as pseudo-classes?

Pseudo-classes como :hover e ::before não podem ser inlinadas. Estilos inline suportam apenas propriedades estáticas. Use para estilos base; clientes de e-mail podem suportar <style> limitado para hover.

E as media queries?

Media queries não podem ser inlinadas. Estilos inline são por elemento. Para e-mail responsivo, use uma abordagem híbrida: estilos base inline e <style> para media queries onde suportado.

Especificidade e herança?

Estilos inline têm alta especificidade. Quando você cola um snippet em um elemento, ele sobrescreve a maioria dos outros estilos. A ordem importa quando várias regras se aplicam ao mesmo elemento.

Ferramentas relacionadas

Para a especificação CSS: W3C CSS. MDN CSS é a referência. Can I Email documenta o suporte de clientes de e-mail para CSS.