Lista de atributos CSS e em HTML suportados

Com a SendPulse, você pode adicionar e editar seus modelos de e-mail usando o editor HTML. Neste artigo, veremos quais tags HTML e propriedades CSS podem ser usadas em modelos de e-mail.

Conteúdo

Tags HTML compatíveis

A tabela lista as tags HTML que você pode usar em seus modelos de e-mail.

Marcar Função Atributos
Elementos do modelo
head Armazena informações de serviço, como estilos ou título da página

dir — define a direção do texto;

lang — define o idioma do texto do modelo
p Define um parágrafo

align — define o alinhamento horizontal do texto;

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento
span Define um elemento embutido

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
h1, h2, h3, h4, h5, h6 Definir títulos de 1 a 6 níveis

align — define o alinhamento horizontal do texto;

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento
img Insere uma imagem

align — define o alinhamento horizontal da imagem;

borda — define a largura da borda ao redor da imagem;

class — define a classe de estilo;

altura — define a altura da imagem;

hspace — define as margens horizontais;

id — especifica o identificador do elemento;

src — define o caminho da imagem;

style — define o estilo do elemento;

usemap — conecta a imagem e o mapa de imagem (elemento <map>);

vspace — define as margens verticais;

largura — define a largura da imagem
a Adiciona um link

class — define a classe de estilo;

href — define o endereço do link;

id — especifica o identificador do elemento;

style — define o estilo do elemento;

target — determina onde abrir o documento vinculado
hr Cria uma linha horizontal

align — define o alinhamento da linha horizontal;

size — define a espessura da linha;

largura — define a largura da linha
br Define uma quebra de linha

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
Formatação de texto
b, strong Torna um texto em negrito

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
i Coloca um texto em itálico

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
u Sublinha um texto

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
s, strike Aplica a formatação tachada

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
label Especifica um rótulo de texto para a tag input

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
font Especifica estilos de fonte

class — define a classe de estilo;

cor — define a cor do texto;

face — define a fonte do texto;

id — define o identificador do elemento;

size — define o tamanho da fonte;

style — define o estilo do elemento
small Diminui o tamanho da fonte em um comparado ao texto simples

class — define a classe de estilo;

id — especifica o identificador do elemento;

style — define o estilo do elemento
Lista
li Cria um item de lista

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento;

type — define o tipo de marcador
ol Cria uma lista numerada (ordenada)

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento;

type — define o tipo de marcador
ul Cria uma lista com marcadores (não ordenada)

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento
Tabela
table Cria uma tabela

align — define o alinhamento horizontal do conteúdo da tabela;

bgcolor — define a cor de fundo da tabela;

borda — define a largura da borda ao redor da mesa;

cellpadding — define a distância entre a borda da célula e seu conteúdo;

cellspacing — define o espaçamento entre as células da tabela;

class — define a classe de estilo;

dir — define a direção do texto;

frame — determina como exibir a borda externa da tabela;

id — especifica o identificador do elemento;

regras — determina como exibir as bordas entre as células da tabela;

style — define o estilo do elemento;

largura — define a largura da tabela
tr Define uma linha da tabela

align — define o alinhamento do conteúdo da linha horizontal;

bgcolor — define a cor da linha de fundo;

class — define a classe de estilo;

dir — define a direção do texto;

id — especifica o identificador do elemento;

style — define o estilo do elemento;

valign — define o alinhamento vertical do conteúdo da linha
td Define uma célula da tabela

abbr — define uma breve descrição do conteúdo da célula;

align — define o alinhamento horizontal do conteúdo da célula;

bgcolor — define a cor de fundo da célula;

class — define a classe de estilo;

colspan — define o número de células mescladas horizontalmente;

dir — define a direção do texto;

altura — define a altura da célula;

id — especifica o identificador do elemento;

lang — define o idioma do texto da célula;

rowspan — define o número de células mescladas verticalmente;

escopo — define como a célula é associada ao cabeçalho;

style — define o estilo do elemento;

valign — define o alinhamento vertical do conteúdo da célula;

largura — define a largura da célula
th Define uma célula de cabeçalho de tabela

abbr — define uma breve descrição do conteúdo da célula;

align — define o alinhamento horizontal do conteúdo da célula;

fundo — define a imagem de fundo da célula;

bgcolor — define a cor de fundo da célula;

class — define a classe de estilo;

