Css. Hojas de estilos

Css. Hojas de estilos

Css. Hojas de estilos

La utilización de hojas de estilo es una potente herramienta en la creación de páginas webs. Como ejemplo, se pueden utilizar para tener un mismo tipo de letra, dar formato a los encabezados ó los enlaces, cambiar el color de la barra de navegación etc.. dentro de un mismo archivo. No obstante, no ahorraremos mucho tiempo si una vez definidos los estilos tenemos que ir introduciendolos archivo por archivo. Para solventar esta tarea definimos los estilos en un solo documento y acto seguido se utilizan en el resto de los archivos, con la ventaja de que si queremos realizar algun cambio, unicamente debemos modificar el fichero raiz.
Importando hojas de estilo

En primer lugar creamos un archivo con extensión .css en este caso llamado estilos.css, este incluye todas las definiciones de los estilos. Utilizamos el siguiente ejemplo, en el que los enlaces apareceran de color negro, sin subrayar y con la aproximación del puntero del ratón aparecera subrayado.

<style type="text/css"><!--a:link{color:#000000;} a{text-decoration:none}a:hover { text-decoration:underline}a:visited{color:#000000; }--></style>

Una vez creado el archivo estilos.css importamos todos los documentos a traves de la etiqueta <LINK> que incluiremos dentro de las etiquetas <head> y </head>.

<Link Rel="stylesheet" href="estilos.css" Type="text/css">

Podemos importar tantos estilos como queramos, siempre sabiendo que algunos estilos pueden entrar en conflicto dentro los documentos, por lo que el navegador tendra en cuenta la última opción leida, es decir la última linea de importaciones.Con la opción de la etiqueta <LINK>, no se pueden sustituir los estilos importados por otros definidos dentro del propio documento, para ello debemos utilizar la sentencia "@import" dentro de la etiqueta <style>

<style type="text/css">@import URL("estilos.css");</style>

Podemos importar los estilos que desemos a traves de la sentencia "@import" incluyendola dentro de la etiqueta <style>, teniendo en cuenta que si existen conflictos entre los estilos, el navegador tendra en cuenta la última linea del código.