Unidad 4. El texto (III)


Estilos CSS

 

Los estilos CSS son hojas de estilo de actualización automática. Se usan principalmente para especificar el formato de texto, pero algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permiten definir los estilos HTML, como el color de fondo para el texto, etc.

También permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo.

El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá en pocos casos.

Vamos a ver como funcionan las hojas de estilo a través del panel Estilos CSS, que puede abrirse a través del menú Ventana, opción Estilos CSS.También pulsando Mayús+F11 o sobre el botón del lanzador.

Existen dos modos diferentes para trabajar con los estilos, pudiendo pasar de uno a otro eligiendo una opción .

En el caso de estar seleccionada la opción Aplicar estilos, es posible aplicar directamente un estilo sobre el texto seleccionado, pulsando sobre uno de los estilos de la lista . En el caso de que la opción seleccionada sea Editar estilos, aparecerán las características asignadas a cada uno de los estilos.

Para poder utilizar los estilos de una hoja de estilos, es necesario cargarla en el documento. Para ello hay que pulsar sobre el primero de los cuatro botones inferiores . En la nueva ventana debe especificarse la ruta donde se encuentra el archivo CSS.

El botón sirve para crear un nuevo estilo en la hoja de estilos actual o en otra nueva.

El botón sirve para abrir la ventana donde editar un estilo nuevo o el seleccionado

El último botón, que tiene forma de papelera, sirve para borrar el estilo seleccionado.

Cuando se pulsa el botón de creación de nuevo estilo, aparece una ventana como ésta.

En ella deben especificarse el Nombre del estilo, y la hoja de estilos en la que va a definirse dicho estilo, que puede ser una nueva o una ya existente. Esto último se especifica en Definir en.

En Tipo es posible especificar si el estilo va a ser uno personal creado desde cero (Crear estilo person. clase), una etiqueta HTML redefinida (Redefinir etiqueta HTML) o una mezcla entre los dos tipos anteriores (Usar selector CSS).

En el caso de haber elegido Redefinir etiqueta HTML, en Nombre aparece la lista de etiquetas HTML que pueden ser redefinidas, como pueden ser BODY, A, FORM, TABLE, etc.

Después de pulsar sobre el botón Aceptar (y una vez guardada la hoja de estilos en el que caso de ser una nueva), aparecere una ventana como ésta.

Eligiendo una u otra categoría es posible especificar diferentes propiedades, muchas de las cuales no se podían aplicar medíante estilos HTML. Por ejemplo, a través de la categoría Fondo es posible especificar el color de fondo para un bloque de texto o para la página entera (al redefinir la etiqueta <body>).

Hay que tener en cuenta que puede producirse lo que se conoce como conflicto de estilos. Esto se produce cuando se aplican dos estilos diferentes a un mismo texto, y ambos especifican diferentes valores para un mismo atributo. Por ejemplo, un estilo puede especificar que el color del texto es azul, y el otro que es verde. En este caso el navegador solamente podrá aplicar al texto uno de los dos colores.

El estilo que esté más cerca del texto en el código HTML será el que se aplique.

A diferencia de lo que ocurría con los estilos HTML, cuando se aplican estilos CSS esto sí se aprecia en código HTML de la página.

El código HTML que indicaría que una hoja de estilos ha sido importada o vinculada al documento, sería similar a este:

<style type="text/css">

<!--

@import

url("file:///C|//aulaclic/prueba.css");

-->

</style>

 

Y el código que indicaría que a un objeto se le ha aplicado un estilo personal (una clase) sería similar a este:

<p class="miestiloparrafo">Bienvenidos a mi pagina</p>

 

Como puedes ver, lo que realmente indica dentro del código que se ha aplicado una clase es class=nombredeclase. En cambio, cuando se a redefinido una etiqueta HTML, no aparece reflejado en el código que el estilo de esa etiqueta ha sido modificado por la hoja de estilos.

 

  Ejercicios del Tema 4.

  Prueba evaluativa del Tema 4.

   

Pág. 4.3

Aviso legal: Este curso es gratuito siempre que se visualice desde la página Web de aulaClic. No está permitido descargar el curso.
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.
Julio-2003.