CSS-indata

Inline-stilsfragment

Vad är CSS till Inline-konvertering?

Behöver du konvertera CSS-stilmallsregler till inline style-attribut? Det här verktyget gör exakt det. Det tar dina CSS-regler och konverterar dem till färdiga inline-stilsfragment som du kan klistra in direkt i HTML-element.

Inline-stilar är nödvändiga när du arbetar med HTML-e-post, där externa stilmallar tas bort av e-postklienter som Gmail och Outlook. De är också avgörande för e-posttestverktyg, HTML-till-bild-konverterare och äldre HTML-genereringssystem som inte stöder länkad CSS.

Konverteraren hanterar alla CSS-egenskaper, vendor-prefix, !important-flaggan, kortformsegenskaper som font och margin, och media queries. Allt sker direkt i webbläsaren – ingen uppladdning, ingen datalagring, fullständigt säkert.

Hur du använder CSS till Inline-verktyget

Följ dessa steg för att konvertera CSS-regler till inline-stilsfragment.

Klistra in, ladda upp eller ladda exempeldata

Klistra in CSS i det vänstra CSS-indata-fältet eller klicka på Ladda upp för att ladda en .css-fil. Klicka på Exempeldata för att se exempelformatering. Exempel:

.subscriber-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
}
.plan-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e3f2fd;
}

Visa inline-stilsfragment

Det högra Inline-stilsfragment-fältet visar varje väljare med formatet style="property: value; ...". Kopiera fragment för HTML-element, e-postmallar eller äldre system som kräver inline-stilar.

Kopiera eller ladda ned

Klicka på Kopiera för att kopiera till urklipp, eller Ladda ned för att spara. Använd Rensa för att börja om.

När du faktiskt använder detta

Design av HTML-e-post

E-postklienter tar bort externa stilmallar. Bygg din e-postdesign i CSS och använd sedan det här verktyget för att konvertera den till inline-stilar. Fungerar utmärkt med e-postplattformar som Campaign Monitor och Mailchimp.

HTML till Bild-konvertering

Verktyg som konverterar HTML till bilder eller PDF:er laddar inte externa CSS-filer, så de behöver inline-stilar. Konvertera din stilmall till inline-stilar innan du skickar HTML till dessa konverterare.

Migrering av legacy-system

Migrerar du från moderna webbramverk till äldre system som bara stöder inline-stilar? Det här verktyget automatiserar konverteringen och sparar timmar av manuellt kopiering och formatering.

Dynamisk HTML-generering

Bygger du HTML-generatorer eller mallsystem där du behöver inline-stilar för varje element? Konvertera din huvud-CSS en gång och referera sedan till inline-stilsfragmenten i din genereringskod.

Vanliga frågor

Varför kan jag inte bara länka en CSS-fil i HTML-e-post?

De flesta e-postklienter (Gmail, Outlook, Apple Mail) tar bort <link>- och <style>-taggar av säkerhetsskäl. Inline-stilar är ett av få sätt att pålitligt styla HTML-e-post. Se Campaign Monitors CSS-stödguide.

Konverteras komplexa väljare?

Konverteraren hanterar de flesta CSS-väljare. Enkla väljare (element, klasser, ID:n) konverteras direkt. För pseudoväljare som :hover, som inte kan vara inline, indikerar verktyget att de inte kan konverteras.

Kan jag konvertera media queries till inline-stilar?

Media queries kan inte uttryckas som inline-stilar – de kräver separata <style>-block. Konverteraren identifierar media query-regler och separerar dem från stilar som kan bäddas in.

Hanterar det kortformsegenskaper?

Absolut. Kortformsegenskaper som margin: 10px 20px, padding: 5px och font: bold 12px Arial expanderas automatiskt till fullständiga motsvarigheter för maximal kompatibilitet med e-postklienter.

Vad gäller för !important-deklarationer?

!important-flaggan bevaras i inline-stilar exakt som skrivet. Den fungerar likadant – tvingar högre prioritet och åsidosätter motstridiga stilar.

Lagras eller analyseras mina CSS-data?

Nej. All konvertering sker i webbläsaren med JavaScript. Din CSS lämnar aldrig datorn och vi lagrar, analyserar eller loggar inga data. Fullständig integritet garanterad.

CSS till Inline-stilar