domingo, 5 de abril de 2015

Bodes y Márgenes de la página web



INSTITUTO TECNOLÓGICO SUPERIOR
"CENTRAL TÉCNICO"




Tema: Bordes y Margenes de la página web.


Alumno: Carranza Zambrano Jackson.


IMG-20150317-WA0001.jpg




Docente: Ing. Julio Calvopiña Herrera, MSc.




Año Lectivo: 2014 - 2015.



La propiedad compuesta border (Borde)
La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:
  • color (nombre de color o código RGB o el valor transparent)
  • grosor (valor absoluto de distancia, o los valores thin (fino), medium (medio) o thick (grueso))
  • estilo
Las tres características del borde se pueden escribir en cualquier orden.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px solid; 
}
Esto es un párrafo con borde de estilo solid.

Estilos de bordes

Los estilos de bordes definidos en CSS 2 son none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px none; 
}
Esto es un párrafo con borde de estilo none.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px hidden; 
}
Esto es un párrafo con borde de estilo hidden.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px dotted; 
}
Esto es un párrafo con borde de estilo dotted.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px dashed; 
}
Esto es un párrafo con borde de estilo dashed.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px solid; 
}
Esto es un párrafo con borde de estilo solid.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px double; 
}
Esto es un párrafo con borde de estilo double.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px groove; 
}
Esto es un párrafo con borde de estilo groove.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px ridge; 
}
Esto es un párrafo con borde de estilo ridge.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px inset; 
}
Esto es un párrafo con borde de estilo inset.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 5px outset; 
}
Esto es un párrafo con borde de estilo outset.
Los estilos groove, ridge inset y outset producen un efecto tridimensional, pero el resultado depende del color del borde y de los colores de fondo del elemento y del elemento superior:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: white 8px groove; 
}
Esto es un párrafo con borde de estilo groove.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: white 8px ridge; 
}
Esto es un párrafo con borde de estilo ridge.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: white 8px inset; 
}
Esto es un párrafo con borde de estilo inset.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: white 8px outset; 
}
Esto es un párrafo con borde de estilo outset.
Los estilos none y hidden producen el mismo resultado (no se muestra el borde), salvo en el caso de las tablas en modo colapsado, en el que hidden oculta el borde independientemente del borde de la casilla contigua, pero none no (para que se oculte el borde común, las dos casillas contiguas deben tener su borde común en none).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
  border-collapse: collapse;
}

td.sinborde {
  border: hidden
}
Celda A1Celda A2Celda A3
Celda B1Celda B2
(sin borde)		Celda B3
(sin borde)
Celda C1Celda C2Celda C3
Celda A1Celda A2Celda A3
Celda B1Celda B2
(sin borde)		Celda B3
(sin borde)
Celda C1Celda C2Celda C3
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
  border-collapse: collapse;
}

td.sinborde {
  border: none
}
Celda A1Celda A2Celda A3
Celda B1Celda B2
(sin borde)		Celda B3
(sin borde)
Celda C1Celda C2Celda C3
Celda A1Celda A2Celda A3
Celda B1Celda B2
(sin borde)		Celda B3
(sin borde)
Celda C1Celda C2Celda C3
Nota: Versiones anteriores a Firefox 7 no se comportaban de este modo, como se comenta en la página de diferencias entre versiones de Firefox.

Las propiedades compuestas border-top, border-right, border-bottom y border-left

Las propiedades compuestas border-top, border-right, border-bottom y border-left permiten establecer de forma independiente los cuatro bordes (arriba, derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden escribir las tres características de cada borde en cualquier orden. Se puede definir uno, dos, tres o cuatro bordes.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-left: red 5px solid; 
}
Esto es un párrafo con borde izquierdo.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-top: black 5px dashed;
  border-left: red 5px solid; 
}
Esto es un párrafo con borde izquierdo y superior.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-top: black 5px dashed;
  border-bottom: blue 10px dotted; 
  border-left: red 5px solid; 
}
Esto es un párrafo con borde izquierdo, superior e inferior.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-top: black 5px dashed;
  border-right: green 10px double; 
  border-bottom: blue 10px dotted;
  border-left: red 5px solid; 
}
Esto es un párrafo con cuatro bordes distintos.

