Seleccione Ventana > Propiedades CSS.
Última actualización el
24 may. 2023
- Guía del usuario de Illustrator
- Descubra Illustrator
- Introducción a Illustrator
- Espacio de trabajo
- Conceptos básicos del espacio de trabajo
- Creación de documentos
- Aprendizaje más rápido con el panel Descubrir de Illustrator
- Acelerar los flujos de trabajo utilizando la Barra de tareas contextuales
- Barra de herramientas
- Métodos abreviados de teclado predeterminados
- Personalizar métodos abreviados de teclado
- Introducción a las mesas de trabajo
- Organizar mesas de trabajo
- Personalizar el espacio de trabajo
- Panel Propiedades
- Configuración de preferencias
- Espacio de trabajo táctil
- Compatibilidad con Microsoft Surface Dial en Illustrator
- Deshacer ediciones y administrar el historial del diseño
- Rotar vista
- Reglas, cuadrículas y guías
- Accesibilidad en Illustrator
- Modo de visualización de la ilustración
- Uso de Touch Bar con Illustrator
- Archivos y plantillas
- Herramientas en Illustrator
- Herramientas de un vistazo
- Selección de herramientas
- Herramientas de navegación
- Herramientas de pintura
- Herramientas de texto
- Herramientas de dibujo
- Modificación de herramientas
- IA generativa (no disponible en China continental)
- Preguntas frecuentes sobre la IA generativa de Illustrator
- Generar escenas, sujetos e iconos usando indicaciones de texto
- Generar motivos vectoriales usando indicaciones de texto
- Generar rellenos de formas vectoriales mediante indicaciones de texto
- Generar gráficos para expandir ilustraciones y rellenar el área de sangrado
- Cambiar el color de la ilustración con indicaciones de texto
- Acciones rápidas
- Illustrator para iPad
- Presentación de Illustrator para iPad
- Espacio de trabajo
- Documentos
- Seleccionar y organizar objetos
- Dibujo
- Texto
- Uso de imágenes
- Color
- Documentos en la nube
- Conceptos básicos
- Solución de problemas
- Añadir y editar contenido
- Dibujo
- Conceptos básicos de dibujo
- Editar trazados
- Dibujar ilustraciones con píxeles perfectos
- Dibujar con la herramienta Pluma, Curvatura o Lápiz
- Dibujar líneas y formas sencillas
- Dibujar cuadrículas rectangulares y polares
- Dibujar y editar destellos
- Calco de imágenes
- Simplificar un trazado
- Herramientas y conjuntos de símbolos
- Ajustar segmentos de trazado
- Diseñar una flor en cinco sencillos pasos
- Crear y editar una cuadrícula de perspectiva
- Dibujar y modificar objetos en una cuadrícula de perspectiva
- Usar objetos como símbolos para uso repetido
- Dibujar trazados con pixelado perfecto en flujos de trabajo web
- Medida
- Objetos y materiales 3D
- Color
- Pintura
- Seleccionar y organizar objetos
- Seleccionar objetos
- Capas
- Ampliar, agrupar y desagrupar objetos
- Mover, alinear y distribuir objetos
- Alinear, organizar y mover objetos en un trazado
- Ajustar objetos a pictograma
- Ajustar objetos a pictogramas en japonés
- Apilar objetos
- Bloquear, ocultar y eliminar objetos
- Copiar y duplicar objetos
- Rotar y reflejar objetos
- Entrelazar objetos
- Crear maquetas realistas
- Cambiar la forma de objetos
- Recortar imágenes
- Transformar objetos
- Combinar objetos
- Cortar, dividir y recortar objetos
- Deformación de posición libre
- Escalar y distorsionar objetos
- Fusionar objetos
- Cambiar formas con envolventes
- Cambiar forma de objetos con efectos
- Crear nuevas formas con las herramientas Shaper y Creador de formas
- Uso de vértices interactivos
- Flujos de trabajo para cambiar de forma mejorados con compatibilidad táctil
- Editar máscaras de recorte
- Formas interactivas
- Crear formas mediante la herramienta Creador de formas
- Edición global
- Texto
- Añadir texto y trabajar con objetos tipográficos
- Añadir formato básico al texto
- Preguntas frecuentes sobre fuentes en Illustrator
- Fuentes y tipografía
- Crear texto en un trazado
- Crear listas numeradas y con viñetas
- Administrar área de texto
- Añadir formato avanzado al texto
- Aplicar formato a párrafos
- Estilos de carácter y de párrafo
- Caracteres especiales
- Tabulaciones
- Ampliar y rotar texto
- Espaciado entre líneas y caracteres
- Separación de sílabas y saltos de línea
- Ortografía y diccionarios de idiomas
- Aplicar formato de caracteres asiáticos
- Texto en árabe y hebreo
- Modos de composición de alfabetos asiáticos
- Visualizador de Reflow
- Obtener una vista previa, añadir o reemplazar las fuentes no disponibles
- Importar y exportar texto
- Identificar las fuentes usadas en imágenes y texto delineado
- Diseños de tipografía creativos
- Crear diseños de texto con objetos de fusión
- Crear un póster con texto con Calco de imagen
- Crear efectos especiales
- Gráficos web
- Dibujo
- Importación, exportación y almacenamiento
- Importación
- Bibliotecas Creative Cloud en Illustrator
- Guardar y exportar
- Impresión
- Prepárese para imprimir
- Impresión
- Sobreimprimir
- Imprimir mediante gestión del color
- Impresión PostScript
- Ajustes prestablecidos de impresión
- Marcas de impresora y sangrados
- Imprimir y guardar ilustraciones transparentes
- Reventado
- Impresión de separaciones de color
- Imprimir degradados, mallas y fusiones de color
- Sobreimpresión en blanco
- Automatizar tareas
- Solución de problemas
- Problemas resueltos
- Problemas conocidos
- Errores de bloqueo
- Recuperar archivos después de un cierre inesperado
- Reparar documentos dañados
- Modo seguro
- Problemas de archivos
- Formatos de archivo admitidos
- Problemas con controladores de dispositivos GPU
- Problemas de rendimiento de GPU
- Problemas con dispositivos Wacom
- Problemas con archivos DLL
- Problemas de memoria
- Problemas con archivos de preferencias
- Problemas de fuentes
- Problemas con la impresora
- Problemas con los medios
- Problemas de complementos no disponibles
- Enviar informe de error a Adobe
- No se pueden aplicar efectos en Illustrator
- Mejora del rendimiento de Illustrator
- Problemas resueltos
Aprenda a extraer y exportar el código CSS para objetos individuales o para todo el diseño de Illustrator.
Puede crear el diseño de una página HTML en Illustrator. Esto sirve como una guía visual excelente para un desarrollador web que pueda posteriormente programar el diseño, los estilos y los objetos de una página con la ayuda de un editor HTML. Sin embargo, la tarea de replicar el aspecto y posición exactos de los componentes y objetos puede resultar complicada y tediosa.
Con Illustrator, al crear el diseño de una página HTML, también puede generar y exportar el código CSS subyacente que determina el aspecto que tendrán los componentes y objetos de la página. El código CSS permite controlar el aspecto del texto y los objetos (como ocurre con los estilos gráficos y los estilos de carácter).
Visualización y extracción de código CSS
El panel Propiedades CSS permite a los usuarios hacer lo siguiente:
- Ver y copiar el código CSS de los objetos seleccionados.
- Exportar uno, varios o todos los elementos seleccionados de Illustrator a un archivo CSS.
- Exportar imágenes rasterizables ya usadas.
- Generar código CSS específico de un navegador.
A. Aparece un aviso si algunos estilos no se pudieron convertir a código CSS B. Cuadro de diálogo Opciones de exportación de CSS C. Exportación de CSS seleccionado a archivo D. Copia del estilo seleccionado en el portapapeles E. Generar CSS F. Menú del panel Propiedades CSS G. Estilos utilizados en los objetos seleccionados H. Código CSS
Para ver y extraer el código CSS, siga los pasos que se indican:
-
Nota:
Asegúrese de ponerle nombre a los objetos del documento de Illustrator en el panel Capas.
-
Para mostrar el código CSS generado:
Para un objeto:
Seleccione un objeto. El código CSS del objeto aparecerá en el panel Propiedades CSS.
Para varios objetos:
Mantenga presionada la tecla Mayús, seleccione varios objetos y, a continuación, seleccione Generar CSS del panel Propiedades CSS.
Para todos los objetos:
Presione Ctrl/Cmd+A para seleccionar todos los objetos y, a continuación, seleccione Generar CSS en el panel Propiedades CSS.
-
Para obtener el código CSS generado, realice una de las siguientes acciones:
Para copiar el código seleccionado:
- Seleccione un código específico y seleccione Copiar estilo seleccionado para copiarlo en el portapapeles.
- Seleccione el menú del Panel de propiedades de CSS y seleccione Exportar CSS seleccionado para exportar a un archivo.
Para copiar todos los códigos:
- Np seleccione nada en el código CSS y seleccione Copiar estilo seleccionado para copiarlo en el portapapeles.
- Seleccione el menú del Panel de propiedades de CSS y seleccione Exportar todo para exportar a un archivo.
-
Mientras guarda el código CSS en un archivo, elija entre las opciones dadas en el cuadro de diálogo Opciones de exportación de CSS.
Opciones de exportación CSS
Opciones de exportación CSS
Muestra de código CSS
Rectángulo con un degradado aplicado (todos los navegadores)
.GRADIENT_BOX
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}
Rectángulo con un degradado aplicado (solo navegadores basados en webkits)
.GRADIENT_BOX
{
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
}
Varios objetos
.NormalCharacterStyle
{
font-family : Myriad Pro;
font-size : 12px;
}
.st0
{
border-style : Solid;
border-color : #FFFFFF;
border-color : rgba(255, 255, 255, 1);
border-width : 0px;
}
.GRADIENT_BOX
{
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
}
Contenidos relacionados
¿Tiene alguna pregunta o idea?
Si tiene alguna pregunta que formular o una idea que compartir, entre y participe en la Comunidad de Adobe Illustrator. Nos encantaría conocer sus dudas y comentarios.
