miércoles, 12 de noviembre de 2008

Descubrir CSS: Fuentes, colores e hipervinculos

CSS (Cascading Style Sheets es un lenguaje creado especialmente para dar formato a los elementos HTML.

Una stylesheet es una recopilación de instrucciones de formato para elementos HTML. Y cascade es, entre otras cosas, una "caida desde cierta altura del agua de un río o corriente". Esta definicion es correcta pero no dice mucho. Es díficil aclarar el significado de cascading en este momento, lo dejaremos para mas adelante.

CSS da formato a los cuadros rectangulares que se crean con HTML. Las posibilidades de formato se pueden dividir en tres areas:

1. Fuentes y colores: formato del contenido de los cuadros.
2. Distancia y bordes: formato de los propios cuadros.
3. Layout: modificar la posición de los cuadros en la pagina web.

* Crea un archivo vacio con un editor de texto (puede ser el blog de notas)
* Guarda el archivo con el nombre de little-boxes.css, en la misma carpeta que los archivos HTML.
* Inserta el siguiente comentario CSS en la primera linea del archivo

/* Stylesheet para los ejercicios de Little Boxes/*

* Guarda el archivo.

El vinculo entre HTML y CSS: link

Solo tenemos que modificar la ruta de acceso al archivo en el elemento link para que el formato de las paginas se base en nuestras styles-sheet.

* Abre cualquier archivo ya creado (HTML)
* Modifica el código fuente HTML como sigue dentro del head:

< link href="little-boxes.css" rel="stylessheet" type="text/css"/ >

* Guarda y abrelas con el navegador.

Ahora ya no se aplicaran los formatos de la hoja de estilos del W3C. Este es el significado de los tres atributos del elemento link.

* href indica la ruta de acceso al archivo.
* rel es la abreviatura de "relation" rel="stylessheet" significa "este archivo es una hoja de estilos para mi"
* type le indica al navegador que littleboxes.css es un archivo de texto CSS: "Tipo archivo de texto, mas concretamente Cascading Style Sheet".

El elemento se cierra con un tag final integrado: espacio en blanco y signo mayor que.

No hay comentarios: