دعم خدمة مقارنة الأسعار (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-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

الكلمات الرئيسية المسموح بها

  • و
  • فقط