Перелік СSS та 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.

<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') — шлях до файлу малюнка.

Оцініть, наскільки стаття була корисною "Перелік СSS та HTML атрибутів, які підтримуються в шаблоні листа"

Оцінка: 4 / 5

    Почніть користуватися сервісом SendPulse прямо сьогодні