SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
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
El modelo de caja CSS
 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
El modelo de caja CSS
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
El modelo de caja CSS
 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
El modelo de caja CSS
<!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
El modelo de caja CSS
 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
El modelo de caja CSS: Border
 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
El modelo de caja CSS: Border
 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
El modelo de caja CSS: Posicionamiento
 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
El modelo de caja CSS: Posicionamiento
 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
El modelo de caja CSS: Posicionamiento
 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
El modelo de caja CSS: Posicionamiento
 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
El modelo de caja CSS: Posicionamiento
 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
El modelo de caja CSS: Cómo "flota" un elemento?
 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
El modelo de caja CSS: Cómo "flota" un elemento?
 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
El modelo de caja CSS: Cómo "flota" un elemento?
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
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
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 26
El modelo de caja CSS: alineando
 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
El modelo de caja CSS: alineando
 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
El modelo de caja CSS: alineando
 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
El modelo de caja CSS: alineando
 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
El modelo de caja CSS: alineando
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/

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTML
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
css
csscss
css
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadBuenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
 
Introducción al desarrollo web frontend
Introducción al desarrollo web frontendIntroducción al desarrollo web frontend
Introducción al desarrollo web frontend
 
CSS
CSSCSS
CSS
 

Destacado

Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - FormulariosRenny Batista
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Renny Batista
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIRenny Batista
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Jorge Llanten
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para ExcelBerthamazon
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012iestp huari
 
EXCEL Visual basic
EXCEL Visual basicEXCEL Visual basic
EXCEL Visual basicLuis Pacheco
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Renny Batista
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSSDinamiclerning
 
Ejercicios de excel con visual basic
Ejercicios de excel con visual basicEjercicios de excel con visual basic
Ejercicios de excel con visual basicAleckFong
 

Destacado (20)

Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema II
 
05 java excepciones
05 java excepciones05 java excepciones
05 java excepciones
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1
 
Mac
MacMac
Mac
 
Curso visual basic
Curso visual basicCurso visual basic
Curso visual basic
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para Excel
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012
 
EXCEL Visual basic
EXCEL Visual basicEXCEL Visual basic
EXCEL Visual basic
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015
 
SEO
SEOSEO
SEO
 
Wordpress
WordpressWordpress
Wordpress
 
Presentación css
Presentación cssPresentación css
Presentación css
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Ejercicios de excel con visual basic
Ejercicios de excel con visual basicEjercicios de excel con visual basic
Ejercicios de excel con visual basic
 

Similar a Css - Tema 2

Similar a Css - Tema 2 (20)

Presentacion mia
Presentacion miaPresentacion mia
Presentacion mia
 
CSS Posicionamiento y Visualizacion
CSS Posicionamiento y VisualizacionCSS Posicionamiento y Visualizacion
CSS Posicionamiento y Visualizacion
 
CSS.3.pptx
CSS.3.pptxCSS.3.pptx
CSS.3.pptx
 
boxmodel lupe
boxmodel lupeboxmodel lupe
boxmodel lupe
 
Exposicion capítulo 5
Exposicion capítulo 5Exposicion capítulo 5
Exposicion capítulo 5
 
Boxmodel
BoxmodelBoxmodel
Boxmodel
 
Diseño web - 2020-2021 - 2ª PARTE
Diseño web - 2020-2021 - 2ª PARTEDiseño web - 2020-2021 - 2ª PARTE
Diseño web - 2020-2021 - 2ª PARTE
 
07_Maquetación.pptx
07_Maquetación.pptx07_Maquetación.pptx
07_Maquetación.pptx
 
css3
css3css3
css3
 
05_Estilos CSS y modelos de caja 02.pptx
05_Estilos CSS y modelos de caja 02.pptx05_Estilos CSS y modelos de caja 02.pptx
05_Estilos CSS y modelos de caja 02.pptx
 
Box Model
Box ModelBox Model
Box Model
 
CSS, planeando para el futuro
CSS, planeando para el futuroCSS, planeando para el futuro
CSS, planeando para el futuro
 
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
6. CSS - Unidades de medida, Box Modeling, Positions..pdf6. CSS - Unidades de medida, Box Modeling, Positions..pdf
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
 
Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
1. guia css3
1. guia css31. guia css3
1. guia css3
 
Capítulo 4box model
Capítulo 4box modelCapítulo 4box model
Capítulo 4box model
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Flexbox
FlexboxFlexbox
Flexbox
 
Hojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSSHojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSS
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 

Más de Renny Batista

Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del softwareRenny Batista
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de DatosRenny Batista
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetosRenny Batista
 

Más de Renny Batista (6)

03 java poo_parte_2
03 java poo_parte_203 java poo_parte_2
03 java poo_parte_2
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del software
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de Datos
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetos
 

Css - Tema 2

  • 1. Cascading Style Sheets Tema 2: El modelo de cajas © Abril, 2015 Prof. Renny Batista
  • 2. 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
  • 3. El modelo de caja CSS  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
  • 4. El modelo de caja CSS div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; } Abril, 2015 4
  • 5. 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
  • 6. El modelo de caja CSS  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
  • 7. El modelo de caja CSS <!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
  • 8. El modelo de caja CSS  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
  • 9. 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
  • 10. El modelo de caja CSS: Border  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
  • 11. El modelo de caja CSS: Border  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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. El modelo de caja CSS: Posicionamiento  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
  • 16. El modelo de caja CSS: Posicionamiento  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
  • 17. El modelo de caja CSS: Posicionamiento  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
  • 18. El modelo de caja CSS: Posicionamiento  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
  • 19. El modelo de caja CSS: Posicionamiento  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
  • 20. 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
  • 21. 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
  • 22. El modelo de caja CSS: Cómo "flota" un elemento?  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
  • 23. El modelo de caja CSS: Cómo "flota" un elemento?  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
  • 24. El modelo de caja CSS: Cómo "flota" un elemento? 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
  • 25. 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
  • 26. 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 26
  • 27. El modelo de caja CSS: alineando  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
  • 28. El modelo de caja CSS: alineando  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
  • 29. El modelo de caja CSS: alineando  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
  • 30. El modelo de caja CSS: alineando  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
  • 31. El modelo de caja CSS: alineando body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; } Abril, 2015 31
  • 32. 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/