Extrator CSS
Extrair CSS de arquivos HTML
HTML de entrada
CSS extraído
Exemplos de extração CSS
Extrair CSS de tags <style> e estilos inline. Exemplo:
HTML com estilos embutidos
HTML de entrada:
CSS extraído:
Use Exemplo acima para carregar mais dados de exemplo.
O que é um extrator CSS?
Arquivos HTML frequentemente embutem CSS em tags <style> ou atributos style inline. Um extrator CSS analisa o HTML e extrai todos os estilos para um único arquivo CSS. Útil para migrar estilos embutidos para folhas de estilo externas, auditar qual CSS uma página usa ou converter HTML raspado para CSS editável. A especificação HTML e a especificação CSS definem a estrutura.
Esta ferramenta é executada no seu navegador. Cole HTML ou envie um arquivo .html. Extrai o conteúdo de blocos <style> e estilos inline. Nada é enviado a nenhum servidor. Para formatar a saída, o Formatador CSS. Para combinar múltiplos arquivos CSS, o Combinador CSS.
Como usar esta ferramenta
Colar ou enviar HTML
Cole seu HTML no editor à esquerda ou clique em Enviar para carregar um arquivo .html ou .htm. Use Exemplo para carregar HTML de exemplo com estilos embutidos.
Revisar o CSS extraído
O painel direito mostra o CSS extraído de tags <style> e estilos inline. Para validar, o Validador CSS. Para minificar, o Minificador CSS.
Copiar ou baixar
Use Copiar ou Baixar para salvar o CSS. Para converter HTML para Markdown, HTML para Markdown. Para CSS para inline (e-mail), CSS para inline.
Onde a extração CSS ajuda
Ao migrar um site legado ou converter um documento HTML de arquivo único para um projeto estruturado, extrair CSS é o primeiro passo. Modelos de e-mail, exportações CMS ou páginas raspadas frequentemente têm estilos embutidos. Esta ferramenta fornece um ponto de partida para refatoração. MDN HTML e MDN CSS documentam os padrões.
Para combinar o CSS extraído com outras folhas de estilo, o Combinador CSS. Para prefixos de vendor, o Prefixador CSS. Para converter pré-processadores, SCSS para CSS ou Stylus para CSS.
Perguntas frequentes
Meus dados são privados?
Sim. A extração é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.
Extrai @import ou CSS vinculado?
Não. Extrai apenas o conteúdo de blocos <style> e atributos style inline. Folhas de estilo externas (@import ou <link>) não são buscadas nem incluídas.
E os estilos inline?
Os estilos inline são extraídos e envolvidos em um comentário para referência. Aplicam-se a elementos específicos, então a saída pode precisar de ajuste manual para reutilização.
Maneja estilos scoped?
Estilos scoped (ex.: Vue scoped, encapsulamento de vista Angular) são extraídos como estão. Os atributos de escopo podem precisar ser considerados ao usar o CSS em outro lugar.
Posso extrair de uma URL?
Esta ferramenta funciona com HTML colado ou enviado. Para extrair de uma URL, busque o HTML em outro lugar e cole aqui.