Las propiedades border-color, border-width y border-style

Las propiedades border-color, border-width y border-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento. A cada una de las propiedades se le puedes dar uno, dos, tres o cuatro valores, que se interpretan de la siguiente manera:
  • 1 valor: este valor se aplica a los cuatro bordes
  • 2 valores: el primer valor se aplica a los bordes inferior y superior y el segundo a los bordes derecho e izquierdo
  • 3 valores: el primer valor se aplica al borde superior, el segundo a los bordes derecho e izquierdo y el tercer valor al borde inferior
  • 4 valores: el primer valor se aplica al borde superior, el segundo al borde derecho, el tercer valor al borde inferior y el cuarto al borde izquierdo
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red;
  border-width: 10px;
  border-style: solid;
}
Esto es un párrafo con borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red black;
  border-width: 10px;
  border-style: solid;
}
Esto es un párrafo con borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red black green;
  border-width: 10px;
  border-style: solid;
}
Esto es un párrafo con borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red black green orange;
  border-width: 10px;
  border-style: solid;
}
Esto es un párrafo con borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red black green;
  border-width: 10px 40px;
  border-style: dashed solid dotted;
}
Esto es un párrafo con borde.
En general, para que el navegador muestre un borde, se tendrían que definir las tres propiedades (color, grosor y estilo), pero en realidad se puede comprobar que con sólo definir el estilo ya se muestra un borde negro. El motivo es que la hoja de estilo predeterminada de los navegadores define un color y un grosor por omisión y al definir el estilo se completa la definición del borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-style: solid;
}
Esto es un párrafo con borde.
Si no define el estilo del borde, aunque se defina el color y el grosor los navegadores no muestran el borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border-color: red;
  border-width: 5px;
}
Esto es un párrafo con borde.

Las propiedades individuales

Se puede establecer de forma independiente cada propiedad de cada borde mediante las propiedades:
  • border-top-color, border-right-color, border-bottom-color, border-left-color
  • border-top-width, border-right-width, border-bottom-width, border-left-width
  • border-top-style, border-right-style, border-bottom-style, border-left-style
En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro

Bordes en <html> y <body>

Las etiquetas <html> y <body> también pueden tener bordes, como muestra la siguiente página de ejemplo.
El borde de <body> se adapta al contenido, sin tener en cuenta los elementos flotantes, mientras que el borde de <html> abarca los elementos flotantes, como muestra la siguiente página de ejemplo.
Nota: Internet Explorer 9 mantiene el margen interior de <html> y las imágenes flotantes no tocan el borde de <html>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE9 e IE8.




Margen exterior: margin, margin-top, margin-right, margin-bottom y margin-left

