Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 149

Visitas el mes pasado: 204

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Posicionamiento (I)

7.1 Diseño por cajas.

logo css

Introducción

Hasta ahora hemos visto cómo hacer páginas Web, y dar al estilo al texto, insertar imágenes, enlaces, etc.; pero las páginas que hemos creado son a una sóla columna. El contenido de la página está dentro de un único espacio que ocupa toda la ventana del navegador.

Sin embargo la mayoría de las páginas que visitamos tienen su espacio dividido en varias secciones bien definidas, así por ejemplo esta misma página que estás viendo tiene una cabecera. (con el título de la Web) una barra de navegación horizontal (con varios enlaces hacia otras partes del sitio), otra columna lateral a la izquierda, (con más enlaces) un cuerpo principal (el contenido principal de la página, que estás leyendo ahora) y un pie de página (con buzón e-mail o otras referencias).

Cada uno de esos espacios dentro de la página puede tener un tipo, color, y tamaño de letra diferente, así como distinto color de fondo, márgenes, bordes, etc.

para separar los distintos espacios en una página, de forma que esta tenga varios apartados, utilizamos normalmente el método de dividir la página mediante varias cajas.

Cada caja delimitará una zona de la página. Mediante el lenguaje HTML indicamos cuántas cajas o zonas va a tener la página y su contenido, y mediante CSS posicionaremos cada caja o zona en su lugar correspondiente y le daremos un estilo propio.


Definir zonas

Para crear diferentes zonas dentro de la página se suelen utilizar las etiquetas (en HTML) <div> ... </div>. Posteriormente a cada una de esas zonas se le aplican distintas propiedades CSS, en las que indicamos tanto la posición y el tamaño de la zona dentro de la página, como el aspecto y propiedades de los elementos que estén dentro de la zona.

Como hemos dicho anteriormente, cada una de esas zonas o cajas, esta marcada en el código HTML por la etiqueta <div>, que indica su comienzo; una vez finalizado el contenido de la caja debemos colocar la etiqueta de cierre </div>

Las etiquetas div pueden estar anidadas, es decir, unas dentro de otras, creando estructuras complejas en las que dentro de una zona hay otras sub-zonas,


Identificadores

Cada una de las etiquetas <div> debe llevar un atributo que la identifique, para diferenciarla del resto de las cajas. Podemos usar el atributo id o el atributo class. Ejemplo:

<div id="cabecera"> ... </div>

En este ejemplo, dentro de esta etiqueta introduciremos todo el contenido (texto, imágenes, enlaces, etc.) que vayamos a colocar dentro de la cabecera de la página.

El valor que le demos a estos atributos puede ser cualquier palabra, pero es conveniente que escribamos algo que indique a qué zona de la página engloba, ya que así nos facilita el trabajo.

Con este atributo identificaremos la caja en el código CSS y podremos aplicarle el tamaño, posicion y estilos que se le indique.


Diferencias entre los atributos id y class.

En principio podemos usar cualquiera de los dos atributos para identificar una zona o caja de la página, la principal diferencia es que el atributo id identifica esa zona como única, es decir que no puede haber dos atributos id con el mismo valor en una misma página. Caso de que esto ocurriera el código CSS se aplicará sólamente al primer elemento que encuentre, ignorando el resto de capas con el mismo valor para este atributo.

Sin embargo el atributo class sí que admite más de un elemento con el mismo valor, por lo que todos los elementos que contengan el mismo valor para este atributo serán tenidos en cuenta para aplicarles el código CSS.

El atributo id se utiliza normalmente para definir lo que son las zonas o cajas principales que dan el diseño a la página (cabecera, menu, cuerpo_principal, pie_de_página), ya que cada una de éstas es única dentro de una página y tiene un tamaño y posición distinto del resto. El atributo class se usa para definir distintos estilos dentro de una misma caja, por ejemplo si queremos poner párrafos alternos con distinto estilo del resto, o dar a algunas imágenes el mismo tamaño, etc.


Ejemplo de código HTML

Si queremos hacer una pagina como esta que estás viendo, la estructura del código HTML necesaria para incluir todas las zonas o cajas será la siguiente:

