Css - Tema 2

Cascading Style Sheets

Tema 2: El modelo de cajas

© Abril, 2015

Prof. Renny Batista

El modelo de caja CSS

Todos los elementos HTML pueden ser considerados como

cajas. En CSS, el término "modelo de caja" se utiliza

cuando se habla de diseño y maquetación.

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 agregar un borde

alrededor de los elementos, y para definir el espacio

entre los elementos.

Abril, 2015 2


La imagen siguiente muestra el modelo de caja:

Explicación de las diferentes partes:

– Content - El contenido de la caja, en la que aparecen el texto y las imágenes

– Padding - Limpia un área alrededor del contenido. El relleno es transparente

– Border - Un borde que va alrededor del relleno y contenido

– Margin - Limpia una zona fuera de la frontera. El margen es transparente

Abril, 2015 3


div { background-color: lightgrey; width: 300px;

padding: 25px; border: 25px solid navy;

margin: 25px;

}

Abril, 2015 4

El modelo de caja CSS: Ancho y alto

Con el fin de establecer el ancho y la altura de un

elemento correctamente en todos los navegadores,

es necesario saber cómo funciona el modelo de

caja.

Nota Importante: Al configurar las propiedades de

width y height de un elemento con CSS, solo debe

establecer la anchura y la altura del área del

contenido. Para calcular el tamaño “completo” de

un elemento, también debe agregar relleno, bordes

y márgenes.

Abril, 2015 5


Aplicamos un estilo a un elemento <div> para que tenga una anchura total de 350 píxeles:

div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }

Vamos a hacer los cálculos:

320px (anchura)

+ 20px (izquierda + derecha relleno)

+ 10px (izquierda + derecha frontera)

+ 0px (izquierda + margen derecho)

= 350px:

Abril, 2015 6


<!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } </style> </head> <body> <img src="klematis4_big.jpg" width="350" height="263" alt="Klematis"> <div>The picture above is 350px wide. The total width of this element is also 350px.</div> </body> </html>

Abril, 2015 7


La anchura total de un elemento debe calcularse así:

Ancho total del elemento = width + left padding +

right padding + left border + right border + left margin

+ right margin

La altura total de un elemento debe calcularse así:

Altura total del elemento = height + top padding +

bottom padding + top border + bottom border + top

margin + bottom margin

Abril, 2015 8

El modelo de caja CSS: Border

Los bordes se pueden usar para muchas cosas, por

ejemplo, como elemento decorativo o para subrayar la

separación entre dos cosas. CSS te ofrece opciones sin fin

a la hora de usar bordes en tus páginas.

Vamos a examinar las siguientes propiedades CSS:

– border-width

– border-color

– border-style:

Abril, 2015 9


La anchura del borde se define por medio de la

propiedad border-width, que dispone de los valores thin,

medium y thick, o de un valor numérico indicado en

píxeles. La siguiente imagen ilustra cómo funciona el

border-width.

La propiedad border-color define el color del borde. Los

valores de esta propiedad son los valores de color

normales, por ejemplo, "#123456" (en notación Hex),

"rgb(123,123,123)" (en notación RGB) o "yellow" (por

nombre del color).

Abril, 2015 10


Se puede elegir entre diferentes estilos de borde border-

style. A continuación se muestran varios estilos. Todos los

ejemplos se muestran con el valor del color a “gold" y el

valor de la anchura a "thick", pero se pueden mostrar, por

supuesto, en otros colores y grosores. Si no queremos

mostrar ningún borde, se puede usar los valores none o

hidden.

Abril, 2015 11

El modelo de caja CSS: Margin

El margen despeja un área alrededor de un elemento (fuera del borde). El margen no posee un color de fondo, y es completamente transparente.

El margen superior, inferior, derecho e izquierdo se puede cambiar de forma independiente utilizando propiedades separadas. Se puede utilizar una propiedad margin abreviada, para cambiar todos los márgenes a la vez.

p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; }

p { margin: 100px 50px; }

Abril, 2015 12

El modelo de caja CSS: Padding

El relleno (padding) despeja un área alrededor del contenido (dentro del borde). El relleno se ve afectado por el color de fondo del elemento.

