Gmail'e gönderilen e-postaların stilini satır içi <style>
bloklarını ve standart CSS'yi kullanarak belirleyebilirsiniz. Çoğu CSS seçici, özellik ve medya sorgusu desteklenir.
Desteklenmeyen CSS özellikleri ve seçiciler, Gmail tarafından yok sayılabilir.
Desteklenen CSS özelliklerinin ve sorgularının tam listesi için referans kılavuzuna bakın.
CSS Seçiciler
Stilleri 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ı
Bir 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
- mola sonrası
- aradan önce
- içeriden dışarıya ayırma
- caption-side
- clear
- renk
- sütun-sayısı
- sütun dolgusu
- sütun boşluğu
- sütun-kuralı
- sütun-kural-rengi
- sütun-kural-tarzı
- sütun-kural-genişliği
- sütun aralığı
- sütun-genişliği
- sütunlar
- direction
- display
- elevation
- empty-cells
- float
- 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
- sonraki sayfa sonu
- önce-sayfa sonu
- sayfa sonu içi
- 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
- minimum cihaz genişliği
- max-device-width
- yön
- minimum çözünürlük
- max-resolution
Desteklenen anahtar kelimeler
- ve
- yalnızca