<html>
<head> ..... </head>
<body>
  <div id="cabecera"> ...
  </div> 
  <div id="barra_navegación"> ...
  </div>
  <div id="menu_izquierdo"> ...
  </div>
  <div id="contenido_principal"> ...
  </div>
  <div id="pie_pagina"> ...
  </div>
</body>
</html>

Si queremos que nuestra web no parezca la página de un libro, sino que tenga varios apartados distintos con diferentes diseñós, deberemos indicar cada uno de estos apartados con una etiqueta div.


Estructura con el código CSS

Con en el código HTML creamos la estructura de la página dividida en una serie de cajas. Para completar el trabajo necesitamos el código CSS, ya que mediante éste definimos el tamaño, posición y estilo de cada caja. El código HTML se limita simplemente a decir qué elementos deben estar dentro de la caja y cual es su contenido, y a darle a ésta un nombre que la identifica para poder aplicarle el código CSS.

En las siguientes páginas indicaremos cómo utilizar el código CSS para delimitar, posicionar y dar estilo a cada una de las zonas o cajas dentro de una página.

El diseño por zonas o cajas tiene las siguientes características:


Elementos de una caja

Ya hemos explicado en la página 2.3. Modelo de cajas cuales son los elementos básicos de una caja; Es decir, el margen (margin), el borde (border), el relleno (padding) y el contenido (content). Aparte de éstos elementos también tenemos el color de fondo (background-color) y la imagen de fondo (background-image).

Estos elementos se superponen unos a otros, de manera que se visualizarán en el siguiente orden (de por encima a por debajo):

El relleno y el margen son transparentes, por lo que en el espacio del relleno veremos la imagen o color de fondo, mientras que en el del margen se verá el fondo del elemento contenedor de la caja (también llamado elemento padre).

Todos estos elementos son opcionales, con lo que es posible crear una caja vacía, aunque no es lo habitual.


definir una caja

Una vez vistos los elementos de una caja vamos a ver cómo definir una caja. En principio cualquier etiqueta HTML con contenido es tratada por el código CSS como una caja, ya que podemos añadirle cualquiera de los elementos de una caja. (por ejemplo podemos añadir color de fondo, relleno y bordes a un párrafo). Sin embargo lo que aquí nos interesa es crear una caja con varias etiquetas HTML distintas dentro de ella (por ejemplo varios párrafos, una imagen y una lista con el mismo color de fondo y un borde que los englobe).

Para crear una nueva caja en primer lugar escribiremos en HTML la etiqueta <div> ... </div> con el atributo id="..." o el atributo class="...". Esto nos permitirá utilizar en el código CSS el selector de "id" o el selector de clase, (ya vistos en la página 3.1. Selectores básicos. Después, dependiendo de cómo queramos el diseño, colocaremos los siguientes elementos:

A continuación se muestra un ejemplo de página en el que su contenido se ha dividido en bloques mediante etiquetas div a las que se le han aplicado distintos estilos:

Ver página ejemplo


En este ejemplo se ven distintas cajas con diferentes elementos dentro de cada caja y distintos estilos para cada una de las cajas. El código HTML y CSS aplicado para crear las distintas cajas viene también en la página.


tamaño de la caja

Podemos definir el tamaño de la caja usando las mismas propiedades que hemos usado para definir el tamaño de imagenes. Son las propiedades width (ancho) y height (alto) ya vistas en la página 5.1 Tamaño de imagen.

Estas propiedades tienen como valor una medida o porcentaje. Lo más habitual es utilizar como medida el pixel, o también el porcentaje para el ancho (width). Si no indicamos la altura ésta se adaptará al contenido de la caja. Sobre cómo indicar las medidas en CSS recordemos lo indicado en la página 1.4. Colores y medidas.

La altura sólo se puede expresar en porcentaje si elemento contenedor de la caja tiene perfectamente definida su altura. Por lo tanto si el elemento contenedor es el body no podremos expresarla en porcentaje, ya que la altura del body no está definida.

A continuación se muestra el mismo ejemplo anterior, pero al que hemos definido la anchura y altura de las cajas.

Ver página ejemplo





Por defecto, las cajas se posicionan siempre hacia la derecha y lo más arriba posible (respetando el tamaño de las otras cajas). Esto podemos cambiarlo mediante el código CSS aplicándole unas propiedades de posicionamiento, vamos a ver esto en la siguiente página:

Propiedades de posición



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com