此页面由 Cloud Translation API 翻译。

CSS 支持

您可以使用内嵌的 <style> 块设置发送到 Gmail 的电子邮件的样式，以及标准 CSS。支持大多数 CSS 选择器、属性和媒体查询。 Gmail 可能会忽略不受支持的 CSS 属性和选择器。

CSS 选择器

您可以使用一部分 CSS 选择器来应用样式。Gmail 支持类元素和 ID 选择器

示例

<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 属性：

azimuth
背景
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
边框
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-sizing
后休息时间
暂停前
内部中断
caption-side
clear
颜色
列数
列填充
列间隙
列规则
列规则颜色
列-规则-样式
列规则宽度
列跨度
列宽
列
方向
显示
elevation
empty-cells
float
字体
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-weight
高度
image-orientation
image-resolution
ime-mode
隔离
layout-flow
layout-grid
layout-grid-char
layout-grid-char-spacing
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
list-style
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marker-offset
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
Outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
填充
padding-bottom
padding-left
padding-right
padding-top
段落后分页符
段落前分页符
分页符内部
暂停
pause-after
pause-before
投球
pitch-range
名言佳句
richness
说话
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-align
text-align-last
text-autospace
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-style
text-indent
text-justify
text-kashida-space
text-orientation
text-overflow
text-transform
text-underline-position
unicode-bidi
vertical-align
voice-family
white-space
width
word-break
word-spacing
word-wrap
writing-mode
缩放

支持的媒体查询

支持的类型

全部
屏幕

支持的查询

min-width
max-width
min-device-width
max-device-width
屏幕方向
最低分辨率
最大分辨率

支持的关键字

和
仅限