Gratis CSS-uttrekker Online
Trekk ut all CSS fra hvilken som helst HTML-fil umiddelbart i nettleseren.
HTML-inndata
Uttrekket CSS
Eksempler på CSS-uttrekk
Trekk ut CSS fra <style>-tagger og inline-stiler. Eksempel:
HTML med innebygde stiler
HTML-inndata:
Uttrekket CSS:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er en CSS-uttrekker?
Du har skrapet en side, eksportert fra et CMS eller arvet en legacy-kodebase der all CSS ligger i <style>-tagger og inline style-attributter. Å kopiere disse reglene manuelt er kjedelig og feilutsatt. En CSS-uttrekker parser HTML-en og trekker ut hver stil til et rent, selvstendig stilark du faktisk kan jobbe med. MDN <style>-element-dokumentasjonen og W3C CSS-spesifikasjonen definerer hvordan nettlesere tolker disse innebygde stilene.
Verktøyet kjører i nettleseren din. Lim inn HTML eller last opp en .html-fil. Det trekker ut innholdet i <style>-blokker og inline-stiler. Ingenting sendes til server. For å formatere utdata, bruk CSS-formaterer. For å slå sammen flere CSS-filer, CSS-sammenslåing.
Slik bruker du verktøyet
Lim inn eller last opp HTML
Lim HTML inn i venstre editor eller klikk Last opp for å åpne en .html- eller .htm-fil. Bruk Eksempel for å laste eksempel-HTML med innebygde stiler.
Gjennomgå uttrukket CSS
Høyre panel viser CSS uttrukket fra <style>-tagger og inline-stiler. For validering, bruk CSS-validator. For minifisering, CSS-minifiserer.
Kopier eller last ned
Bruk Kopier eller Last ned for å lagre CSS-et. For HTML til Markdown, HTML til Markdown. For CSS til inline (e-post), CSS til inline.
Hvor CSS-uttrekk hjelper
Ved migrering av eldre nettsted eller konvertering av én HTML-fil til et strukturert prosjekt er uttrekk av CSS første steg. E-postmaler, CMS-eksporter eller skrapede sider har ofte innebygde stiler. Verktøyet gir et utgangspunkt for refaktorering. MDN HTML og MDN CSS dokumenterer standardene.
For å kombinere uttrukket CSS med andre stilark, bruk CSS-sammenslåing. For leverandørprefiks, CSS-prefiks. For preprocessor-konvertering, SCSS til CSS eller Stylus til CSS.
Ofte stilte spørsmål
Er dataene mine private?
Ja. Uttrekk skjer helt i nettleseren din. Ingen data sendes til server.
Henter den @import eller lenket CSS?
Nei. Den trekker kun ut innhold fra <style>-blokker og inline-style-attributter. Eksterne stilark (@import eller <link>) hentes ikke inn.
Hva med inline-stiler?
Inline-stiler trekkes ut og pakkes inn i en kommentar som referanse. De gjelder bestemte elementer, så utdata kan trenge manuell justering for gjenbruk.
Håndterer den scoped-stiler?
Scoped-stiler (f.eks. Vue scoped, Angular view encapsulation) trekkes ut uendret. Område-attributter kan måtte vurderes når CSS brukes andre steder.
Kan jeg trekke ut fra en URL?
Verktøyet fungerer med limt inn eller opplastet HTML. For å trekke ut fra en URL, hent HTML et annet sted og lim den inn her.