Поддержка 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:

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

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

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

  • все
  • экран

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

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

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

  • и
  • только