Extrator CSS Gratuito Online
Extraia todo o CSS de qualquer arquivo HTML instantaneamente no navegador.
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?
Você raspou uma página, exportou de um CMS ou herdou uma codebase legada onde todo o CSS está dentro de tags <style> e atributos style inline. Copiar essas regras manualmente é tedioso e propenso a erros. Um extrator CSS analisa o HTML e puxa cada estilo para uma folha de estilos limpa e independente com a qual você pode realmente trabalhar. A documentação MDN do elemento <style> e a especificação CSS do W3C definem como os navegadores interpretam esses estilos embutidos.
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.