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: 29-01-2016.

Visitas este mes: 82

Visitas el mes pasado: 119

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.




2. Texto en CSS (III)

2.3 Modelo de cajas

html

Modelo de cajas: Estructura.

El lenguaje CSS trata a todos los elementos como si estuvieran contenidos en cajas rectangulares. Es lo que se llama el modelo de cajas. Cada una de estas cajas puede tener un borde que lo delimita, un margen interno y un margen externo. Podemos también definir otra serie de propiedades como su altura, su anchura, forma de verse, colores de fondo, etc.

En este tema veremos los márgenes y bordes que pueden tener estas cajas, dejando para temas posteriores otra serie de propiedades.

Si normalmente al ver una página Web no vemos una caja en cada párrafo o en cada imagen, es porque la mayoría de las veces los valores de los márgenes y del borde son cero o transparentes, (valores por defecto) pero a cualquier elemento definido mediante una etiqueta HTML se le podrían aplicar los bordes y márgenes que vamos a explicar a continuación.


Margen, borde y relleno.

de dentro a afuera, la estructura de una caja sería la siguiente:

Las propiedades padding, border, margin indican respectivamente el relleno, el borde, y el margen externo. Cada una de ellas puede referirse a los cuatro lados de la caja mediante las palabras top (superior), bottom (inferior), left (izquierda), y right (derecha),

Veámoslo en el siguiente esquema:

Esquema márgenes de caja

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno (padding) se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen (margin) se muestra el color o imagen de fondo de su elemento padre (el elemento que lo contiene).

Al igual que las etiquetas que las definen, las cajas pueden estar anidadas, una dentro de otra, lo cual puede crear un sistema bastante complejo para la estructura de la página.

En CSS el relleno, el borde y el margen externo se delimitan mediante propiedades que iremos viendo en las siguientes páginas de este manual.


Otras aplicaciones del modelo de cajas.

El modelo de cajas sirve también para otras aplicaciones que veremos más adelante, tales como estructurar la página en varios apartados o columnas; poner fondos distintos a distintos elementos, tratar de distinta manera los textos en las distintas columnas, ocultar o resaltar algunas cajas. Todo eso lo iremos viendo en temas posteriores.




En la siguiente página veremos cómo poner bordes que delimitan los elementos de la página:

Los bordes







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