CSS Desteği

Satır içi <style> blokları ve standart CSS kullanarak Gmail'e gönderilen e-postaları biçimlendirebilirsiniz. Çoğu CSS seçicisi, özelliği ve medya sorgusu desteklenir. Desteklenmeyen CSS özellikleri ve seçicileri Gmail tarafından yoksayılabilir.

Desteklenen CSS özellikleri ve sorgularının tam listesi için referans kılavuzuna bakın.

CSS seçiciler

Stil uygulamak için CSS seçicilerin bir alt kümesini kullanabilirsiniz. Gmail; sınıf, öğe ve kimlik seçicileri destekler.

Örnek

<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 medya sorguları

E-postanın stilini kullanıcının mevcut cihazına uyacak şekilde ayarlamak için standart CSS medya sorgularını kullanabilirsiniz. Gmail, ekran genişliği, yön ve çözünürlükle ilgili sorguları destekler.

Örnek

<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>

Desteklenen CSS özellikleri ve sorguları

Gmail'de aşağıdaki CSS özellikleri desteklenir:

  • azimuth
  • background
  • 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-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • renk
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • sütunlar
  • direction
  • display
  • elevation
  • empty-cells
  • kayan noktalı
  • yazı tipi
  • 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
  • yükseklik
  • image-orientation
  • image-resolution
  • ime-mode
  • tecrit
  • 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
  • page-break-after
  • page-break-before
  • page-break-inside
  • duraklat
  • pause-after
  • pause-before
  • şarkı önerisi
  • pitch-range
  • alıntılar
  • richness
  • konuşma
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • gerilim
  • 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
  • genişlik
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • yakınlaştırma

Desteklenen medya sorguları

Desteklenen türler

  • tümü
  • ekran

Desteklenen sorgular

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • yön
  • min-resolution
  • max-resolution

Desteklenen anahtar kelimeler

  • ve
  • yalnızca