El relleno superior, inferior, derecho e izquierdo se puede cambiar de forma independiente utilizando propiedades separadas. Se puede utilizar una propiedad padding abreviada, para cambiar todos los rellenos a la vez.

p { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; }

p { padding: 25px 50px; }

Abril, 2015 13

El modelo de caja CSS: Posicionamiento

Las propiedades de posicionamiento CSS le permiten

ubicar un elemento. También puede colocar un

elemento detrás de otro, y especificar qué debe suceder

cuando el contenido de un elemento es demasiado

grande.

Los elementos pueden ser colocados utilizando las

propiedades superior, inferior, izquierda y derecha. Sin

embargo, estas propiedades no funcionarán a menos

que la propiedad position se establece en primer lugar.

También funcionan de manera diferente en función del

método de posicionamiento.

Hay cuatro métodos de posicionamiento diferentes.

Abril, 2015 14


Posicionamiento estático

– Elementos HTML se colocan estáticos por defecto. Un

elemento posicionado estático está siempre

posicionado de acuerdo con el flujo normal de la

página.

– Los elementos posicionados estáticos no se ven

afectadas por las propiedades superior, inferior,

izquierda y derecha.

Abril, 2015 15


Posicionamiento fijo

– Un elemento con una posición fija se coloca en relación con la ventana del navegador, y no se moverá incluso si la ventana se desplaza:

p.pos_fixed { position: fixed; top: 30px; right: 5px; }

– Elementos posicionados fijos se elimina del flujo normal. El documento y otros elementos se comportan como si no existe el elemento posicionado fijo.

– Los elementos posicionados fijos pueden superponerse a otros elementos.

Abril, 2015 16


Posicionamiento relativo

– Un elemento posicionado relativo se coloca en relación a su posición normal:

h2.pos_left { position: relative; left: -20px; } h2.pos_right { position: relative; left: 20px; }

– El contenido de los elementos con posición relativa se puede mover y se superponen otros elementos, pero el espacio reservado para el elemento aún se conserva en el flujo normal.

– Elementos con posición relativa menudo se usan como bloques de contenedores para elementos con posición absoluta.

Abril, 2015 17


Posicionamiento absoluto

– Un elemento en posición absoluta se sitúa en relación con el primer elemento padre que tenga una posición distinta a estática. Si no se encuentra dicho elemento, el bloque contenedor es <html>:

h2 { position: absolute; left: 100px; top: 150px; }

– Elementos con posición absoluta se quitan del flujo normal. El documento y otros elementos se comportan como si no existe el elemento con posición absoluta.

– Los elementos posicionados absolutamente pueden superponerse a otros elementos.

Abril, 2015 18


La superposición de elementos

– Cuando los elementos están posicionados fuera del flujo normal, que pueden superponerse a otros elementos.

– La propiedad z-index especifica el orden de apilamiento de un elemento (qué elemento se debe colocar delante o detrás, los otros).

– Un elemento puede tener una orden de pila positivo o negativo:

img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Abril, 2015 19

El modelo de caja CSS: Float

Con float un elemento puede ser empujado a la izquierda

o la derecha, permitiendo que otros elementos se ajusten

alrededor ella.

float se utiliza a menudo con imágenes, pero también es

útil cuando se trabaja con diseños.

Abril, 2015 20

El modelo de caja CSS: Cómo "flota" un elemento?

Los elementos están flotando horizontalmente, esto

significa que un elemento sólo puede flotar izquierda o la

derecha, no hacia arriba o hacia abajo.

Un elemento flotante se moverá tan a la izquierda o la

derecha como pueda. Por lo general, esto significa hasta

llegar a la izquierda o la derecha del elemento

contenedor.

Los elementos después del elemento flotante fluyen a su

alrededor.

Los elementos antes del elemento flotante no se verán

afectados.

Abril, 2015 21


Si una imagen se hace flotar a la derecha, el texto siguiente fluye a su alrededor, a la izquierda:

img { float: right; }

Elementos flotantes uno la lado del otro: Si coloca varios elementos flotantes, uno tras otro, van a flotar junto al otro, si hay espacio.

.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; }

Abril, 2015 22


Desactivar el float - Usando clear

– Los elementos después del elemento flotante fluyen a su

