Satır içi <style> blokları ve standart CSS'yi kullanarak Gmail'e gönderilen e-postaların stilini belirleyebilirsiniz. Çoğu CSS seçici, özellik ve medya sorgusu desteklenir.
Desteklenmeyen CSS özellikleri ve seçiciler Gmail tarafından yoksayılabilir.
Desteklenen CSS mülklerinin ve sorgularının tam listesini görmek için başvuru kılavuzuna bakın.
CSS Seçiciler
Stilleri uygulamak için CSS seçicilerinin 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ı
Standart CSS medya sorgularını kullanarak bir e-postanın stilini kullanıcının mevcut cihazına uyacak şekilde ayarlayabilirsiniz. Gmail; ekran genişliği, yönü ve çözünürlüğüyle 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
- arka plan
- 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
- mola
- ara öncesi
- giriş
- caption-side
- clear
- renk
- sütun sayısı
- sütun doldurma
- sütun boşluğu
- sütun kuralı
- sütun kuralı-rengi
- sütun kuralı stili
- sütun kuralı-genişliği
- sütun kapsamı
- sütun genişliği
- sütun
- direction
- display
- elevation
- empty-cells
- kayan noktalı
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- yazı tipi-varyantı-alternatifleri
- 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
- sayfa sonu
- sayfa sonu
- sayfa içi giriş
- duraklat
- pause-after
- pause-before
- atış
- pitch-range
- alıntı
- 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. cihaz genişliği
- maks. cihaz-genişliği
- yön
- min. çözünürlük
- maks. çözünürlük
Desteklenen anahtar kelimeler
- ve
- yalnızca