Вы можете оформить письма, отправленные в 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:
- азимут
- фон
- фоновый режим смешивания
- фоновый клип
- фоновый цвет
- фоновое изображение
- фон-происхождение
- фоновая позиция
- фон-повтор
- размер фона
- граница
- нижняя граница
- цвет нижней границы
- border-bottom-left-radius
- border-bottom-right-radius
- стиль нижней границы
- ширина нижней границы
- обрушение границ
- цвет границы
- граница слева
- цвет левой границы
- стиль границы слева
- border-left-width
- граница-радиус
- граница справа
- цвет правой границы
- стиль границы справа
- border-right-width
- межстрочный интервал
- в стиле границы
- верхняя граница
- цвет верхней границы
- border-top-left-radius
- border-top-right-radius
- стиль верхней границы
- border-top-width
- ширина границы
- размер коробки
- перерыв
- перерыв перед
- взлом внутрь
- сторона подписи
- прозрачный
- цвет
- количество столбцов
- заполнение столбцов
- столбец-пробел
- правило столбцов
- столбец-правило-цвет
- стиль столбцового правила
- ширина-правила-колонки
- пролет колонны
- ширина столбца
- колонны
- направление
- отображать
- высота
- пустые клетки
- плавать
- шрифт
- семейство шрифтов
- настройки-шрифта-функций
- шрифт-кернинг
- размер шрифта
- настройка размера шрифта
- растяжение шрифта
- стиль шрифта
- синтез шрифтов
- вариант шрифта
- альтернативные варианты шрифтов
- шрифт-вариант-заглавные буквы
- вариант шрифта-восточно-азиатский
- шрифт-вариант-лигатуры
- вариант шрифта-числовой
- начертание шрифта
- высота
- ориентация изображения
- разрешение изображения
- временной режим
- изоляция
- компоновка-поток
- макет-сетка
- layout-grid-char
- макет-сетка-символ-интервал
- макет-сетка-линия
- режим макета-сетки
- макет-сетка-типа
- межбуквенный интервал
- разрыв строки
- высота строки
- в стиле списка
- позиция в стиле списка
- тип-стиля-списка
- допуск
- нижнее поле
- левое поле
- правое поле
- margin-top
- смещение маркера
- максимальная высота
- максимальная ширина
- мин. высота
- мин. ширина
- режим смешивания-смешивания
- объект-подгонка
- объект-позиция
- непрозрачность
- контур
- цвет контура
- стиль контура
- ширина контура
- переполнение
- переполнение-x
- переполнение-y
- прокладка
- прокладка-дно
- отступ слева
- отступ справа
- обивка-топ
- разрыв страницы после
- разрыв страницы перед
- разрыв страницы внутри
- пауза
- пауза после
- пауза перед
- подача
- диапазон высоты тона
- кавычки
- богатство
- говорить
- заголовочный текст
- говорить-цифра
- говори-пунктуация
- скорость речи
- стресс
- расположение стола
- выравнивание текста
- text-align-last
- текст-автопробел
- текст-комбинация-вертикальный
- текст-декор
- текст-оформление-цвет
- текст-декоративная-строка
- текст-декорация-пропустить
- стиль оформления текста
- выделение текста
- цвет выделения текста
- стиль выделения текста
- отступ текста
- выравнивание текста
- текст-кашида-пространство
- ориентация текста
- переполнение текста
- преобразование текста
- текст-подчеркивание-позиция
- unicode-bidi
- вертикальное выравнивание
- голосовая семья
- пробел
- ширина
- разрыв слова
- межсловный интервал
- перенос слов
- режим письма
- зум
Поддерживаемые медиа-запросы
Поддерживаемые типы
- все
- экран
Поддерживаемые запросы
- мин. ширина
- максимальная ширина
- минимальная ширина устройства
- максимальная ширина устройства
- ориентация
- минимальное разрешение
- максимальное разрешение
Поддерживаемые ключевые слова
- и
- только