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 chuẩn. Hầu hết các bộ chọn CSS, thuộc tính và truy vấn đa phương tiện đề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ợ.

Xem hướng dẫn tham khảo để biết danh sách đầy đủ 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 số bộ chọn CSS để áp dụng kiểu. Gmail hỗ trợ lớp, phần tử và bộ chọn id.

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>

Cụm từ tìm kiếm về phương tiện truyền thông CSS

Bạn có thể sử dụng các truy vấn phương tiện truyền thông CSS chuẩn để điều chỉnh kiểu của email sao cho 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 màn hình, hướng và độ phân giải.

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 CSS và truy vấn

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
  • nghỉ ngơi
  • break-before
  • phá hỏng
  • caption-side
  • clear
  • màu
  • số lượng 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 của quy tắc cột
  • khoảng cột
  • chiều rộng cột
  • 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
  • dấu ngắt trang sau
  • dấu ngắt trang trước
  • ngắt trang bên trong
  • 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
  • độ phân giải tối thiểu
  • độ phân giải tối đa

Các từ khoá được hỗ trợ

  • và
  • chỉ