אפשר לעצב אימייל שנשלח ל-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 נתמכים
מאפייני ה-CSS הבאים נתמכים ב-Gmail:
- 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
- color [צבע]
- ספירת עמודות
- מילוי עמודות
- פער עמודות
- כלל-עמודות
- צבע כלל-עמודה
- בסגנון כלל-עמודות
- רוחב עמודה-כלל
- טווח עמודות
- רוחב עמודה
- עמודות
- 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
- quotes
- 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
מילות מפתח נתמכות
- וגם
- בלבד