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 khối <style> cùng dòng và CSS tiêu chuẩn. Hầu hết bộ chọn CSS, thuộc tính và truy vấn nội dung nghe nhìn đều được hỗ trợ. Các thuộc tính và bộ chọn CSS không được hỗ trợ có thể bị Gmail bỏ qua.

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ỏ các bộ chọn CSS để áp dụng kiểu. Gmail hỗ trợ các 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 nội dung đa phương tiện CSS

Bạn có thể sử dụng các truy vấn phương tiện CSS chuẩn để điều chỉnh kiểu 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 của 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ợ

Các thuộc tính CSS sau được hỗ trợ trong Gmail:

  • 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
  • dấu ngắt sau
  • ngắt trước
  • đột nhập vào trong
  • caption-side
  • clear
  • màu
  • số cột
  • điền-cột
  • khoảng cách cột
  • quy tắc cột
  • màu quy tắc cột
  • kiểu quy tắc cột
  • chiều rộng quy tắc cột
  • Khoảng cột
  • chiều rộng cột
  • cột
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • 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
  • ngắt trang sau
  • ngắt trang trước
  • ngắt trang bên trong
  • tạm dừng
  • pause-after
  • pause-before
  • ném bóng
  • pitch-range
  • danh ngôn
  • 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
  • chiều rộng thiết bị tối thiểu
  • max-device-width
  • hướng
  • độ phân giải tối thiểu
  • max-resolution

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

  • chỉ