En el panel CSS se muestran las reglas de estilo que se han definido para los distintos elementos, incluidas las reglas de keyframes de los elementos animados. Además, el panel permite cambiar los estilos de las clases de los elementos, añadir estilos insertados y crear estilos a través de la pestaña Estilos.
Para ver una lista de las propiedades de CSS de un elemento, vaya a la pestaña Calculado.
Si quiere crear reglas de estilo en los documentos:
- Seleccione el elemento al que desee aplicar la nueva regla de estilo.
- Haga clic en el botón Añadir regla
situado en la parte inferior del panel CSS.
- Google Web Designer genera un selector de clase único que puede modificar. Si introduce un selector de clase, Web Designer añade esa clase al elemento seleccionado.
- Entre los paréntesis de la declaración de la nueva regla, haga clic en Agregar propiedad e introduzca una propiedad y un valor de CCS como, por ejemplo,
width: 209px;(anchura: 209 píxeles). - Siga añadiendo pares de propiedad-valor hasta que la regla esté completamente definida.
situado en la parte inferior del panel CSS.Para añadir un estilo insertado a un elemento:
- Seleccione un elemento.
- En el panel CSS, haga clic en el botón Añadir propiedad situado en el bloque Estilo insertado.
- Añada pares propiedad-valor para modificar el estilo del elemento.
Para modificar un estilo, haga lo siguiente:
- Seleccione un elemento en su documento. En el panel CSS se muestran las reglas de estilo asociadas al elemento.
- Haga clic en la propiedad o en el valor que desee modificar. Para eliminar una propiedad, borre el nombre.
Si quiere activar o desactivar propiedades:
- Haga clic en la casilla situada junto al nombre de la propiedad que desee activar o desactivar. Cuando la casilla esté desmarcada, la vista previa del navegador y los archivos publicados no incluirán esa propiedad.
- Para volver a activarla, haga clic en la casilla otra vez.
Reglas de fotogramas clave para elementos animados
En el panel CSS se muestran las reglas de fotogramas clave (con la palabra clave @keyframes) de los elementos animados con CSS.
Si quiere crear reglas de fotogramas clave para un elemento:
- Seleccione un elemento que no tenga animación.
- Haga clic en el botón Añadir regla de fotogramas clave
, situado en la parte inferior del panel CCS. Google Web Designer añade los fotogramas clave de inicio y finalización (0 % y 100 %), y selecciona 1 segundo como la duración de la animación de forma predeterminada.
- Para añadir una propiedad animada a un fotograma clave, haga clic en Añadir propiedad e introduzca una propiedad y un valor de CSS.
- Siga añadiendo pares de propiedad-valor hasta que la regla esté completamente definida.
Si quiere añadir fotogramas:
- Seleccione un elemento animado.
- En el panel CSS, haga clic en Insertar fotograma clave entre fotogramas clave que ya tenga.
- Web Designer configura automáticamente el fotograma que se va a insertar para que aparezca justo en medio de los fotogramas anterior y posterior. Si quiere cambiar el momento en que el fotograma clave empezará y acabará, haga clic en el porcentaje.
- Las propiedades animadas se interpolan a partir de los fotogramas clave adyacentes. Añada, modifique o elimine las propiedades del nuevo fotograma clave.
No puede añadir fotogramas clave después del final de la animación; para ello tendrá que usar la línea de tiempo.