Bộ phận hỗ trợ CSS

Bạn có thể tạo kiểu cho email gửi đến Gmail bằ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 CSS đều được hỗ trợ. Gmail có thể bỏ qua các bộ chọn và thuộc tính 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 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
  • 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
  • độ cao
  • 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
  • chiều 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 nội dung nghe nhìn được hỗ trợ

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

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

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ỉ