Curso de Diseño Web IX - El modelo de Caja

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML, como añadir estilo con CSS y tipografía, tamaño de letra y colores en CSS. En esta entrada hablamos del modelo de caja en CSS.

En la siguiente imagen se muestra el llamado modelo de caja en HTML. Por cada elemento de HTML hay tres características optativas margen, interlineado y borde. Controlamos la visualización de estas características por medio de las propiedades de CSS margin, padding y border. El texto es lo que llamaríamos área de contenido.

Color del border

Use la propiedad border-color para especificar el color del borde. Puedes usar cualquiera de los métodos comunes para definir color. Las siguientes tres lineas de código son equivalentes:

border-color: red;
border-color: rgb(100%,0%,0%);
border-color: #ff0000;

Tipo del borde

Puedes cambiar el tipo del borde con la propiedad border-style. Puedes usar los siguientes valores:

• solid
• double
• groove
• outset
• dotted
• dashed
• inset
• ridge

Ancho del borde

Puedes cambiar el ancho del borde con la propiedad border-width. Puedes fijar el ancho en píxeles o usar las siguientes palabras clave.

• thin
• medium
• thick

Especificamos margenes, interlineados o bordes sólo para un lado:

Podemos fijar determinadas características sólo para un lado. Si queremos fijar únicamente el color, estilo y anchura del borde superior podemos usar:

border-top-color
border-top-style
border-top-width

Si queremos fijar un margen derecho de 50px usaríamos:

margin-right: 50px;

Si queremos fijar un interlineado izquierdo y derecho de 20px, mientras que el superior e inferior permanecen a 0px escribiríamos:

padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;

Las siguientes lineas son equivalente pero usan notación compacta. La notación compacta da cuatro valores que siguen el movimiento de las agujas del reloj (arriba, derecha, abajo, izquierda). Si tanto los valores de arriba y abajo como los de izquierda y derecha son iguales, podemos usar una notación aún más compacta como se muestra abajo.

padding: 0px 20px 0px 20px;
padding: 0px 20px;

Imágenes de fondo

Para lograr unos diseños más impactantes se usan a menudo imágenes de fondo. La propiedad background-image nos permite referenciar la imagen que vamos a usar como fondo. La propiedad background-repeat nos permite indicar si la imagen se va a repetir. Podemos, por ejemplo, repetir un patrón y lograr un efecto muy vistoso. La propiedad background-position nos indica donde posicionar nuestra imagen de fondo (por ejemplo, coloca la imagen arriba a la izquierda). Las siguientes lineas de código muestran como usar estas propiedades.

background-image: url(imagenes/background.gif);
background-repeat: no-repeat;
background-position: top left;

Atributo Class

A menudo necesitamos aplicar a un estilo a varios elementos. Imaginemos que tenemos un listado de nombres de alumnos y direcciones de email. Si queremos que el nombre de los alumnos aparezca en negrita podemos marcar todos los nombres de alumnos como pertenecientes a la clase "nombreDeAlumno" y aplicar un estilo a esta clase. En la vida real podemos asemejar clases con la pertenencia a clubs. Podemos pertenencer a varios (club de montaña, club de cocina) o a ninguno. En HTML usamos el atributo class para designar la pertinencia de un elemento a una clase. Los siguiente puntos describen el uso de este atributo.

• Use el atributo class para añadir elementos a una clase.
• Use en CSS un . entre el nombre del elemento y la clase para especificar el elemento de la clase.
• Use en CSS .nombreDeLaClase para seleccionar todos los elementos que pertenecen a la clase.
• Cualquier elemento puede pertenecer a más de una clase. Para ello colocamos el nombre de las clases separado por espacios en el atributo class.

Atributo ID

Similar al atributo class, se puede usar el atributo ID en todos los elementos HTML. La diferencia es que cada elemento puede tener sólo un id y este deber ser único para la página; sólo puedes tener un elemento en tu página con id "pieDePagina". El atributo id debe empezar con una letra y ser seguido sólo por letras y dígitos. No se permiten espacios o caracteres especiales.

<p id="pieDePagina">Gracias por su visita</p>

Class y ID en CSS

Los siguiente ejemplos muestran el uso de clases y identificadores en CSS.

Selecciona sólo párrafos que pertenecen a la clase oferta

p.ofertas { color: red;}

Selecciona todos los elementos que pertenecen a la clase oferta

.ofertas { color: red;}

Esto selecciona todo los elementos que tengan un id pieDePagina

#pieDePagina { color: red; }

Selecciona un elemento <p> si tiene el id pieDePagina

p#pieDePagina { color: red; }

Elemento DIV

<div> es un elemento que sirve para agrupar elementos de bloque. Normalmente un elemento div viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento div en nuestro CSS. El siguiente ejemplo ilustra el uso de un elemento div. Imagina que estamos construyendo una página Web para un bar de nuestra ciudad. En esta se ofrece un listado de los cocteles que el bar ofrece. Cada coctel tiene una cabecera, una imagen y una descripción. Si quisiéramos dar un estilo común a todos nuestro cócteles. Por ejemplo una imagen de fondo o un borde necesitaríamos agruparlos con un div. El siguiente código ilustra esto:

 
<div id="coctelAmarillo" class="coctel"> 
   <p> 
      <img src="images/yellow.gif" alt="Bebida brisa de limón" /> 
    </p> 
    <h3>Brisa de Limón</h3> 
    <p> 
      Nuestro coctel más sano, combina hierbas, minerales, vitaminas y un toque de limón. Crea 
   un concentrado de limón que nos ayudará a mantener altas las defensas. 
    </p> 
</div> 

Elemento SPAN

