Unidad 17. Estilos CSS Avanzados (I)

En temas anteriores vimos cómo funcionaba el panel Estilos CSS y cómo crear hojas de estilos para poder utilizarlas en tus páginas web.

Hasta ahora hemos ido empleando las propiedades CSS más comunes, aunque no las hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qué es CSS.

A lo largo del curso, hemos orientado nuestras páginas para que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente. Ya que aunque no las hemos empleados, existen etiquetas (como <font> o <b>) y atributos (como bgcolor) que nos permiten definir el aspecto del elemento, pero sin emplear CSS.

Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página de un modo eficiente.

En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de una forma mucho más limpia y cómoda.

17.1. Aplicar estilos CSS

Ver el videotutorial

Hasta 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 creábamos una < Nueva regla de estilo > desde el inspector de propiedades, se definía la regla únicamente para la página actual. Esto generaba 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 del 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 permitía el Inspector de propiedades CSS era crear un Estilo en línea. Este estilo sólo afectaba 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.

 

• Para practicar realiza el Ejercicio Paso a Paso de Creación de una Hoja de Estilo.

Pág. 17.1

Atrás  Inicio  Adelante