Список поддерживаемых CSS и HTML атрибутов в шаблоне письма
В SendPulse вы можете добавлять и редактировать шаблоны ваших писем с помощью упрощенного редактора HTML. В статье рассмотрим, какие теги HTML и свойства CSS можно использовать в шаблонах писем.
Поддержка тегов в HTML
В таблице приведены теги HTML, которые можно использовать в шаблонах писем.
Тег | Функция | Атрибуты |
Элементы шаблона | ||
head |
Хранит служебную информацию, например, про стили или заголовок страницы |
|
p |
Определяет параграф или текстовый абзац |
|
span |
Определяет строчный элемент |
|
h1 , h2 , h3 , h4 , h5 , h6 |
Определяют заголовки 1-6 уровней |
|
img |
Используется для вставки изображения |
|
a |
Добавляет ссылку |
|
hr |
Создает горизонтальную линию |
|
br |
Устанавливает перенос строки |
|
Форматирование текста | ||
b , strong |
Выделяет жирным шрифтом фрагмент текста |
|
i |
Устанавливает курсивное начертание шрифта |
|
u |
Отображает текст как подчеркнутый |
|
s , strike |
Отображает текст как перечеркнутый |
|
label |
Определяет текстовую метку для тега input |
|
font |
Используется для указания стилей шрифта |
|
small |
Уменьшает размер шрифта на единицу по сравнению с обычным текстом |
|
Список | ||
li |
Создает элемент списка |
|
ol |
Создает нумерованный (упорядоченный) список |
|
ul |
Создает маркированный (неупорядоченный) список |
|
Таблица | ||
table |
Создает таблицу |
|
tr |
Определяет строку таблицы |
|
td |
Определяет ячейку таблицы |
|
th |
Определяет заголовочную ячейку таблицы |
|
Некоторые почтовые клиенты используют свои наборы стилей, поэтому для тегов <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')
— путь к файлу рисунка.
Обновлено: 19.08.2022
или