หน้านี้ได้รับการแปลโดย Cloud Translation API

การสนับสนุน CSS

คุณจัดรูปแบบอีเมลที่ส่งไปยัง Gmail ได้โดยใช้บล็อก <style> ในบรรทัดและ CSS มาตรฐาน ระบบรองรับตัวเลือก แอตทริบิวต์ และคำค้นหาสื่อส่วนใหญ่ของ CSS Gmail อาจไม่สนใจคุณสมบัติและตัวเลือก CSS ที่ไม่รองรับ

โปรดดูคู่มือข้อมูลอ้างอิงสำหรับรายการพร็อพเพอร์ตี้ CSS และคำค้นหาที่รองรับทั้งหมด

ตัวเลือก CSS

คุณสามารถใช้ชุดย่อยของตัวเลือก CSS เพื่อนำรูปแบบไปใช้ได้ Gmail สนับสนุนตัวเลือกคลาส องค์ประกอบ และรหัส

ตัวอย่าง

<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>

คิวรี่สื่อของ CSS

คุณสามารถใช้คิวรี่สื่อ CSS มาตรฐานเพื่อปรับการจัดรูปแบบอีเมลให้เหมาะสมกับอุปกรณ์ของผู้ใช้ในปัจจุบัน Gmail รองรับคำค้นหาตามความกว้าง การวางแนว และความละเอียดของหน้าจอ

ตัวอย่าง

<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>

คุณสมบัติและคำค้นหาของ CSS ที่รองรับ

Gmail รองรับคุณสมบัติ CSS ต่อไปนี้

azimuth
เบื้องหลัง
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
หยุดพัก
ก่อนหยุดพัก
การบุกภายใน
caption-side
clear
สี
จำนวนคอลัมน์
เติมคอลัมน์
ช่องว่างระดับคอลัมน์
กฎคอลัมน์
สีของกฎคอลัมน์
รูปแบบกฎคอลัมน์
ความกว้างของกฎคอลัมน์
ช่วงคอลัมน์
ความกว้างของคอลัมน์
คอลัมน์
direction
display
elevation
empty-cells
float
แบบอักษร
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
ส่วนสูง
image-orientation
image-resolution
ime-mode
การแยกกักตัว
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
ตัวแบ่งหน้า
แบ่งหน้าก่อน
ตัวแบ่งหน้า
หยุดชั่วคราว
pause-after
pause-before
พิช
pitch-range
คำคม
richness
พูด
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
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
zoom

การค้นหาสื่อที่รองรับ

ประเภทที่รองรับ

ทั้งหมด
หน้าจอ

การค้นหาที่รองรับ

min-width
max-width
ความกว้างต่ำสุดของอุปกรณ์
max-device-width
การวางแนว
ความละเอียดต่ำสุด
max-resolution

คีย์เวิร์ดที่รองรับ

และ
เท่านั้น