modelo de caja css


































Contenido













INTRODUCCION
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.
Separar ladefinición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear unapágina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.



















El modelo de caja CSS
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el término "modelo de caja" se usacuando se habla sobre el diseño y el diseño.
El modelo de caja CSS es esencialmente una caja que se envuelve alrededor de los elementos HTML, y se compone de: márgenes, bordes, el relleno y el contenido real.
El modelo de caja nos permite colocar un borde alrededor de elementos y elementos del espacio en relación con otros elementos.











Fondos
El último elemento que formael box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.
Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo alelemento . Si se establece un fondo a la página, como el valor inicial del fondo de los elementos es transparente, todos los elementos de la página se visualizan con el mismo fondo a menos que algún elemento especifique su propio fondo.
CSS define cinco propiedades para establecer el fondo de cada elemento(background-color,background-image, background-repeat, background-attachment, background-position) y otra propiedad de tipo "shorthand" (background).
La propiedad background-color permite mostrar un color de fondo sólido en la caja de un elemento. Esta propiedad no permite crear degradados ni ningún otro efecto avanzado.
Posicionamiento y visualización
Cuando los navegadores descargan el contenido HTML y CSS de las páginas web, aplican un procesamiento muy complejo antes de mostrarlas páginas en la pantalla del usuario.
Para cumplir con el modelo de cajas presentado en el capítulo anterior, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son:
Las propiedades width y height de la caja (si están establecidas).
El tipo de cada elemento HTML (elemento de bloque o elemento enlínea).
Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante).
Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.)
Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador.
Texto
Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades quedeterminan la apariencia del texto en su conjunto. Estas propiedades adicionales permiten controlar al alineación del texto, el interlineado, la separación entre palabras, etc.
La propiedad que define la alineación del texto se denomina text-align.
Propiedad
text-align
Valores
left | right | center | justify | inherit
Se aplica a
Elementos de bloque y celdas de tabla
Valor inicial
left...