Dịch vụ 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 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ợ.

Công cụ 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 nghe nhìn của CSS

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