CSS a estilos en línea
Genera fragmentos de estilos en línea a partir de reglas CSS
Entrada CSS
Fragmentos de estilos en línea
¿Qué es la conversión de CSS a estilos en línea?
¿Necesitas convertir reglas de hojas de estilo CSS en atributos style en línea? Esta herramienta hace exactamente eso. Toma tus reglas CSS y las convierte en fragmentos de estilos en línea listos para usar que puedes pegar directamente en elementos HTML.
Los estilos en línea son esenciales cuando trabajas con correos electrónicos HTML, donde los clientes de correo como Gmail y Outlook eliminan las hojas de estilo externas. También son cruciales para herramientas de prueba de correo electrónico, conversores de HTML a imagen y sistemas heredados de generación de HTML que no admiten CSS vinculado. Esta herramienta automatiza lo que de otro modo sería trabajo tedioso manual.
El convertidor maneja todas las propiedades CSS, prefijos de proveedor, la marca !important, propiedades abreviadas como font y margin, y conocimiento de consultas de medios. Todo sucede instantáneamente en tu navegador: sin cargas al servidor, sin retención de datos, completamente seguro.
Cómo usar la herramienta de CSS a estilos en línea
Sigue estos pasos para convertir reglas CSS en fragmentos de estilos en línea. Cada paso utiliza los botones y paneles reales de esta página.
Pegar, subir o cargar ejemplo
Pega CSS en el panel izquierdo de Entrada CSS, o haz clic en Subir para cargar un archivo .css. Haz clic en Ejemplo para ver estilos de panel de suscriptor de telecomunicaciones. Ejemplo:
.subscriber-card {
border: 1px solid #e0e0e0;
padding: 16px;
border-radius: 8px;
}
.plan-badge {
display: inline-block;
padding: 4px 8px;
background: #e3f2fd;
}Ver fragmentos de estilos en línea
El panel derecho de Fragmentos de estilos en línea muestra cada selector con su formato style="property: value; ...". Copia fragmentos para elementos HTML, plantillas de correo electrónico o sistemas heredados que necesitan estilos en línea.
Copiar o descargar
Haz clic en Copiar para copiar al portapapeles, o Descargar para guardar. Usa Limpiar para empezar de nuevo. Todo el procesamiento se ejecuta en tu navegador.
Cuándo realmente lo usarías
Diseño de correo electrónico HTML
Los clientes de correo electrónico eliminan las hojas de estilo externas. Construye tu diseño de correo en CSS, luego usa esta herramienta para convertirlo a estilos en línea. Funciona perfecto con plataformas de correo electrónico como Campaign Monitor y Mailchimp.
Conversión de HTML a imagen
Las herramientas que convierten HTML a imágenes o PDF necesitan estilos en línea porque no cargan archivos CSS externos. Convierte tu hoja de estilo a estilos en línea antes de pasar HTML a estos conversores para una representación perfecta.
Migración de sistemas heredados
¿Migrando de marcos web modernos a sistemas heredados que solo admiten estilos en línea? Esta herramienta hace la conversión automática, ahorrando horas de copiar y formatear estilos manuales.
Generación dinámica de HTML
¿Construyendo generadores de HTML o sistemas de plantillas donde necesitas estilos en línea para cada elemento? Convierte tu CSS maestro una vez, luego referencia los fragmentos de estilos en línea en todo tu código de generación.
Preguntas frecuentes
¿Por qué no puedo simplemente vincular un archivo CSS en correos electrónicos HTML?
La mayoría de los clientes de correo (Gmail, Outlook, Apple Mail) eliminan las etiquetas <link> y <style> por seguridad y consistencia. Los estilos en línea son una de las pocas formas de diseñar de forma confiable HTML de correo electrónico. Consulta la guía de soporte CSS de Campaign Monitor para ver lo que los clientes de correo admiten.
¿Se convertirán selectores complejos?
El convertidor maneja la mayoría de los selectores CSS. Los selectores simples (elementos, clases, IDs) se convierten directamente. Los selectores complejos se anotan para que sepas qué reglas se aplican a qué elementos. Para pseudoselectores como :hover que no se pueden alinear, la herramienta indica que no se pueden convertir a estilos en línea.
¿Puedo convertir consultas de medios a estilos en línea?
Las consultas de medios no se pueden expresar como estilos en línea; requieren bloques <style> separados. El convertidor identifica reglas de consulta de medios y las separa de estilos alineables, para que sepas qué necesita un manejo especial.
¿Admite propiedades abreviadas?
Absolutamente. Las propiedades abreviadas como margin: 10px 20px, padding: 5px y font: bold 12px Arial se expanden automáticamente a sus equivalentes de forma larga para máxima compatibilidad con clientes de correo.
¿Qué hay de las declaraciones !important?
La marca !important se conserva en estilos en línea exactamente como se escribió. Funciona de la misma manera: forzando mayor especificidad y anulando estilos conflictivos. Úsalo cuando necesites asegurar que los estilos tomen precedencia.
¿Se almacenan o analizan mis datos CSS?
No. Toda la conversión ocurre en tu navegador usando JavaScript. Tu CSS nunca sale de tu computadora, y no almacenamos, analizamos ni registramos ningún dato. Privacidad completa garantizada.