Instituto de Educación Media a Distancia (ISEMED)

Modalidad: Bachillerato en Técnico Profesional en

Informática Duodécimo Grupo 1

Asignatura: Diseño Web I

Temas: PROGRAMAS DE DISEÑO GRAFICO PARA SITIOS WEB
V tutoría

Profesora: Jessenia Waldina González

Fecha: 26 y 27 de junio del 2021

 Hojas de estilo en KompoZer
 
Ya vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear y
definir una hoja de estilo.
Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del botón
 Crear o adjuntar una hoja de estilo

Desde la ventana del editor, pulsamos sobre el

desplegable de arriba a la izquierda, y
seleccionamos Elem. enlace, ya que una hoja es eso, un
archivo externo que se enlaza.

La zona de la derecha cambiará como se ve en la

imagen:
Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja aún no
existe, basta con introducir el nombre que queramos, para crear una hoja en la misma carpeta que la página.
En ambos casos, pulsamos en Crear hoja de estilos. Si no existía aún, el archivo no se creará hasta que no
definamos algún estilo. Para cerrar la ventana, pulsamos Aceptar.
Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la hoja de estilo.
Puedes comprobarlo en la vista Código fuente.

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.