CSS-Eingabe

Inline-Style-Snippets

CSS zu Inline Beispiele

Konvertieren Sie CSS-Regeln in Inline-style-Snippets für E-Mail oder HTML. Beispiel:

Überschriften- und Button-Stile

Eingabe CSS:

Eingabe

Inline-Snippets-Ausgabe:

Ausgabe

Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.

Was ist CSS zu Inline-Styles?

Inline-Styles sind style-Attribute auf HTML-Elementen. E-Mail-Clients, einige CMS-Systeme und bestimmte Frameworks benötigen Inline-Styles, da sie externe Stylesheets entfernen oder ignorieren. Dieses Tool konvertiert CSS-Regeln in Inline-style="..."-Snippets, die Sie in HTML einfügen können. Die W3C-CSS-Spezifikationen definieren das Quellformat.

Die Konvertierung läuft vollständig in Ihrem Browser. Nichts wird an einen Server gesendet. Die Ausgabe ist HTML-fertig. Für vollständiges HTML-E-Mail-Inlining (Zuordnung von Selektoren zu Elementen) nutzen Sie ein dediziertes Tool wie Juice oder ähnlich. Dieses Tool generiert Style-Snippets aus CSS-Regeln.

So verwenden Sie dieses Tool

CSS einfügen oder hochladen

Kopieren Sie Ihr CSS und fügen Sie es in den linken Editor ein. Sie können auch auf Hochladen klicken, um eine .css-Datei zu laden. Die Schaltfläche Beispiel lädt Beispieldaten. Ungültiges CSS zeigt einen Fehler.

Inline-Snippets prüfen

Das rechte Panel zeigt Style-Snippets für jede Regel. Jedes Snippet ist ein <code>style="..."</code>-String, den Sie zu HTML-Elementen hinzufügen können. Selektoren sind aufgelistet, damit Sie wissen, welches Element welche Styles erhält.

Kopieren oder Herunterladen

Nutzen Sie Kopieren oder Herunterladen. Fügen Sie die Snippets in Ihr HTML ein. Zum Formatieren von CSS zuerst den CSS Formatierer. Zum Minimieren den CSS Minimierer.

So funktioniert die Konvertierung

Das Tool parst Ihre CSS-Regeln und konvertiert jeden Deklarationsblock in einen style="property: value; ..."-String. Selektoren sind aufgelistet, damit Sie wissen, welches Snippet auf welches Element zutrifft. Die Ausgabe folgt der HTML-Style-Attribut-Syntax. Für vollständiges HTML+CSS-Inlining (automatische Zuordnung von Selektoren zu Elementen) dokumentieren Tools wie Juice oder Can I Email die E-Mail-Client-Unterstützung.

Wann CSS zu Inline hilft

E-Mail-HTML ist der häufigste Anwendungsfall. Gmail, Outlook und viele Clients entfernen <style>-Tags und externe Stylesheets. Inline-Styles sind der zuverlässigste Weg, E-Mails zu stylen. Die Konvertierung Ihres CSS hier liefert Snippets zum Hinzufügen zu <td>, <div> und anderen Elementen.

CMS-Systeme, PDF-Generatoren oder Legacy-Tools, die HTML aber keine CSS-Dateien akzeptieren, benötigen oft Inline-Styles. Die Konvertierung hier liefert das erwartete Format. Für Vendor-Prefixes vor dem Inlining den CSS Prefixer. Zum Formatieren oder Minimieren von CSS zuerst CSS Formatierer oder CSS Minimierer.

Häufig gestellte Fragen

Inliniert es in vollständiges HTML?

Dieses Tool generiert Style-Snippets aus CSS-Regeln. Es parst kein HTML und wendet keine Styles auf Elemente an. Für vollständige Konvertierung (HTML + CSS zu HTML mit Inline-Styles) nutzen Sie ein Tool wie Juice oder ähnlich.

Sind meine Daten privat?

Ja. Die Konvertierung läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.

Was ist mit Pseudo-Klassen?

Pseudo-Klassen wie :hover und ::before können nicht inlined werden. Inline-Styles unterstützen nur statische Eigenschaften. Nutzen Sie sie für Basis-Styles; E-Mail-Clients können begrenztes <style> für Hover unterstützen.

Was ist mit Media Queries?

Media Queries können nicht inlined werden. Inline-Styles sind pro Element. Für responsive E-Mail nutzen Sie einen hybriden Ansatz: Inline-Basis-Styles und <code><style></code> für Media Queries wo unterstützt.

Spezifität und Vererbung?

Inline-Styles haben hohe Spezifität. Wenn Sie ein Snippet in ein Element einfügen, überschreibt es die meisten anderen Styles. Die Reihenfolge ist wichtig, wenn mehrere Regeln auf dasselbe Element zutreffen.

CSS zu Inline-Styles