Unidad 17. Estilos CSS Avanzados (I)


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

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.

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.

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 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?

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 Crear una hoja de estilo CSS.


Marzo-2015
Pág. 17.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.