Lista de Atributos CSS y HTML Admitidos

Con SendPulse, puedes agregar y editar tus plantillas de correo electrónico usando el editor HTML. En este artículo, veremos qué etiquetas HTML y propiedades CSS se pueden usar en las plantillas de correo electrónico.

Índice

Etiquetas HTML Admitidas

La tabla enumera las etiquetas HTML que puedes usar en tus plantillas de correo electrónico.

Etiqueta Función Atributos
Elemento de Plantilla
head Almacena información de servicio, como estilos o título de página. dir — establece la dirección del texto;

lang — establece el idioma del texto de la plantilla
p Define un párrafo align — establece la alineación horizontal del texto;

class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
span Define un elemento en línea class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
h1, h2, h3, h4, h5, h6 Define encabezados de nivel 1-6 align — establece la alineación horizontal del texto;

class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
img Inserta una imagen align — establece la alineación horizontal del texto;

border — establece el ancho del borde alrededor de la imagen;

class — establece la clase de estilo;

height — establece la altura de la imagen;

hspace — establece márgenes horizontales;

id — especifica el identificador del elemento;

src — establece la ruta de la imagen;

style — establece el estilo del elemento;

usemap — conecta la imagen y el mapa de imagen (elemento <map>);

vspace — establece márgenes verticales;

width — establece el ancho de la imagen
a Agrega un enlace class — establece la clase de estilo;

href — establece la dirección del enlace;

id — especifica el identificador del elemento;

style — establece el estilo del elemento;

target — determina dónde abrir el documento vinculado
hr Crea una línea horizontal align — establece la alineación horizontal del texto;

size — establece el grosor de la línea;

width — establece el ancho de la imagen
br Establece un salto de línea class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
Formato de texto
b, strong Pone un texto en negrita class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
i Pone en cursiva un texto class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
u Subraya un texto class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
s, strike Aplica el formato de tachado class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
label Especifica una etiqueta de texto para la etiqueta input class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
font Especifica estilos de fuente class — establece la clase de estilo;;

color — establece el color del texto;

face — establece la fuente del texto;

id — especifica el identificador del elemento;

size — establece el tamaño de fuente;

style — establece el estilo del elemento
small Disminuye el tamaño de fuente en uno en comparación con el texto sin formato class — establece la clase de estilo;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
Lista
li Crea un elemento de lista class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento;

type — sets the marker type
ol Crea una lista numerada (ordenada) class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento;

type — establece el tipo de marcador
ul Crea una lista con viñetas (desordenada) class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento
Tabla
table Crea una tabla align — establece la alineación horizontal del texto;

bgcolor — establece el color de fondo de la tabla;

border — establece el ancho del borde alrededor de la imagen;

cellpadding — establece la distancia entre el borde de la celda y su contenido;

cellspacing — establece el espacio entre las celdas de la tabla;

class — establece la clase de estilo;

dir — establece la dirección del texto;

frame — determina cómo mostrar el borde exterior de la tabla;

id — especifica el identificador del elemento;

rules — determina cómo mostrar los bordes entre las celdas de la tabla;

style — establece el estilo del elemento;

width — establece el ancho de la tabla
tr Define una fila de tabla align — establece la alineación horizontal del texto;

bgcolor — establece el color de la fila de fondo;

class — establece la clase de estilo;

dir — establece la dirección del texto;

id — especifica el identificador del elemento;

style — establece el estilo del elemento;

valign — establece la alineación del contenido de la fila vertical
td Define una celda de tabla abbr — establece una breve descripción del contenido de la celda;

align — establece la alineación horizontal del texto;

bgcolor — establece el color de la celda de fondo;

class — establece la clase de estilo;

colspan — establece el número de celdas fusionadas horizontalmente;

dir — establece la dirección del texto;

height — establece la altura de la imagen;

id — especifica el identificador del elemento;

lang — establece el idioma del texto de la celda;

rowspan — establece el número de celdas fusionadas verticalmente;

scope — define cómo se asocia la celda con el encabezado;

style — establece el estilo del elemento;

valign — establece la alineación vertical del contenido de la celda;

width — establece el ancho de la celda
th Define una celda de encabezado de tabla abbr — establece una breve descripción del contenido de la celda;

align — establece la alineación horizontal del texto;

background — establece la imagen de la celda de fondo;

