Поддержка CSS

Вы можете оформить письмо, отправляемое в 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:

  • азимут
  • фон
  • фоновый режим наложения
  • фоновый клип
  • фоновый цвет
  • изображение на заднем плане
  • фон-происхождение
  • фоновое положение
  • фоновый повтор
  • размер фона
  • граница
  • нижняя граница
  • граница-нижний-цвет
  • граница-нижний-левый-радиус
  • граница-нижний-правый-радиус
  • нижняя граница стиля
  • граница-нижняя-ширина
  • обрушение границы
  • цвет границы
  • пограничный левый
  • граница левого цвета
  • пограничный левый стиль
  • граница слева ширина
  • радиус границы
  • граница справа
  • граница правого цвета
  • граница справа стиль
  • граница справа ширина
  • интервал между границами
  • бордюрный стиль
  • верхняя граница
  • граница-верхний цвет
  • граница-верхний-левый-радиус
  • граница-верхний-правый-радиус
  • граница-верхний стиль
  • граница-верхняя ширина
  • ширина рамки
  • размер коробки
  • перерыв после
  • перерыв перед
  • взлом
  • сторона заголовка
  • прозрачный
  • цвет
  • количество столбцов
  • заполнение столбца
  • разрыв столбца
  • правило столбца
  • цвет правила столбца
  • стиль правила столбца
  • ширина правила столбца
  • пролет колонны
  • ширина колонки
  • столбцы
  • направление
  • отображать
  • возвышение
  • пустые ячейки
  • плавать
  • шрифт
  • семейство шрифтов
  • настройки функции шрифта
  • кернинг шрифта
  • размер шрифта
  • размер шрифта настроить
  • растяжка шрифта
  • стиль шрифта
  • шрифт-синтез
  • вариант шрифта
  • варианты шрифта-альтернативы
  • заглавные буквы варианта шрифта
  • вариант шрифта восточно-азиатский
  • вариант шрифта-лигатуры
  • вариант шрифта-числовой
  • вес шрифта
  • высота
  • ориентация изображения
  • Разрешение изображения
  • ime-режим
  • изоляция
  • макет-поток
  • макет-сетка
  • макет-сетка-char
  • макет-сетка-символьный интервал
  • линия сетки макета
  • макет-сетка-режим
  • макет-сетка-тип
  • Межбуквенное расстояние
  • Разрыв строки
  • высота линии
  • стиль списка
  • позиция в стиле списка
  • список стилей
  • допуск
  • нижняя граница
  • поле слева
  • край справа
  • верхняя граница
  • смещение маркера
  • максимальная высота
  • Максимальная ширина
  • минимальная высота
  • минимальная ширина
  • смешанный режим смешивания
  • объект-подходящий
  • позиция объекта
  • непрозрачность
  • контур
  • цвет контура
  • стиль контура
  • ширина контура
  • переполнение
  • переполнение-х
  • переполнение-y
  • набивка
  • обивка
  • padding-left
  • padding-right
  • обивка
  • разрыв страницы после
  • разрыв страницы до
  • разрыв страницы внутри
  • Пауза
  • пауза после
  • пауза перед
  • подача
  • диапазон высоты тона
  • кавычки
  • богатство
  • говорить
  • заголовок выступления
  • говорить-числительное
  • говорить-пунктуация
  • скорость речи
  • стресс
  • раскладка таблицы
  • выравнивание текста
  • последнее выравнивание текста
  • текст-автопробел
  • текстовое объединение в вертикальном положении
  • украшение текста
  • цвет оформления текста
  • строка оформления текста
  • текст-украшение-пропустить
  • стиль оформления текста
  • выделение текста
  • цвет выделения текста
  • стиль выделения текста
  • отступ текста
  • выравнивание по тексту
  • текст-кашида-пространство
  • ориентация текста
  • переполнение текста
  • преобразование текста
  • позиция подчеркивания текста
  • юникод-биди
  • вертикальное выравнивание
  • голосовая семья
  • пробел
  • ширина
  • слово-брейк
  • межсловный интервал
  • перенос слова
  • режим письма
  • зум

Поддерживаемые медиа-запросы

Поддерживаемые типы

  • все
  • экран

Поддерживаемые запросы

  • минимальная ширина
  • Максимальная ширина
  • минимальная ширина устройства
  • максимальная ширина устройства
  • ориентация
  • мин-разрешение
  • максимальное разрешение

Поддерживаемые ключевые слова

  • и
  • только