Вы можете стилизовать электронные письма, отправляемые в Gmail, используя встроенные блоки <style> и стандартные CSS-стили. Поддерживается большинство CSS-селекторов, атрибутов и медиа-запросов. Неподдерживаемые свойства и селекторы CSS могут быть проигнорированы Gmail.
Полный список поддерживаемых свойств и запросов 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:
- азимут
- фон
- режим смешивания фона
- фон-клип
- цвет фона
- фоновое изображение
- фон-источник
- фон-позиция
- background-repeat
- размер фона
- граница
- нижний край
- цвет нижней границы
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- коллапс границ
- цвет границы
- левая граница
- цвет левого края
- border-left-style
- border-left-width
- радиус границы
- пограничный правый
- цвет правого края
- стиль пограничного правого
- border-right-width
- межбордюрное расстояние
- стиль границы
- верхняя граница
- цвет верхней границы
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- ширина границы
- размер коробки
- перерыв после
- перерыв перед
- взлом внутри
- сторона подписи
- прозрачный
- цвет
- количество столбцов
- заполнение столбца
- зазор между столбцами
- линейка столбцов
- цвет-линия-колонки
- стиль разметки столбцов
- ширина-линии-колонки
- column-pan
- ширина колонки
- столбцы
- направление
- отображать
- высота
- пустые клетки
- плавать
- шрифт
- семейство шрифтов
- настройки шрифта
- кернинг шрифта
- размер шрифта
- font-size-adjust
- font-stretch
- стиль шрифта
- синтез шрифтов
- вариант шрифта
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- лигатуры-варианты шрифтов
- font-variant-numeric
- font-weight
- высота
- ориентация изображения
- разрешение изображения
- режим времени
- изоляция
- компоновка-поток
- layout-grid
- layout-grid-char
- layout-grid-char-spacing
- layout-grid-line
- layout-grid-mode
- layout-grid-type
- межбуквенный интервал
- перенос строки
- высота строки
- в виде списка
- list-style-position
- list-style-type
- допуск
- margin-bottom
- левый край
- margin-right
- margin-top
- смещение маркера
- максимальная высота
- максимальная ширина
- минимальная высота
- минимальная ширина
- режим смешивания
- соответствие объекта
- положение объекта
- непрозрачность
- контур
- контур-цвет
- контурный стиль
- ширина контура
- переполнение
- переполнение-x
- переполнение-й
- подкладка
- подкладка снизу
- padding-left
- padding-right
- с мягкой верхней частью
- разрыв страницы после
- page-break-before
- разрыв страницы внутри
- пауза
- пауза после
- пауза перед
- подача
- диапазон высоты тона
- кавычки
- богатство
- говорить
- заголовок разговора
- speak-numal
- пунктуация
- скорость речи
- стресс
- макет таблицы
- выравнивание текста
- text-align-last
- текст-автопробел
- текст-комбинировать-вертикальный
- оформление текста
- цвет оформления текста
- текстовая декоративная линия
- text-decoration-skip
- стиль оформления текста
- выделение текста
- цвет-выделения-текста
- стиль выделения текста
- отступ текста
- выравнивание текста
- текст-кашида-пространство
- текстовая ориентация
- текстовое переполнение
- текст-преобразование
- положение подчеркивания текста
- unicode-bidi
- вертикальное выравнивание
- семейство голосов
- пустое пространство
- ширина
- разрыв слова
- межсловный интервал
- перенос слов
- режим записи
- масштабирование
Поддерживаемые медиа-запросы
Поддерживаемые типы
- все
- экран
Поддерживаемые запросы
- минимальная ширина
- максимальная ширина
- минимальная ширина устройства
- максимальная ширина устройства
- ориентация
- минимальное разрешение
- максимальное разрешение
Поддерживаемые ключевые слова
- и
- только