אפשר לעצב אימייל שנשלח ל-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
- הפסקה אחרי
- break-before
- התפצלות
- 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
- min-device-width
- max-device-width
- כיוון
- רזולוציה מינימלית
- רזולוציה מקסימלית
מילות מפתח נתמכות
- וגם
- בלבד