asta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS en ellas.
Por defecto, cuando creamos una regla de estilo indicando <style> en la sección Fuentes del Diseñador de CSS, la regla se define únicamente para la página actual. Esto genera un código similar al siguiente en el <head> de la página (por supuesto, cambiando las propiedades según el caso).
<style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; } //-> </style>
Este método se emplea para incrustar el código directamente en la página. Los estilos son declarados en la cabecera (
<head>...</head>), entre las etiquetas <style type="text/css"> y </style>.
La base del CSS es lograr un estilo homogéneo y fácil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada página. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensión .css). Esta opción nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un sólo archivo que aplicaremos a todas las páginas.
Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS). En él escribiremos las reglas de estilo con la misma sintaxis que hemos visto más arriba pero eliminado el componente HTML. Este sería el contenido de nuestra hoja definiendo el mismo estilo que arriba:
@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Las dos primeras líneas generadas por Dreamweaver no son imprescindibles.
Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luego deberíamos vincularlo en la página HTML utilizando la etiqueta
<link /> dentro del <head> de la página:<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
Otra opción que nos permite el Inspector de propiedades CSS es crear un Estilo en línea. Este estilo sólo afecta al elemento en cuestión, ya que lo que realmente estamos haciendo es definir las propiedades CSS empleando el atributo
style del elemento:<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>
El estilo en línea es el más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.
Una página puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces ¿cuándo empleamos cada uno?
- Emplearemos hojas de estilos para todos los estilos comunes a las páginas del sitio.
- Emplearemos estilos incrustados en la página para los estilos que se emplean en únicamente en esa página, y que ya no serían útiles si borrásemos la página. Por ejemplo, para definir el la apariencia de una tabla en concreto.
- Emplearemos estilos en línea cuando el estilo solo tenga sentido por estar en esa posición en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar más margen a un párrafo por tener una imagen en concreto, pero que no tendría sentido si cambiásemos la imagen.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas, más fácil será luego de modificar o exportar.
No hay comentarios.:
Publicar un comentario