<span> es un elemento que sirve para agrupar elementos en linea y texto. Normalmente un elemento span viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento span en nuestro CSS. El siguiente ejemplo, ilustra el uso del elemento span. Imaginemos una lista de artistas y álbumes. Si queremos que el nombre del artista aparezca en negrita y el nombre del álbum en cursiva. Podemos rodear los nombres de artista y álbumes con span y usar clases para referenciar el estilo como se muestra en el siguiente código.

 
<ul> 
 <li><span class="cd">La Carretera</span>, <span class="artist">Julio Iglesias</span></li> 
    <li><span class="cd">Elvis' Christmas album</span>, <span class="artist">Elvis Presley</span></li> 
</ul> 

.artista { font-weight: bold;}
.cd { font-style: italic;}

CSS para diferentes medios

 

Podemos especificar diferentes hojas de estilos dependiendo del medio (teléfono móvil, impresora, pantalla) desde el cual se acceda a nuestra página . El atributo media te permite especificar para que tipo de dispositivo se usará la hoja de estilos referenciada. Si no proporcionamos un atributo media, el estilo se usará para todos los dispositivos.

<link type="text/css" rel="stylesheet" href="pantalla.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="impresora.css" media="print"/>
<link type="text/css" rel="stylesheet" href="movil.css" media="handheld"/>
<link type="text/css" rel="stylesheet" href="estilo.css"/>

Resumen

• CSS usa un modelo de caja para controlar como se muestran sus elementos.
• Las cajas consisten en una área de contenido y un interlineado, borde y margen opcionales.
• El área de contenido contiene el contenido del elemento
• El interlineado se usa para crear espacio visual alrededor del área del contenido.
• Los márgenes que rodean el borde, interlineado y contenido añaden espacio entre este elemento y otros elementos.
• Interlineado, borde y margen son opcionales.
• El fondo de un elemento se mostrará en el área de contenido y el interlineado, pero no en el margen.
• El interlineado y el margen pueden ser declarados en píxeles o porcentajes.
• El ancho de borde puede ser declarado en píxeles o usando las palabras clave thin, medium o thick.
• Hay ocho estilos diferentes para bordes incluyendo solid, dashed, dotted y ridge.
• Cuando fijamos márgenes, interlineados o un borde CSS nos proporciona las herramientas para que fijemos todos los lados (arriba, derecha, abajo o izquierda) a la vez o cada uno de ellos individualmente.
• Usar la propiedad line-height para añadir espacio entre lineas de texto.
• Puede posicionar una imagen como fondo de un elemento con la propiedad background-image
• Use el atributo class para elementos a los que quiera dar estilo juntos, como un grupo.
• Use el atributo id para dar a un elemento un nombre único. Puede usar también el atributo id para dar un estilo único a un elemento.
• Puede seleccionar elementos por su id usando el selector de identificadores #. Ejemplo: #cocteles
• Un elemento puede tener sólo un identificador; sin embargo, puede pertenecer a varias clases.
• Los elementos <div> se usan para agrupar elementos relacionados en secciones lógicas
• Crear secciones lógicas, puede ayudar a identificar las áreas principales de contenido, la cabecera y el pie de tus páginas.
• Puedes usar elementos div para agrupar elementos juntos que necesitan un estilo en común.
• Usar elementos <div> anidados puede añadir más estructura que sirva para aplicar estilo con mayor claridad. Aunque no se debe añadir estructura a no ser que se necesite realmente.
• Una vez que has agrupado juntas secciones de contenido con elementos <div>, puedes aplicar estilo a los <div> del mismo modo que hacías con cualquier otro bloque. Por ejemplo puedes añadir un borde alrededor de un grupo de elementos usando la propiedad borde al <div> que los anida.
• La propiedad width fija el ancho del área de contenido de un elemento.
• El ancho total de un elemento es el ancho del área de contenido, más el ancho del interlineado, borde y márgenes que añadas.
• Una vez que fijas el ancho de un elemento, ya no se expande para ocupar el ancho entero de la ventana del navegador.
• La propiedad text-align es un propiedad para elementos de bloque que centra todo el contenido en línea que hay dentro elemento de bloque. Es heredado por todos los elementos de bloque que estén anidados.
• Puede usar selector descendentes para seleccionar elementos anidados dentro de otros elementos. Por ejemplo, el selector descendente: div h2 { ...} selecciona todo los elementos <h2> dentro de los elementos <div> (incluyendo hijos, nietos, etc).
• Puede usar abreviaciones con propiedades relacionadas. Por ejemplo: padding-top, padding-right, padding-bottom y padding-left están todos relacionados con el indentado, y puede ser especificado con una abreviación: padding
• Las propiedades padding, margin, border, background y font se pueden fijar con abreviaciones.
• El elemento en linea <span> es similar al elemento <div>. Se usa para agrupar elementos en lineas relacionados y texto.
• Como con <div>, puede añadir elementos <span> a clases ( o dar a los elementos <span> un id) para estilizarlos.
• El elemento <a> es un ejemplo de un elemento con diferentes estados. El estados principales de <a> son unvisited, visited y hover.
• Puede estilizar cada uno de estos estados por separado con pseudo-classes. Las pseudo-classes más usadas a menudo con el elemento <a> son :link para enlaces sin visitar, :visited para enlaces visitados y :hover cuando se pone el ratón encima.
• Otros elementos soportan la pseudo-class :hover y algunos navegadores también soportan :first-child, y :focus para otros elementos.
• Puede usar más de una hoja de estilos en su HTML
• Si tiene varias hojas de estilo que crean conflicto, la última en el archivo HTML gana.
• Puede crear estilos para otros dispositivos como dispositivos como impresoras (print) o teléfonos móviles (handset) usando el atributo media del elemento link

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Box Model, Curso Diseño Web, Web Design