Вы можете стилизовать электронную почту, отправленную в Gmail, используя встроенные блоки <style> и стандартный CSS. Поддерживается большинство селекторов, атрибутов и медиа-запросов CSS. Gmail может игнорировать неподдерживаемые свойства и селекторы CSS.
Полный список поддерживаемых свойств и запросов CSS см. в справочном руководстве.
CSS-селекторы
Для применения стилей можно использовать подмножество селекторов CSS. Gmail поддерживает селекторы классов, элементов и идентификаторов.
Пример
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p>
<p>Jerry</p>
</div>
</body>
</html>
CSS-медиа-запросы
Вы можете использовать стандартные медиа-запросы CSS, чтобы настроить стиль электронного письма в соответствии с текущим устройством пользователя. Gmail поддерживает запросы по ширине, ориентации и разрешению экрана.
Пример
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
Поддерживаемые свойства и запросы CSS
В Gmail поддерживаются следующие свойства CSS:
- азимут
- фон
- режим наложения фона
- фоновый клип
- цвет фона
- фоновое изображение
- фоновое происхождение
- фоновая позиция
- фоновое повторение
- размер фона
- граница
- граница-дно
- цвет нижней границы
- граница-нижний-левый-радиус
- граница-нижний-правый-радиус
- стиль границы внизу
- ширина нижней границы
- коллапс границ
- цвет границы
- левая граница
- цвет левой границы
- левая граница
- ширина левой границы
- граница-радиус
- правая граница
- граница-правый-цвет
- стиль границы справа
- ширина границы справа
- расстояние между границами
- бордюрный стиль
- граница-верх
- граница-верхний цвет
- граница-верхний левый радиус
- граница-верхний-правый-радиус
- стиль границы-топа
- ширина верхней границы
- ширина границы
- калибровка коробки
- перерыв после перерыва
- перерыв перед
- взлом внутрь
- сторона подписи
- прозрачный
- цвет
- количество столбцов
- заполнение столбца
- разрыв столбца
- правило столбца
- цвет правила столбца
- стиль правила столбца
- ширина правила столбца
- пролет столбца
- ширина столбца
- столбцы
- направление
- отображать
- высота
- пустые ячейки
- плавать
- шрифт
- семейство шрифтов
- настройки функций шрифта
- кернинг шрифта
- размер шрифта
- настройка размера шрифта
- растягивание шрифта
- стиль шрифта
- синтез шрифтов
- вариант шрифта
- варианты шрифта-альтернативы
- вариант шрифта-caps
- вариант шрифта-восточно-азиатский
- вариант шрифта-лигатуры
- вариант шрифта-числовой
- вес шрифта
- высота
- ориентация изображения
- разрешение изображения
- временной режим
- изоляция
- поток макета
- макет-сетка
- макет-сетка-символ
- макет-сетка-символ-интервал
- линия сетки макета
- режим макета-сетки
- тип сетки макета
- межбуквенный интервал
- разрыв строки
- высота строки
- стиль списка
- позиция в стиле списка
- тип списка
- допуск
- поле-дно
- поле слева
- маржа справа
- маржа-верх
- смещение маркера
- максимальная высота
- максимальная ширина
- минимальная высота
- минимальная ширина
- режим смешивания
- соответствие объекта
- позиция объекта
- непрозрачность
- контур
- цвет контура
- стиль контура
- ширина контура
- переполнение
- переполнение-x
- переполнение-y
- прокладка
- отступ-дно
- отступ слева
- отступ справа
- обивка-топ
- разрыв страницы после
- разрыв страницы перед
- разрыв страницы внутри
- пауза
- пауза-после
- пауза-перед
- подача
- диапазон тона
- кавычки
- богатство
- говорить
- заголовок выступления
- произнести цифру
- говорить-пунктуация
- скорость речи
- стресс
- раскладка таблицы
- выравнивание текста
- выравнивание текста по последнему
- текст-автопространство
- текст-объединить-вертикально
- текст-оформление
- цвет-оформления текста
- текстовая декоративная линия
- текст-декорация-пропустить
- стиль оформления текста
- выделение текста
- цвет-акцента текста
- стиль выделения текста
- текстовый отступ
- выравнивание текста
- текст-кашида-пространство
- текстовая ориентация
- переполнение текста
- преобразование текста
- позиция подчеркивания текста
- Юникод-биди
- вертикальное выравнивание
- Голосовая семья
- пробел
- ширина
- разрыв слова
- межсловный интервал
- перенос слов
- режим письма
- масштабировать
Поддерживаемые медиа-запросы
Поддерживаемые типы
- все
- экран
Поддерживаемые запросы
- минимальная ширина
- максимальная ширина
- минимальная ширина устройства
- максимальная ширина устройства
- ориентация
- минимальное разрешение
- максимальное разрешение
Поддерживаемые ключевые слова
- и
- только