colspan — define o número de células mescladas horizontalmente;

dir — define a direção do texto;

altura — define a altura da célula;

id — especifica o identificador do elemento;

lang — define o idioma do texto da célula;

escopo — define como a célula é associada ao cabeçalho;

style — define o estilo do elemento;

valign — define o alinhamento vertical do conteúdo da célula;

largura — define a largura da célula

Alguns clientes de e-mail usam seus próprios conjuntos de estilo, por isso recomendamos usar os atributos padrão para o <table>, <tr>, <td> e <th> tags.

Propriedades CSS compatíveis

Observe que todas as propriedades devem ser gravadas em linha usando o atributo style.

Propriedade Função
Plano de fundo
background Define as propriedades do estilo de fundo
background-color Define a cor de fundo
Bordas
border Define todas as propriedades de estilo de borda de uma vez
border-color Define a cor da borda
border-width Define a largura de todas as bordas
border-style Define o estilo de linha para todas as bordas
border-bottom Define todas as propriedades de estilo da borda inferior de uma vez
border-bottom-color Define a cor da borda inferior
border-bottom-style Define o estilo da linha de borda inferior
border-bottom-width Define a largura da linha da borda inferior
border-left Define todas as propriedades de estilo da borda esquerda de uma vez
border-left-color Define a cor da borda esquerda
border-left-style Define o estilo da linha da borda esquerda
border-left-width Define a largura da linha da borda esquerda
border-right Define todas as propriedades de estilo da borda direita de uma vez
border-right-color Define a cor da borda direita
border-right-style Define o estilo de linha da borda direita
border-right-width Define a largura da linha da borda direita
border-top Define todas as propriedades de estilo da borda superior de uma vez
border-top-color Define a cor da borda superior
border-top-style Define o estilo da linha da borda superior
border-top-width Define a largura da linha da borda superior
Elemento
display Especifica a saída do elemento e a exibição visual na página
height Define a altura do elemento
width Define a largura do elemento
Font
color Define a cor do texto
font Define todas as propriedades de estilo de fonte de uma vez
font-family Define a família de fontes do texto
font-size Define o tamanho da fonte
font-style Define o estilo da fonte, por exemplo, normal ou italic
font-variant Determina como as letras minúsculas devem ser representadas, ou seja, se deve deixá-las inalteradas (normal) ou aplicar versaletes (caixas minúsculas)
font-weight Define o peso da fonte
List
list-style-type Define o tipo de marcador para cada elemento da lista
Table
table-layout Define a largura das células da tabela com base no conteúdo
Text
letter-spacing Define o espaçamento entre letras no texto
line-height Define o espaçamento entre linhas no texto
text-align Define o alinhamento horizontal do texto
text-decoration Especifica a decoração do texto, como sublinhado, tachado ou piscando
text-indent Define o tamanho do recuo antes de uma linha em um bloco de texto
text-transform Converte texto em caracteres maiúsculos ou minúsculos, por exemplo, transforma todos os caracteres no texto ou o primeiro caractere de cada palavra em uma frase em maiúsculas
vertical-align Define o alinhamento vertical do texto

Para a <table> , <tr>, <td> e <th>, recomendamos duplicar o estilo estilos com os atributos apropriados. No exemplo abaixo, além dos estilos style, os estilos align, width, bgcolor, cellpadding, cellspacing e border são especificados.

<table align="center" width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; width: 100%; max-width: 600px; margin: 0px auto; padding: 0px; border-collapse: collapse; border-spacing: 0; border: 0 none;">

Inserindo uma imagem de fundo

Você pode inserir uma imagem de fundo no editor HTML como no exemplo abaixo:

<td style=" background-image: url('//www.spcdn.org/title-green-bck.png')" />

Se você precisar definir opções adicionais, como recuo e alinhamento, use este exemplo:

<tr style=" background-image: url('//www.spcdn.org/title-green-bck.png'); padding:0; text-align:center; vertical-align:top">

Onde url('//www.spcdn.org/title-green-bck.png') é um caminho para sua imagem.

Última Atualização: 11.08.2023

    Rate this article about "Lista de atributos CSS e em HTML suportados"

    User Rating: 4 / 5 (10)

    Anterior

    Como trabalhar com o editor de HTML

    Próximo

    Como usar modelos de e-mail gratuitos

    Popular em nosso blog

    Teste o serviço de e-mails do SendPulse gratuitamente