alrededor. Para evitar esto, utilice la propiedad clear.

– La propiedad clear especifica que no se permiten los

lados de un elemento distintos elementos flotantes.

.text_line {

clear: both;

}

Abril, 2015 23


Abril, 2015 24

Propiedad Descripción Valores

clear Especifica cuales lados de un

elemento donde no se permitan otros

elementos flotantes

left

right

both

none inherit

float Especifica si una caja debe flotar left

right

none inherit

http://www.w3schools.com/cssref/pr_class_clear.asp

http://www.w3schools.com/cssref/pr_class_float.asp

El modelo de caja CSS: alineando

Alineando los elementos de bloque

– Un elemento de bloque es un elemento que ocupa

todo el ancho disponible, y tiene un salto de línea antes

y después de ella.

– Ejemplos de elementos de bloque: <h1>, <p>, <div>.

Alinear centrado mediante la propiedad margin

– Los elementos de bloque pueden ser centrado

ajustando los márgenes izquierdo y derecho en "auto".

– Nota: El uso de margin: auto; no funciona en IE8 y en

versiones anterior a menos que se declare un DOCTYPE!.

Abril, 2015 25


Alineando los elementos de bloque

– Un elemento de bloque es un elemento que ocupa

todo el ancho disponible, y tiene un salto de línea antes

y después de ella.

– Ejemplos de elementos de bloque: <h1>, <p>, <div>.

Alinear centrado mediante la propiedad margin

– Los elementos de bloque pueden ser centrado

ajustando los márgenes izquierdo y derecho en "auto".

– Nota: El uso de margin: auto; no funciona en IE8 y en

versiones anterior a menos que se declare un DOCTYPE!.

Abril, 2015 26


Ajustar los márgenes izquierdo y derecho a auto especifica

que se deben dividir el margen disponible por igual. El

resultado es un elemento de centrado:

Nota: La alineación centrada no tiene efecto si la

propiedad width está al 100%.

.center {

margin-left: auto;

margin-right: auto;

width: 70%;

background-color: #b0e0e6;

}

Abril, 2015 27


Alineando a la Izquierda y Derecha usando la propiedad

position

Un método para alinear elementos es utilizar el

posicionamiento absoluto.

Nota: los elementos posicionados absolutos se eliminan del

flujo normal, y pueden solapar elementos.

.right {

position: absolute;

right: 0px;

width: 300px;

background-color: #b0e0e6;

}

Abril, 2015 28


Problemas de compatibilidad

– Al alinear los elementos de este tipo, siempre es una

buena idea predefinir el margen y el relleno para el

elemento <body>. Esto es para evitar diferencias

visuales en diferentes navegadores.

– Hay un problema con IE8 y versiones anteriores, cuando

se utiliza la propiedad position. Si un elemento

contenedor (en nuestro caso <div class = "container">)

tiene un ancho especificado, y falta la declaración

DOCTYPE!, IE8 y versiones anteriores le sumará un

margen de 17px en el lado derecho. Esto parece ser el

espacio reservado para una barra de desplazamiento.

Siempre coloque la declaración DOCTYPE al utilizar la

propiedad position.

Abril, 2015 29


Problemas de compatibilidad

– Al alinear los elementos de este tipo, siempre es una

buena idea predefinir el margen y el relleno para el

elemento <body>. Esto es para evitar diferencias

visuales en diferentes navegadores.

– Hay un problema con IE8 y versiones anteriores, cuando

se utiliza la propiedad position. Si un elemento

contenedor (en nuestro caso <div class = "container">)

tiene un ancho especificado, y falta la declaración

DOCTYPE!, IE8 y versiones anteriores le sumará un

margen de 17px en el lado derecho. Esto parece ser el

espacio reservado para una barra de desplazamiento.

Siempre coloque la declaración DOCTYPE al utilizar la

propiedad position.

Abril, 2015 30


body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }

Abril, 2015 31

Bibliografías

Abril, 2015 32

Tutorial CSS. http://es.html.net/tutorials/css/

W3Schools a web developers site. http://www.w3schools.com

LibrosWeb.es. Introducción a CSS. http://librosweb.es/libro/css/

Css - Tema 2

Software

Transcript of Css - Tema 2