CSS-invoer

Inline-stijl snippets

CSS naar Inline voorbeelden

Converteer CSS-regels naar inline style snippets voor e-mail of HTML. Voorbeeld:

Kop- en buttonstijlen

CSS-invoer:

Invoer

Inline snippets uitvoer:

Uitvoer

Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.

Wat is CSS naar Inline-stijlen?

Inline-stijlen zijn style-attributen op HTML-elementen. E-mailclients, sommige CMS-systemen en bepaalde frameworks vereisen inline-stijlen omdat ze externe stylesheets verwijderen of negeren. Dit hulpmiddel converteert CSS-regels naar inline style="..." snippets die u in HTML kunt plakken. De W3C CSS-specificaties definiëren het bronformaat.

Conversie draait volledig in uw browser. Er wordt niets naar een server gestuurd. De uitvoer is HTML-klaar. Voor volledige HTML-e-mail-inlining (selectors matchen met elementen) gebruikt u een dedicated tool zoals Juice of vergelijkbaar. Dit hulpmiddel genereert stijl-snippets uit CSS-regels.

Hoe dit hulpmiddel te gebruiken

Plak of upload CSS

Kopieer uw CSS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige CSS toont een fout.

Bekijk de inline snippets

Het rechterpaneel toont stijl-snippets voor elke regel. Elk snippet is een <code>style="..."</code> string die u aan HTML-elementen kunt toevoegen. Selectors zijn gelijst zodat u weet welk element welke stijlen krijgt.

Kopiëren of downloaden

Gebruik Kopiëren of Downloaden. Plak de snippets in uw HTML. Voor eerst CSS formatteren de CSS Formatter. Voor minificeren de CSS Minificeerder.

Hoe de conversie werkt

Het hulpmiddel parseert uw CSS-regels en converteert elke declaratieblok naar een style="property: value; ..." string. Selectors zijn gelijst zodat u weet welk snippet op welk element van toepassing is. De uitvoer volgt de HTML style-attribuut syntaxis. Voor volledige HTML+CSS-inlining (selectors automatisch matchen met elementen) documenteren tools zoals Juice of Can I Email e-mailclient-ondersteuning.

Wanneer CSS naar Inline helpt

E-mail-HTML is het meest voorkomende gebruik. Gmail, Outlook en veel clients verwijderen <style>-tags en externe stylesheets. Inline-stijlen zijn de meest betrouwbare manier om e-mail te stylen. Uw CSS hier converteren geeft u snippets om toe te voegen aan <td>, <div> en andere elementen.

CMS-systemen, PDF-generators of legacy-tools die HTML accepteren maar geen CSS-bestanden hebben vaak inline-stijlen nodig. Converteren hier levert het formaat dat ze verwachten. Voor vendor-prefixes vóór inlining de CSS Prefixer. Voor formatteren of minificeren van CSS eerst CSS Formatter of CSS Minificeerder.

Veelgestelde vragen

Inliniert het in volledige HTML?

Dit hulpmiddel genereert stijl-snippets uit CSS-regels. Het parseert geen HTML en past geen stijlen toe op elementen. Voor volledige conversie (HTML + CSS naar HTML met inline-stijlen) gebruikt u een tool zoals Juice of vergelijkbaar.

Zijn mijn gegevens privé?

Ja. Conversie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.

Hoe zit het met pseudo-klassen?

Pseudo-klassen zoals :hover en ::before kunnen niet worden geïnlineerd. Inline-stijlen ondersteunen alleen statische eigenschappen. Gebruik ze voor basisstijlen; e-mailclients kunnen beperkt <style> voor hover ondersteunen.

Hoe zit het met media queries?

Media queries kunnen niet worden geïnlineerd. Inline-stijlen zijn per element. Voor responsive e-mail gebruikt u een hybride aanpak: inline basisstijlen en <style> voor media queries waar ondersteund.

Specificiteit en overerving?

Inline-stijlen hebben hoge specificiteit. Wanneer u een snippet in een element plakt, overschrijft het de meeste andere stijlen. Volgorde is belangrijk wanneer meerdere regels op hetzelfde element van toepassing zijn.

Gerelateerde hulpmiddelen

Voor de CSS-specificatie: W3C CSS. MDN CSS is de referentie. Can I Email documenteert e-mailclient-ondersteuning voor CSS.