Extractor CSS
Extraer CSS de archivos HTML
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?
Los archivos HTML suelen embeber CSS en tags <style> o atributos style inline. Un extractor CSS analiza el HTML y extrae todos los estilos a un solo archivo CSS. Útil para migrar estilos embebidos a hojas de estilo externas, auditar qué CSS usa una página, o convertir HTML scrapeado a CSS editable. La especificación HTML y la especificación CSS definen la estructura.
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í.