Extractor CSS Gratis Online
Extrae todo el CSS de cualquier archivo HTML al instante en tu navegador.
HTML de entrada
CSS extraído
Ejemplos de extracción CSS
Extraer CSS de tags <style> y estilos inline. Ejemplo:
HTML con estilos embebidos
HTML de entrada:
CSS extraído:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es un extractor CSS?
Has scrapeado una página, exportado desde un CMS o heredado un código legacy donde todo el CSS vive dentro de tags <style> y atributos style inline. Copiar esas reglas manualmente es tedioso y propenso a errores. Un extractor CSS analiza el HTML y saca cada estilo a una hoja de estilos limpia e independiente con la que realmente puedes trabajar. Los docs del elemento <style> en MDN y la especificación CSS del W3C definen cómo los navegadores interpretan estos estilos embebidos.
Esta herramienta se ejecuta en tu navegador. Pega HTML o sube un archivo .html. Extrae el contenido de bloques <style> y estilos inline. No se envía nada a ningún servidor. Para formatear la salida, el Formateador CSS. Para combinar múltiples archivos CSS, el Combinador CSS.
Cómo usar esta herramienta
Pegar o subir HTML
Pega tu HTML en el editor izquierdo o haz clic en Subir para cargar un archivo .html o .htm. Usa Ejemplo para cargar HTML de ejemplo con estilos embebidos.
Revisar el CSS extraído
El panel derecho muestra el CSS extraído de tags <style> y estilos inline. Para validar, el Validador CSS. Para minificar, el Minificador CSS.
Copiar o descargar
Usa Copiar o Descargar para guardar el CSS. Para convertir HTML a Markdown, HTML a Markdown. Para CSS a inline (email), CSS a inline.
Dónde ayuda la extracción CSS
Al migrar un sitio legacy o convertir un documento HTML de un solo archivo a un proyecto estructurado, extraer CSS es el primer paso. Las plantillas de email, exportaciones CMS o páginas scrapeadas suelen tener estilos embebidos. Esta herramienta te da un punto de partida para refactorizar. MDN HTML y MDN CSS documentan los estándares.
Para combinar el CSS extraído con otras hojas de estilo, el Combinador CSS. Para prefijos de vendor, el Prefijador CSS. Para convertir preprocesadores, SCSS a CSS o Stylus a CSS.
Preguntas frecuentes
¿Mis datos son privados?
Sí. La extracción se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Extrae @import o CSS enlazado?
No. Solo extrae el contenido de bloques <style> y atributos style inline. Las hojas de estilo externas (@import o <link>) no se obtienen ni incluyen.
¿Qué pasa con los estilos inline?
Los estilos inline se extraen y se envuelven en un comentario para referencia. Aplican a elementos específicos, así que la salida puede necesitar ajuste manual para reutilización.
¿Maneja estilos scoped?
Los estilos scoped (p. ej. Vue scoped, encapsulación de vistas Angular) se extraen tal cual. Los atributos scope pueden necesitar consideración al usar el CSS en otro lugar.
¿Puedo extraer desde una URL?
Esta herramienta funciona con HTML pegado o subido. Para extraer desde una URL, obtén el HTML en otro lugar y pégalo aquí.