يمكنك تصميم الرسائل الإلكترونية المُرسَلة إلى 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
- مقطع الخلفية
- لون الخلفية
- صورة الخلفية
- أصل الخلفية
- موضع الخلفية
- تكرار الخلفية
- حجم الخلفية
- border
- أسفل الحد
- لون أسفل الحد
- نصف قطر أسفل يسار الحد
- نصف قطر أسفل يمين الحد
- نمط أسفل الحد
- عرض أسفل الحد
- تصغير الحد
- لون الحد
- يسار الحد
- لون يسار الحد
- نمط يسار الحد
- عرض يسار الحد
- نصف قطر الحد
- يمين الحد
- لون يمين الحد
- نمط يمين الحد
- عرض يمين الحد
- تباعد الحد
- نمط الحد
- أعلى الحد
- لون أعلى الحد
- نصف قطر أعلى يسار الحد
- نصف قطر أعلى يمين الحد
- نمط أعلى الحد
- عرض أعلى الحد
- عرض الحد
- box-sizing
- break-after
- break-before
- break-inside
- جانب التسمية التوضيحية
- محو
- اللون
- عدد الأعمدة
- ملء-العمود
- تباعد الأعمدة
- عمود-قاعدة
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- أعمدة
- اتجاه
- عرض
- الارتفاع
- الخلايا الفارغة
- عدد عائم
- الخط
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- تمديد الخط
- font-style
- font-synthesis
- تنوع الخط
- 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
- نمط القائمة
- موضع نمط القائمة
- نوع نمط القائمة
- margin
- margin-bottom
- يسار الهامش
- يمين الهامش
- margin-top
- marker-offset
- الحد الأقصى للارتفاع
- الحد الأقصى للعرض
- الحد الأدنى للارتفاع
- الحد الأدنى للعرض
- mix-blend-mode
- object-fit
- object-position
- opacity
- مخطط
- لون المخطط
- نمط المخطط
- عرض المخطط
- تجاوز
- overflow-x
- تجاوز-y
- padding
- padding-bottom
- المساحة المتروكة لليسار
- المساحة المتروكة لليمين
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- pause
- pause-after
- pause-before
- رمية
- pitch-range
- الاقتباسات
- richness
- تكلُّم
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- تنسيق الجدول
- 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-justify
- text-kashida-space
- text-orientation
- تجاوز النص
- text-transform
- text-underline-position
- unicode-bidi
- vertical-align
- voice-family
- مساحة بيضاء
- العرض
- فواصل الكلمات
- تباعد الكلمات
- التفاف النص
- writing-mode
- تكبير / تصغير
طلبات الاستعلام عن الوسائط المتوافقة
الأنواع المتوافقة
- الكل
- رصد
طلبات البحث المتوافقة
- الحد الأدنى للعرض
- الحد الأقصى للعرض
- min-device-width
- max-device-width
- الاتجاه
- min-resolution
- max-resolution
الكلمات الرئيسية المتوافقة
- و
- فقط