bgcolor — establece el color de fondo de la celda;

class — establece la clase de estilo;

colspan — establece el número de celdas fusionadas horizontalmente;

dir — establece la dirección del texto;

height — establece la altura de la imagen;

id — especifica el identificador del elemento;

lang — establece el idioma del texto de la celda;

scope — define cómo se asocia la celda con el encabezado;

style — establece el estilo del elemento;

valign — establece la alineación vertical del contenido de la celda;

width — establece el ancho de la celda

Algunos clientes de correo electrónico utilizan sus propios conjuntos de estilos, por lo que recomendamos utilizar los atributos estándar para las etiquetas <table>, <tr>, <td>, y <th>.

Propiedades de CSS Admitidas

Ten en cuenta que todas las propiedades deben escribirse en línea usando el atributo style.

Propiedad Función
Fondo
background Establece las propiedades del estilo de fondo
background-color Establece el color de fondo
Bordes
border Establece todas las propiedades de estilo de borde a la vez
border-color Establece el color del borde
border-width Establece el ancho de todos los bordes
border-style Establece el estilo de línea para todos los bordes
border-bottom Establece todas las propiedades de estilo del borde inferior a la vez
border-bottom-color Establece el color del borde inferior
border-bottom-style Establece el estilo de la línea del borde inferior
border-bottom-width Establece el ancho de la línea del borde inferior
border-left Establece todas las propiedades de estilo del borde izquierdo a la vez
border-left-color Establece el color del borde izquierdo
border-left-style Establece el estilo de línea del borde izquierdo
border-left-width Establece el ancho de la línea del borde izquierdo
border-right Establece todas las propiedades de estilo del borde derecho a la vez
border-right-color Establece el color del borde derecho
border-right-style Establece el estilo de línea del borde derecho
border-right-width Establece el ancho de la línea del borde derecho
border-top Establece todas las propiedades de estilo del borde superior a la vez
border-top-color Establece el color del borde superior
border-top-style Establece el estilo de la línea del borde superior
border-top-width Establece el ancho de la línea del borde superior
Elemento
display Especifica la salida del elemento y la visualización visual en la página
height Establece la altura del elemento
width Establece el ancho del elemento
Fuente
color Establece el color del texto
font Establece todas las propiedades de estilo de fuente a la vez
font-family Establece la familia de fuentes de texto
font-size Establece el tamaño de fuente
font-style Establece el estilo de fuente, por ejemplo, normal o italic
font-variant Determina cómo se deben representar las letras minúsculas, es decir, si se deben dejar sin modificar (normal) o aplicar minúsculas (small-caps)
font-weight Establece el grosor de la fuente
Lista
list-style-type Establece el tipo de marcador para cada elemento de la lista
Tabla
table-layout Establece el ancho de las celdas de la tabla según el contenido
Texto
letter-spacing Establece el espacio entre letras en el texto
line-height Establece el interlineado en el texto
text-align Establece la alineación horizontal del texto
text-decoration Especifica la decoración del texto, como subrayado, tachado o parpadeo
text-indent Establece el tamaño de sangría antes de una línea en un bloque de texto
text-transform Convierte texto a caracteres en mayúsculas o minúsculas, por ejemplo, convierte todos los caracteres del texto o el primer carácter de cada palabra en una oración en mayúsculas
vertical-align Establece la alineación vertical del texto

Para las etiquetas <table>, <tr>, <td>, y <th>, te recomendamos duplicar los estilos style con los atributos apropiados. En el siguiente ejemplo, además de los estilos style, los atributos align, width, bgcolor, cellpadding, cellspacing, y border están 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;">

Insertar una Imagen de Fondo

Puedes insertar una imagen de fondo en el editor HTML como en el siguiente ejemplo:

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

Si necesitas establecer opciones adicionales, como sangría y alineación, usa este ejemplo:

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

Donde url('//www.spcdn.org/title-green-bck.png') es un camino hacia tu imagen.

Última actualización: 28.07.2023

    Califica este artículo sobre "Lista de Atributos CSS y HTML Admitidos"

    Opinión de los usuarios: 4 / 5 (17)

    Anterior

    Cómo Trabajar con el Editor HTML

    Siguiente

    Cómo Usar Plantillas de Correo Electrónico Gratuitas

    Popular en nuestro blog

    Pruebe SendPulse hoy mismo gratis