Bộ phận hỗ trợ CSS

Bạn có thể tạo kiểu cho email được gửi đến Gmail bằng cách sử dụng các khối <style> cùng dòng và CSS tiêu chuẩn. Hầu hết các bộ chọn, thuộc tính và truy vấn nội dung đa phương tiện của CSS đều được hỗ trợ. Gmail có thể bỏ qua các thuộc tính và bộ chọn CSS không được hỗ trợ.

Hãy xem hướng dẫn tham khảo để biết danh sách đầy đủ các thuộc tính và truy vấn CSS được hỗ trợ.

Bộ chọn CSS

Bạn có thể sử dụng một tập hợp con của bộ chọn CSS để áp dụng kiểu. Gmail hỗ trợ bộ chọn lớp, thành phần và mã nhận dạng.

Ví dụ:

<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>

Truy vấn nội dung đa phương tiện CSS

Bạn có thể sử dụng các truy vấn nội dung đa phương tiện CSS tiêu chuẩn để điều chỉnh kiểu của email sao cho phù hợp với thiết bị hiện tại của người dùng. Gmail hỗ trợ các truy vấn dựa trên chiều rộng, hướng và độ phân giải màn hình.

Ví dụ:

<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>

Các thuộc tính và truy vấn CSS được hỗ trợ

Gmail hỗ trợ các thuộc tính CSS sau:

  • azimuth
  • nền
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • 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
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • màu
  • số-cột
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • cột
  • chỉ đường
  • display
  • elevation
  • empty-cells
  • số thực dấu phẩy động
  • font
  • 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
  • độ cao
  • image-orientation
  • image-resolution
  • ime-mode
  • công tác chia cách
  • 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
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • tạm dừng
  • pause-after
  • pause-before
  • đề cử
  • pitch-range
  • quotes
  • richness
  • nói
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • ứng suất
  • 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
  • thu phóng

Các truy vấn đa phương tiện được hỗ trợ

Các kiểu được hỗ trợ

  • tất cả
  • màn hình

Các truy vấn được hỗ trợ

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • hướng
  • min-resolution
  • max-resolution

Từ khoá được hỗ trợ

  • chỉ