Список поддерживаемых CSS и HTML атрибутов в шаблоне письма

В SendPulse вы можете добавлять и редактировать шаблоны ваших писем с помощью упрощенного редактора HTML. В статье рассмотрим, какие теги HTML и свойства CSS можно использовать в шаблонах писем.

Поддержка тегов в HTML

В таблице приведены теги HTML, которые можно использовать в шаблонах писем.

Тег Функция Атрибуты
Элементы шаблона
head Хранит служебную информацию, например, про стили или заголовок страницы

dir — задает направление текста;

lang — устанавливает язык, на котором написан текст внутри шаблона

p Определяет параграф или текстовый абзац

align — определяет горизонтальное выравнивание текста;

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

span Определяет строчный элемент

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

h1, h2, h3, h4, h5, h6 Определяют заголовки 1-6 уровней

align — определяет горизонтальное выравнивание текста;

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

img Используется для вставки изображения

align — определяет горизонтальное выравнивание изображения;

border — определяет ширину рамки вокруг изображения;

class — задает стилевой класс;

height — определяет высоту изображения;

hspace — устанавливает отступы по горизонтали;

id — указывает идентификатор для элемента;

src — указывает на путь к изображению;

style — определяет стиль элемента;

usemap — связывает между собой изображение и карту-изображение (элемент <map>);

vspace — устанавливает отступы по вертикали;

width — определяет ширину изображения

a Добавляет ссылку

class — задает стилевой класс;

href — задает адрес ссылки;

id — указывает идентификатор для элемента;

style — определяет стиль элемента;

target — определяет, где открывать документ, на который ведет ссылка

hr Создает горизонтальную линию

align — определяет горизонтальное выравнивание линии;

size — устанавливает толщину линии;

width — устанавливает ширину линии

br Устанавливает перенос строки

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

Форматирование текста
b, strong Выделяет жирным шрифтом фрагмент текста

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

i Устанавливает курсивное начертание шрифта

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

u Отображает текст как подчеркнутый

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

s, strike Отображает текст как перечеркнутый

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

label Определяет текстовую метку для тега input

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

font Используется для указания стилей шрифта

class — задает стилевой класс;

color — определяет цвет текста;

face — определяет шрифт текста;

id — указывает идентификатор для элемента;

size — определяет размер шрифта;

style — определяет стиль элемента

small Уменьшает размер шрифта на единицу по сравнению с обычным текстом

class — задает стилевой класс;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

Список
li Создает элемент списка

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента;

type — устанавливает тип маркера

ol Создает нумерованный (упорядоченный) список

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента;

type — устанавливает тип маркера

ul Создает маркированный (неупорядоченный) список

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента

Таблица
table Создает таблицу

align — определяет горизонтальное выравнивание содержимого таблицы;

bgcolor — устанавливает цвет фона таблицы;

border — задает ширину рамки таблицы;

cellpadding — определяет расстояние между границей ячейки и ее содержимым;

cellspacing — определяет расстояние между ячейками таблицы;

class — задает стилевой класс;

dir — задает направление текста;

frame — определяет как отображать внешнюю границу таблицы;

id — указывает идентификатор для элемента;

rules — определяет каким образом отображать границы между ячейками таблицы;

style — определяет стиль элемента;

width — задает ширину таблицы

tr Определяет строку таблицы

align — определяет горизонтальное выравнивание содержимого строки;

bgcolor — устанавливает цвет фона строки;

class — задает стилевой класс;

dir — задает направление текста;

id — указывает идентификатор для элемента;

style — определяет стиль элемента;

valign — определяет вертикальное выравнивание содержимого строки

td Определяет ячейку таблицы

abbr — устанавливает краткое описания содержимого ячейки;

align — определяет горизонтальное выравнивание содержимого ячейки;

bgcolor — устанавливает цвет фона ячейки;

class — задает стилевой класс;

colspan — устанавливает число ячеек, объединенных по горизонтали;

dir — задает направление текста;

height — устанавливает высоту ячейки;

id — указывает идентификатор для элемента;

lang — устанавливает язык, на котором написан текст внутри ячейки;

rowspan — устанавливает число ячеек, объединенных по вертикали;

scope — определяет способ связывания ячейки с заголовком;

style — определяет стиль элемента;