El margen exterior de un elemento es el espacio transparente situado alrededor del borde del elemento, independientemente de que el borde sea o no visible.
La propiedad margin permite establecer el tamaño del margen exterior. Como en el caso de las propiedades border-color, border-widthy border-style se pueden escribir de uno a cuatro valores, que se interpretan de la siguiente manera:
  • 1 valor: este valor se aplica a los cuatro lados
  • 2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
  • 3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
  • 4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  margin: 20px; 
  border: red 2px solid; 
}
Esto es un párrafo con borde de color rojo y un margen de 20 pixeles alrededor. Fíjate en que los márgenes superior e inferior de dos párrafos seguidos se solapan.
Esto es un párrafo con borde de color rojo y un margen de 20 pixeles alrededor. Fíjate en que los márgenes superior e inferior de dos párrafos seguidos se solapan.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  margin: 0px; 
  border: red 2px solid; 
}
Esto es un párrafo con borde de color rojo y sin margen alrededor. Fíjate en que los párrafos seguidos no tienen separación entre ellos.
Esto es un párrafo con borde de color rojo y sin margen alrededor. Fíjate en que los párrafos seguidos no tienen separación entre ellos.
Las propiedades margin-top, margin-right, margin-bottom y margin-left permiten establecer el tamaño del margen exterior de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes exteriores que no se establezcan los elegirá el navegador (normalmente tienen un valor distinto de cero).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  margin-left: 20px; 
  border: red 2px solid; 
}
Esto es un párrafo con borde de color rojo y un margen izquierdo de 20 pixeles. El resto de márgenes los elige el navegador.
Esto es un párrafo con borde de color rojo y un margen izquierdo de 20 pixeles. El resto de márgenes los elige el navegador.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  margin-left: 0px; 
  border: red 2px solid; 
}
Esto es un párrafo con borde de color rojo y sin margen izquierdo. El resto de márgenes los elige el navegador.
Esto es un párrafo con borde de color rojo y sin margen izquierdo. El resto de márgenes los elige el navegador.

Centrar con margin-left y margin-right

Para centrar un elemento de bloque, se utilizan las propiedades margin-left y margin-right con el valor auto.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
  margin-left: auto; 
  margin-right: auto; 
}
Casilla 1Casilla 2
Casilla 3Casilla4
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
div { 
  border: black 3px solid; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50%; 
}
Este párrafo está dentro de una división.

Margen interior: padding, padding-top, padding-right, padding-bottom y padding-left

El margen interior de un elemento es el espacio transparente situado entre el elemento y el borde. Este espacio se puede de definir aunque el elemento no tenga borde.
La propiedad padding permite establecer el tamaño del margen interior. Como en el caso de las propiedades border-color, border-widthy border-style se pueden escribir de uno a cuatro valores, que se interpretan de la siguiente manera:
  • 1 valor: este valor se aplica a los cuatro lados
  • 2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
  • 3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
  • 4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 2px solid; 
  padding: 10px; 
}
Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde.
Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 2px solid; 
  padding: 0px; 
}
Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde.
Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde.
Las propiedades padding-top, padding-right, padding-bottom y padding-left permiten establecer el tamaño del margen interior de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes interiores que no se establezcan los elegirá el navegador (normalmente toman el valor cero).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: red 2px solid; 
  padding-left: 10px; 
}
Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde. El resto de márgenes interiores los elige el navegador.
Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde. El resto de márgenes interiores los elige el navegador.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  padding-left: 0px; 
  border: red 2px solid; 
}
Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde. El resto de márgenes interiores los elige el navegador.
Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde. El resto de márgenes interiores los elige el navegador.

Superposición de márgenes exteriores e interiores

Únicamente se superponen los márgenes exteriores de dos elementos contiguos (horizontal o verticalmente). Es decir, el espacio entre dos elementos es igual al mayor de los márgenes exteriores de los elementos.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 2px solid; 
  font-weight: bold; 
  margin: 20px; 
}
Este párrafo tiene un margen de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 20 píxeles, no de 40 (20+20).
Este párrafo tiene un margen de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 20 píxeles, no de 40 (20+20).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p.e2 { 
  margin: 20px; 
}

p {
  border: black 2px solid; 
  font-weight: bold; 
} 

p.e1 { 
  margin: 30px; 
}
Este párrafo tiene clase e1, es decir, un margen de 30 píxeles alrededor suyo. El párrafo siguiente tiene clase e2, es decir, un margen de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 30 píxeles, no de 50 (30+20).
Este párrafo tiene clase e2, es decir, un margen de 20 píxeles alrededor suyo. El párrafo anterior tiene clase e1, es decir, un margen de 30 píxeles alrededor suyo. El espacio entre ambos párrafos es de 30 píxeles, no de 50 (30+20).
Los márgenes interiores de dos elementos contiguos (horizontal o verticalmente) no se superponen, independientemente de que los elementos lleven borde o no:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 2px solid; 
  font-weight: bold; 
  margin: 0px; 
  padding: 20px; 
}
Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  font-weight: bold; 
  margin: 0px; 
  padding: 20px; 
}
Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Los márgenes exteriores e interiores de dos elementos contiguos (horizontal o verticalmente) tampoco se superponen, independientemente de que los elementos lleven borde:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 2px solid; 
  font-weight: bold; 
} 

