Unidad 4. Editor Web (V)

Definir y editar un estilo

Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el menú la opción Regla.

Lo primero que tendremos que elegir será el selector que queremos utilizar. Podemos seleccionar una de las opciones, según el tipo de selector, pero es más cómodo escribir directamente el selector que nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector válido.

Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de pestañas:

La pestaña General nos permite editar el estilo directamente, escribiendo propiedades y valores. El resto de pestañas se refieren a categorías de propiedades, y en ellas podremos definir el estilo de forma gráfica, lo que puede resultarnos más cómodo e intuitivo.

Los distintos selectores que definamos, aparecerán "colgando" de la hoja de estilo, en el panel de la izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar el icono , y para cambiar el selector pulsamos en . Para editar las propiedades del estilo, no tenemos más que cambiar lo que queramos en las distintas pestañas.

Por ejemplo, la categoría de Texto tiene el siguiente aspecto:

Podemos elegir el tipo de letra o fuente desde los desplegables, así como el color, tamaño y otras características.

En la parte inferior de la ventana podemos previsualizar el aspecto del texto según los valores que hayamos elegido.

Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el botón de la derecha para que se abra una ventana donde podremos seleccionar el color deseado.

Nota: La versión que hemos utilizado durante este curso (0.7.10) tiene un fallo o bug, que se produce si intentamos definir estilos para varios selectores sin aceptar los cambios. Por eso, recomendamos definir el nuevo selector y su estilo, aceptar los cambios, y volver a abrir el editor CSS para crear el siguiente estilo.

 

Puedes practicar cómo crear algunos estilos básicos con el ejercicio paso a paso Estilos con KompoZer.

Ejercicio propuesto la Unidad 4

Prueba evaluativa de la Unidad 4