valign — определяет вертикальное выравнивание содержимого ячейки;

width — задает ширину ячейки

th Определяет заголовочную ячейку таблицы

abbr — устанавливает краткое описания содержимого ячейки;

align — определяет горизонтальное выравнивание содержимого ячейки;

background — устанавливает фоновое изображение ячейки;

bgcolor — устанавливает цвет фона ячейки;

class — задает стилевой класс;

colspan — устанавливает число ячеек, объединенных по горизонтали;

dir — задает направление текста;

height — устанавливает высоту ячейки;

id — указывает идентификатор для элемента;

lang — устанавливает язык, на котором написан текст внутри ячейки;

scope — определяет способ связывания ячейки с заголовком;

style — определяет стиль элемента;

valign — определяет вертикальное выравнивание содержимого ячейки;

width — задает ширину ячейки

Некоторые почтовые клиенты используют свои наборы стилей, поэтому для тегов <table>, <tr>, <td> и <th> мы рекомендуем использовать стандартные атрибуты.

Поддержка свойств CSS

Все свойства должны быть прописаны инлайново с использованием style.

Свойство Функция
Фон
background Устанавливает свойства стиля фона
background-color Определяет цвет фона
Границы
border Устанавливает сразу все свойства стиля границы
border-color Устанавливает цвет границ
border-width Задает ширину четырех границ
border-style Задает стиль линии для четырех границ
border-bottom Устанавливает сразу все свойства стиля нижней границы
border-bottom-color Устанавливает цвет нижней границы
border-bottom-style Задает стиль линии для нижней границы
border-bottom-width Задает ширину линии для нижней границы
border-left Устанавливает сразу все свойства стиля левой границы
border-left-color Устанавливает цвет левой границы
border-left-style Задает стиль линии для левой границы
border-left-width Задает ширину линии для левой границы
border-right Устанавливает сразу все свойства стиля правой границы
border-right-color Устанавливает цвет правой границы
border-right-style Задает стиль линии для правой границы
border-right-width Задает ширину линии для правой границы
border-top Устанавливает сразу все свойства стиля верхней границы
border-top-color Устанавливает цвет верхней границы
border-top-style Задает стиль линии для верхней границы
border-top-width Задает ширину линии для верхней границы
Элемент
display Задает вывод и визуальное отображение элементов на странице
height Задает высоту элемента
width Задает ширину элемента
Шрифт
color Задает цвет шрифта
font Устанавливает сразу все свойства стиля шрифта
font-family Устанавливает семейство шрифта текста
font-size Устанавливает размер шрифта
font-style Задает стиль шрифта, например, normal или italic
font-variant Определяет, как нужно представлять строчные буквы — оставить их без модификаций (normal) или делать их все прописными уменьшенного размера (small-caps)
font-weight Устанавливает начертание (насыщенность) шрифта
Список
list-style-type Устанавливает вид маркера для каждого элемента списка
Таблица
table-layout Устанавливает ширину ячеек таблицы, основываясь на ее содержимом
Текст
letter-spacing Устанавливает межбуквенное расстояние в тексте
line-height Устанавливает межстрочный интервал в тексте
text-align Определяет горизонтальное выравнивание текста
text-decoration Задает оформление текста, например, подчеркивание, перечеркивание или мигание
text-indent Задает размер отступа перед строкой в текстовом блоке
text-transform Преобразовывает текст в заглавные или прописные символы, например, все символы текста или первый символ каждого слова в предложении в заглавный
vertical-align Определяет вертикальное выравнивание текста

Для тегов <table>, <tr>, <td> и <th> рекомендуем дублировать стили style соответствующими атрибутами. В примере ниже помимо стилей style прописаны атрибуты align, width, bgcolor, cellpadding, cellspacing и border.

<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;">

Вставка фонового изображения

Вставить фоновое изображение в HTML-редакторе можно по примеру:

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

Если нужно задать дополнительные параметры, например, отступ и выравнивание, используйте этот пример:

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

Где url('//www.spcdn.org/title-green-bck.png') — путь к файлу рисунка.

Оцените, насколько полезна статья "Список поддерживаемых CSS и HTML атрибутов в шаблоне письма"

Оценка: 3 / 5

    Популярное в нашем блоге

    Начните пользоваться сервисом SendPulse прямо сегодня