[How-To] ¿Cómo hacer una página web? (VII)
Escrito por Penguino - January 4, 2009 – 7:54 pm -La semana pasada vimos la sintaxis básica del CSS y su uso básico. Hoy aprenderemos sobre el uso de las “style sheets” u hojas de estilo, que son los archivos CSS completos que vienen con todos las propiedades del archivo HTML.
Cómo insertar una hoja de estilo (style sheet) en un archivo HTML
Las hojas de estilo (o style sheets) pueden son generalmente insertadas dos formas: como una hoja de estilo interna o una hoja de estilo externa.
Hojas de estilo internas
Con una hoja de estilo interna, el archivo CSS va incrustado en el archivo HTML mediante la etiqueta <style>, de la forma
<head>
…
<style>
body {background-color: black}
h1 {color: blue}
p {margin-left: 5px}
</style>…
</head>
Como podemos ver en el ejemplo, la etiqueta<style> siempre va dentro de la etiqueta <head>. Esta forma es útil cuando tenemos sólo una hoja de estilo para todo el documento.
Hojas de estilo externas
Con las hojas de estilo externas llamamos a uno o varios archivos CSS (que se encuentra fuera del HTML) para que se integren al archivo HTML. Por ejemplo, si tenemos un archivo CSS con el contenido
body {background-color: black}
h1 {color: blue}
p {margin-left: 5px}
Y lo guardamos en /directorio/de/prueba/archivo.css, entonces lo llamamos de la siguiente forma:
<head>
…
<link rel=”stylesheet” type=”text/css” href=”/directorio/de/prueba/archivo.css” />
…</head>
Si tenemos más de dos archivos CSS, podemos agregarlos con otra etiqueta <link>, de la forma
<head>
…
<link rel=”stylesheet” type=”text/css” href=”/directorio/de/prueba/archivo1.css” />
<link rel=”stylesheet” type=”text/css” href=”/directorio/de/prueba/archivo2.css” />
<link rel=”stylesheet” type=”text/css” href=”/directorio/de/prueba/archivo3.css” />
…</head>
Y así hasta que pongamos todos los archivos CSS que tengamos (claro está que si puedes juntarlos todos en uno solo, pues mejor.
Yo recomiendo el uso del segundo método, ya que generalmente es mejor visto por los navegadores. La única desventaja es que el hecho de llamar a un archivo externo puede ralentizar un poco (no mas un poco, tampoco es que sea demasiado) la carga de la página. Pero no es problema, como dije, es un poco no mas.
Creo que por hoy no es más, la leccion de hoy era algo corta, de todas formas es muy útil. ¡Hasta el próximo fin de semana!
Tags: HOW-TOs, Tutoriales, Web
Archivado en HOW-TOs, Tutoriales, Web | 2 Comentarios »
Loading ...
Penguino on 
January 5th, 2009 at 7:49 pm
De acuerdo contigo al 100%, las hojas de estilos en un ficherito aparte. ¿Habías oído hablar de media types?
http://www.w3.org/TR/CSS2/media.html
Saludos.
January 5th, 2009 at 7:51 pm
Vaya, no sabía nada de los media types. Gracias por la sugerencia!