Satır içi <style> bloklarını ve standart CSS'yi kullanarak Gmail'e gönderilen e-postalara stil uygulayabilirsiniz. Çoğu CSS seçici, özellik ve medya sorgusu desteklenir.
Desteklenmeyen CSS özellikleri ve seçicileri Gmail tarafından yoksayılabilir.
Desteklenen CSS özelliklerinin ve sorgularının tam listesi için referans kılavuzuna bakın.
CSS Seçiciler
Stil 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ı
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üğe yönelik 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
- sütun-sayısı
- sütun-doldurma
- sütun-aralığı
- sütun-kural
- column-rule-color
- sütun-kural-stili
- column-rule-width
- sütun-genişletme
- column-width
- sütun
- 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