p.e1 { 
  margin: 0px; 
  padding: 20px; 
} 

p.e2 { 
  margin: 20px; 
  padding: 0px; 
}
Este párrafo tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Este párrafo tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El párrafo anterior tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p {
  font-weight: bold; 
}

p.e1 { 
  margin: 0px; 
  padding: 20px; 
} 

p.e2 { 
  margin: 20px; 
  padding: 0px; 
}
Este párrafo tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).
Este párrafo tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El párrafo anterior tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).

Los márgenes exteriores e interiores de dos elementos anidados tampoco se superponen, independientemente de que los elementos lleven borde:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 2px solid; 
  font-weight: bold;
  margin: 20px; 
  padding: 0px; 
} 

div { 
  border: red 2px solid;
  padding: 20px
}
Este párrafo tiene un margen exterior de 20 píxeles alrededor suyo. El párrafo está dentro de una división con margen interior de 20 píxeles. La separación entre bordes es de 40 píxeles (20+20).
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  font-weight: bold;
  margin: 20px; 
  padding: 0px; 
} 

div { 
  padding: 20px
}
Este párrafo tiene un margen exterior de 20 píxeles alrededor suyo. El párrafo está dentro de una división con margen interior de 20 píxeles. El espacio alrededor es de 40 píxeles (20+20).

Márgenes exteriores e interiores de <html> y <body>

Los márgenes exteriores e interiores de <html> y <body> no se superponen ya que son elementos anidados, como puede comprobarse en la siguiente página de ejemplo o en las siguientes capturas de pantalla de esa página en Firefox. En esa página, tanto <html> como<body> tienen un margin y padding de 10px, por lo que espacio alrededor del contenido es de 40px en total (10px+10px+10px+10px).
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeFF - margin y padding en html y bodymargin y padding en html y body
En las capturas anteriores:
  • los 10px exteriores (de color de fondo azul) corresponden al margin de <html>,
  • los siguientes 10px (de color de fondo azul) corresponden al padding de <html>,
  • los siguientes 10px (de color de fondo azul) corresponden al margin de <body>,
  • y los últimos 10px (de color de fondo amarillo) corresponden al padding de <body>.
Es importante señalar que la imagen de fondo (Cuadricula transparente) de la página no se coloca en la esquina superior izquierda de la ventana y se repite a partir de esa posición, sino que se coloca desplazada 10px a la derecha y hacia abajo de la esquina superior izquierda y se repite a partir de esa posición debido al margin de 10px de <html>, como se comenta en la lección de fondos.
Los navegadores aplican de forma predeterminada algunos de estos márgenes, como se observa en el ejemplo siguiente. El borde de colorteal que se ve en el lado izquierdo, superior y derecho se debe a márgenes de algunos elementos.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
html {
  background: url("cuadricula.png") teal;  
}

body {
  background: url("cuadricula.png") white;  
}

pre {
}
Concretamente, los navegadores aplican margin en px a <body>. Para verlo, lo podemos poner a cero:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
html {
  background: url("cuadricula.png") teal;  
}

body {
  background: url("cuadricula.png") white;  
  margin: 0px;
}

pre {
}
El margen superior se debe al margin (en em) del elemento <pre>. Para verlo, lo podemos poner a cero:
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
html {
  background: url("cuadricula.png") teal;  
}

body {
  background: url("cuadricula.png") white;  
  margin: 0px;
}

pre {
  margin: 0px;
}




“Cuanto más sabes, más te das cuenta de que no sabes nada”
(Sócrates)




Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)
Widget