Skip to main content
FreeToolkit .ai

E-posta CSS İç Dahil Edici E-posta şablonu uyumluluğu için HTML öğelerine CSS stillerini dahileştirin.

E-posta CSS İç Dahil Edici illustration
🎨

E-posta CSS İç Dahil Edici

E-posta şablonu uyumluluğu için HTML öğelerine CSS stillerini dahileştirin.

1

HTML'nizi yapıştırın

E-posta şablonunuz için HTML işaretleme dilini girin.

2

CSS'nizi yapıştırın

Satır içi olarak uygulanması gereken CSS stillerini girin.

3

Satır içi HTML'yi kopyalayın

Sonucu önizleyin ve tüm stilleri satır içi olarak içeren HTML'yi kopyalayın.

Loading tool...

What Is E-posta CSS İç Dahil Edici?

E-posta CSS İç Dahil Edici, dış CSS kurallarını HTML öğeleri上的 satır içi stil özniteliklerine dönüştürerek e-posta şablonlarınızı büyük e-posta istemcileri ile uyumlu hale getirir. Çoğu e-posta istemcisi (Gmail, Outlook, Yahoo Mail) <style> etiketlerini kaldırır ve dış stilleri görmezden gelir, bu nedenle CSS'nin her öğe上的 satır içi stil öznitelikleri olarak uygulanması gerekir. Bu araç, HTML işaretlemesini ve CSS kurallarını alır, seçicileri öğelerle eşler ve karşılık gelen stilleri satır içi stil özniteliği olarak ekler. Etiket seçicilerini ve sınıf seçicilerini işler, böylece dönüştürme işlemi hızlı ve otomatik hale gelir. Ön izleme, styled çıktıyı gösterir, böylece kopyalamadan önce sonucu doğrulayabilirsiniz. Bu, e-posta şablonu geliştirme sürecinde önemli bir adımdır.

Why Use E-posta CSS İç Dahil Edici?

  • CSS kurallarının otomatik olarak satır içi stil özniteliklerine dönüştürülmesi
  • Hem etiket hem de sınıf CSS seçicilerini işler
  • Stil uygulanmış HTML çıktısının canlı önizlemesi
  • E-posta istemcisi uyumluluğu için gerekli (Gmail, Outlook, Yahoo)

Common Use Cases

E-posta Şablonu Geliştirme

Pazarlama ve işlemci e-posta şablonları için satır içi stiller.

Bülten Tasarımı

Geniş istemci desteği için bülten HTML'sini satır içi stillerle hazırlayın.

Otomatik E-postalar

Otomatik bildirim ve hoş geldiniz e-posta şablonları için CSS işleme.

E-posta Testi

Farklı e-posta istemcileri arasında e-posta HTML'sini dönüştürün ve test edin.

Technical Guide

E-posta HTML'si, web HTML'sine kıyasla önemli CSS sınırlamalarına sahiptir. Çoğu e-posta istemcisi yalnızca satır içi stilleri (stil öznitelikleri aracılığıyla), temel CSS özellikleri ve tablo-tabanlı düzenleri destekler. Gmail <head> içindeki <style> etiketlerini kaldırır. Outlook, sınırlı CSS desteğiyle Word 렌더링 motorunu kullanır. İç dahil etme işlemi, CSS kurallarını ayrıştırır, seçicileri HTML öğeleriyle eşler ve karşılık gelen deyimleri stil öznitelikleri olarak ekler. Basit etiket seçicileri (h1, p, a) ve sınıf seçicileri (.button, .container) en güvenilir şekilde eşlenir. Karmaşık seçiciler (birleştiriciler, sahte sınıflar, sahte öğeler) zaten e-posta istemcilerine sınırlı destek sağlar. İç dahil etme işleminden sonra, Litmus veya Email on Acid gibi araçlarla birden fazla istemci üzerinde test edin. E-posta HTML'sini basit tutun: düzen için tabloları, görünüm için satır içi stilleri ve hem HTML hem de düz metin sürümlerini kullanın. E-postalarda esnek kutu, ızgara, konum ve yüzen gibi CSS özelliklerinden kaçının.

Tips & Best Practices

  • 1
    Maksimum e-posta istemcisi uyumluluğu için tablo tabanlı düzenleri kullanın
  • 2
    En az Gmail, Outlook ve Apple Mail'de satır içi HTML'yi test edin
  • 3
    CSS'yi basitleştirin - satır içi olarak dönüştürülemeyen seçicileri tránhın (sahte öğeler)
  • 4
    Outlook uyumluluğu için tablolar ve resimlere genişlik öznitelikleri ekleyin

Related Tools

CSS Düğme Oluşturucu - free online tool

CSS Düğme Oluşturucu

Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.

🎨 CSS & Design
CSS Tablo Oluşturucu - free online tool

CSS Tablo Oluşturucu

Özelleştirilebilir renkler, çizgiler ve hover efektleri ile güzel bir şekilde stilize edilmiş HTML tablolar oluşturun.

🎨 CSS & Design
CSS Değişken Oluşturucu - free online tool

CSS Değişken Oluşturucu

Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.

🎨 CSS & Design
Yazdırma Stil Sayfası Oluşturucu - free online tool

Yazdırma Stil Sayfası Oluşturucu

@media yazdırma stil sayfalarını, öğeleri gizleme, metni stilendirme ve sayfa kesintilerini kontrol etme seçenekleriyle oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q E-postaların neden satır içi CSS'ye ihtiyacı var?
Çoğu e-posta istemcisi <style> etiketlerini kaldırır ve dış stilleri yoksayar, yalnızca stil özniteliklerinde desteklenen CSS'yi destekler.
Q Bu araç tüm CSS seçicilerini işler mi?
Etiket seçicileri ve sınıf seçicilerini işler. Karmaşık seçiciler (sahte sınıflar, birleştiriciler) zaten sınırlı e-posta desteğine sahiptir.
Q Hangi e-posta istemcilerinin satır içi CSS'ye ihtiyacı var?
Gmail, Yahoo Mail, Outlook ve birçok diğerleri. Sadece birkaç modern istemci <style> etiketlerini destekler.
Q E-postalarda esnek kutu veya ızgara kullanabilir miyim?
Hayır, çoğu e-posta istemcisi modern CSS düzenini desteklemez. E-postalar için tablo tabanlı düzenleri kullanın.
Q Satır içi HTML'yi test etmeli miyim?
Kesinlikle. Her zaman birden fazla e-posta istemcisinde test edin. Litmus veya Email on Acid gibi hizmetleri kapsamlı测试 için kullanın.

About This Tool

E-posta CSS İç Dahil Edici is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.