يمكنك تصميم نمط الرسائل الإلكترونية المُرسَلة إلى 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-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- نمط أسفل الحد
- 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
- محو
- لون
- عدد الأعمدة
- ملء العمود
- فجوة عمود
- قاعدة العمود
- لون قاعدة العمود
- نمط قاعدة العمود
- عرض قاعدة العمود
- امتداد العمود
- عرض العمود
- أعمدة
- 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-top
- marker-offset
- max-height
- max-width
- الحد الأدنى للارتفاع
- 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
- pause-after
- pause-before
- رمية
- pitch-range
- اقتباسات
- richness
- تكلُّم
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- الإجهاد
- 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-spacing
- word-wrap
- writing-mode
- تكبير / تصغير
الاستعلامات المتوافقة عن الوسائط
الأنواع المتوافقة
- الكل
- رصد
طلبات البحث المتوافقة
- min-width
- max-width
- الحدّ الأدنى لعرض الجهاز
- max-device-width
- الاتجاه
- الحد الأدنى لدقة الدقة
- max-resolution
الكلمات الرئيسية المسموح بها
- و
- فقط