Curso de Css. Vincular Hoja de estilo.
Para vincular una Hoja de estilo con una página web o varias, debemos añadir en la cabeza del documento, entre <head> y </head> el siguiente código:
<link rel=»stylesheet» type=»text/css» href=»ruta al archivo .css» />
La etiqueta <link /> es de autocierre. Ya sabemos que xhtml obliga a cerrar todas las etiquetas (En Html5 no hace falta cerrarla), por ello se pone la barra inclinada «/».
Este código se pone en la cabeza del documento, para que el navegador lo lea antes de pasar a leer el contenido en body, de esta forma cuando accede al contenido del body, el navegador ya ha cargado la hoja de estilo css.
Nota:
El navegador procesa o lee las páginas web de arriba a abajo y de izquierda a derecha, eso en navegadores occidentales. Para realizar este proceso el navegador lee primero el tipo de documento
que va a cargar o enlazar, utilizando para ello el texto declarado en el atributo type y después lo busca en la ruta que le hayamos escrito. El funcionamiento es muy parecido a insertar la hoja de estilo dentro de la misma página, solo que el código se descarga de manera externa.
La ventaja de utilizar un archivo externo, aparte de modificar mas rápidamente el estilo de todo un sitio web, reside en procurarnos unas páginas o documentos web menos pesados, al tener que albergar cada página menos código, mejorando enormemente los tiempos de carga de las mismas.
Imaginaros tener que cargar en cada página de nuestro sitio web 100 lineas de código insertado,para aplicar estilo, y si vuestro sitio tiene 500 páginas, serian 50000 lineas de código, solo para el estilo.Si hubiese que cambiar en todas ellas, el color del texto en los encabezados, Habría que ir página por página cambiando esa propiedad de estilo. Uff, que tortura. Así era como antes se hacía, afortunadamente, llegaron las hojas de estilo externas y todo eso pasó a mejor vida. Se entenderá ahora porqué es el mejor método a seguir.
Bueno, ya tenemos casi todos los ingredientes, para empezar a trabajar sobre css.Tenemos nuestra página web y nuestra hoja de estilo creadas y las vinculamos utilizando la síntesis que hemos visto quedando nuestro código html así:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Curso de css/Utilizar hoja de estilo externa</title> <link rel="stylesheet" type="text/css" href="c:\Users\pepito\CURSOCSS\miprimerahojadeestilo.css" /> </head> <body> </body> </html> |