Bộ phận hỗ trợ CSS

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

Bạn có thể sử dụng các truy vấn nội dung nghe nhìn CSS tiêu chuẩn để điều chỉnh kiểu dáng của email 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 theo 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
  • column-count
  • 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

Truy vấn về nội dung nghe nhì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ợ

  • và
  • chỉ