Estrattore CSS
Estrai CSS da file HTML
HTML di input
CSS estratto
Esempi di estrazione CSS
Estrai CSS dai tag <style> e dagli stili inline. Esempio:
HTML con stili incorporati
HTML di input:
CSS estratto:
Usa Esempio in alto per caricare altri dati di esempio.
Cos'è un Estrattore CSS?
I file HTML spesso incorporano CSS nei tag <style> o negli attributi style inline. Un estrattore CSS analizza l'HTML ed estrae tutti gli stili in un unico file CSS. Utile per migrare gli stili incorporati in fogli di stile esterni, verificare quale CSS usa una pagina o convertire HTML estratto da web in CSS modificabile. La specifica HTML e la specifica CSS definiscono la struttura.
Questo strumento funziona nel tuo browser. Incolla HTML o carica un file .html. Estrae il contenuto dei blocchi <style> e gli stili inline. Nulla viene inviato a un server. Per formattare l'output, usa il Formattatore CSS. Per combinare più file CSS, usa il Combinatore CSS.
Come usare questo strumento
Incolla o carica HTML
Incolla il tuo HTML nell'editor di sinistra oppure clicca su Carica per caricare un file .html o .htm. Usa Esempio per caricare HTML di esempio con stili incorporati.
Esamina il CSS estratto
Il pannello di destra mostra il CSS estratto dai tag <style> e dagli stili inline. Per la validazione, usa il Validatore CSS. Per minificare, usa il Minificatore CSS.
Copia o scarica
Usa Copia o Scarica per salvare il CSS. Per convertire HTML in Markdown, usa HTML in Markdown. Per CSS a inline (email), usa CSS a Inline.
Quando l'estrazione CSS è utile
Quando si migra un sito legacy o si converte un documento HTML a file singolo in un progetto strutturato, estrarre il CSS è il primo passo. I template email, le esportazioni CMS o le pagine estratte dal web spesso hanno stili incorporati. Questo strumento fornisce un punto di partenza per il refactoring. MDN HTML e MDN CSS documentano gli standard.
Per combinare il CSS estratto con altri fogli di stile, usa il Combinatore CSS. Per aggiungere prefissi vendor, usa il Prefissatore CSS. Per convertire tra preprocessori, usa SCSS in CSS o Stylus in CSS.
Domande Frequenti
I miei dati sono privati?
Sì. L'estrazione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Estrae @import o CSS collegato?
No. Estrae solo il contenuto dei blocchi <style> e gli attributi style inline. I fogli di stile esterni (@import o <link>) non vengono recuperati né inclusi.
E gli stili inline?
Gli stili inline vengono estratti e racchiusi in un commento per riferimento. Si applicano a elementi specifici, quindi l'output potrebbe richiedere aggiustamenti manuali per il riutilizzo.
Gestisce gli stili scoped?
Gli stili scoped (es. Vue scoped, incapsulamento della vista Angular) vengono estratti così come sono. Gli attributi di scope potrebbero dover essere considerati quando si usa il CSS altrove.
Posso estrarre da un URL?
Questo strumento funziona con HTML incollato o caricato. Per estrarre da un URL, recupera l'HTML altrove e incollalo qui.