Перелік СSS та HTML атрибутів, які підтримуються в шаблоні листа
У SendPulse ви можете додавати та редагувати шаблони ваших листів за допомогою спрощеного редактора HTML. У статті розглянемо, які теги HTML та властивості CSS можна використовувати у шаблонах листів.
Підтримка тегів у HTML
У таблиці наведено теги HTML, які можна використовувати у шаблонах листів.
| Тег | Функція | Атрибути |
| Елементи шаблону | ||
head |
Зберігає службову інформацію, наприклад, про стилі або заголовок сторінки | dir — задає напрямок тексту;
|
p |
Визначає параграф або текстовий абзац | align — визначає горизонтальне вирівнювання тексту;
|
span |
Визначає малий елемент | class — задає стильовий клас;
|
h1 , h2 , h3 , h4 , h5 , h6 |
Визначають заголовки 1-6 рівнів | align — визначає горизонтальне вирівнювання тексту;
|
img |
Використовується для вставки зображення | align — визначає горизонтальне вирівнювання зображення;
|
a |
Додає посилання | class — задає стильовий клас;
|
hr |
Створює горизонтальну лінію | align — визначає горизонтальне вирівнювання лінії;
|
br |
Встановлює перенесення рядка | class — задає стильовий клас;
|
| Форматування тексту | ||
b , strong |
Виділяє жирним шрифтом фрагмент тексту | class — задає стильовий клас;
|
i |
Встановлює курсивне зображення шрифту | class — задає стильовий клас;
|
u |
Показує текст як підкреслений | class — задає стильовий клас;
|
s , strike |
Відображає текст як перекреслений | class — задає стильовий клас;
|
label |
Визначає текстову мітку для тега input |
class — задає стильовий клас;
|
font |
Використовується для вказівки стилів шрифту | class — задає стильовий клас;
|
small |
Зменшує розмір шрифту на одиницю в порівнянні зі звичайним текстом | class — задає стильовий клас;
|
| Перелік | ||
li |
Створює елемент списку | class — задає стильовий клас;
|
ol |
Створює нумерований (упорядкований) список | class — задає стильовий клас;
|
ul |
Створює маркований (невпорядкований) список | class — задає стильовий клас;
|
| Таблиця | ||
table |
Створює таблицю | align — визначає горизонтальне вирівнювання вмісту таблиці;
|
tr |
Визначає рядок таблиці | align — визначає горизонтальне вирівнювання вмісту рядка;
|
td |
Визначає клітинки таблиці | abbr — встановлює короткий опис вмісту клітинки;
|
th |
Визначає заголовну клітинку таблиці | abbr — встановлює короткий опис вмісту клітинки;
|
Деякі поштові клієнти використовують свої набори стилів, тому для тегів <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.
<td style=" background-image: url('//www.spcdn.org/title-green-bck.png')" />Вставка фонового зображення
Вставити фонове зображення в 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') — шлях до файлу малюнка.
Оновлено: 02.02.2024
або