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 tiêu chuẩn. Hầu hết các bộ chọn, thuộc tính và truy vấn nội dung đa phương tiện của 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 tập hợp con của bộ chọn CSS để áp dụng kiểu. Gmail hỗ trợ bộ chọn lớp, thành phần 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 nội dung đa phương tiện CSS chuẩn để điều chỉnh kiểu của email 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, 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
- số-cột
- 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
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
- min-device-width
- max-device-width
- hướng
- min-resolution
- độ phân giải tối đa
Từ khoá được hỗ trợ
- và
- chỉ