Página personal de Jesús Martín Blanco

Hoja de estilos

Hoja de Estilo

Las hojas de estilos en...más...

Hojas externas

Hojas externas

Una hoja de estilos...más...

Hojas incrustadas

Hojas incrustadas

Una hoja de estilos...más...

Importar hojas

Importar hojas

Una hoja de estilos...más...

Estilos en línea

Estilos en línea

Para especificar estilos...más...

Cascada

cascada

A la hora de visualizar...más...

Herencia

Herencia

Teniendo en cuenta que...más...

Formato de regla

Formato de una Regla

Para definir un estilo...más...

Selectores

Selectores

La función de los...más...

Unidades medida

Unidades de medida

Algunas propiedades CSS...más...

Propiedades

Propiedades

Hay múltiples atributos...más...

Modelo caja

Modelo de caja

Los navegadores, de...más...

Creación y aplicación de estilos CSS3

Para crear el contenido y dar estructura y semántica a una web se utiliza el lenguaje HTML. Sin embargo, no sólo es importante el contenido, sino que también lo son, y mucho, el diseño y la presentación de la información. Es decir, la utilización del color, de la tipografía, de la imagen y de los elementos interactivos que hacen la interfaz agradable para el usuario que accede a la web.

Así, para mejorar el aspecto y el mantenimiento de un sitio web es indispensable la utilización de estilos en lenguaje CSS, Cascading Style Sheets. Este lenguaje controla la presentación de los documentos HTML de tal manera que permite separar la presentación del contenido de la página web y le aporta un formato al documento en HTML mucho más rico en diseño. Actualmente, CSS está soportado por todos los navegadores web.

Hojas de estilos: CSS3

Las hojas de estilos en cascada o CSS corresponden a un conjunto de reglas usadas para definir y crear la presentación de un documento escrito en HTML. El organismo encargado de regular su especificación es el World Wide Web Consortium (W3C)

Nota: Se puede consultar el estándar CSS3 en: www.w3.org/TR/CSS

El estándar actual del W3C para la aplicación de estilos es CSS3, y es totalmente compatible con sus versiones anteriores.

El lenguaje CSS indica al navegador como se ha de visualizar el contenido de la página web.

Las ventajas que ofrece la utilización de hojas de estilo son:

  • Separar la estructura de las páginas y su contenido (en HTML), del formato del texto y de la página (en CSS).
  • Tener muchas más posibilidades de formato y de presentación de una página web.
  • Unificar el diseño de las páginas web del sitio web, para así definir un estilo una sola vez y poder aplicarlo tantas veces como se quiera.
  • Reutilización de las mismas hojas de estilo para diferentes documentos HTML.
  • Estándar de W3C, que ofrece compatibilidad con versiones anteriores y con los diferentes navegadores.

Inclusión de estilos en un documento HTML

Para crear un documento web con estilos CSS se parte de un documento HTML con los contenidos etiquetados para designar la función de cada elemento dentro del documento, es decir, los encabezamientos, párrafos, imágenes, enlaces y otros elementos. Seguidamente, se utiliza el lenguaje CSS para definir el aspecto de cada elemento HTML, como el color, el tamaño, el tipo de letra y la posición.

De hecho, los estilos se pueden crear con el mismo editor que se utiliza para crear el documento HTML, como puede ser brackets o CODEP.

Además, los estilos CSS de un documento web se pueden definir en un documento de texto externo con la extensión .css, o también se pueden definir en el mismo documento HTML.

Enlazar una hoja de estilos externa

Una hoja de estilos externa es un documento de texto con extensión .css en el cual hay definidos los estilos de un documento web.

Ejemplo de contenido de un documento CSS

					
/* Comentari del document CSS */
 
h1 {
color: #FFFFFF;
background-color: #999999;
}
 
p {
font-family: Georgia, Helvetica;
}
					
				

Para enlazar un documento CSS a una página web se utiliza la etiqueta <link>, la cual se especifica en la cabecera, <head>, de la página web.

Es aconsejable utilizar una hoja de estilos externa, ya que permite su reutilización y facilita el mantenimiento del sitio web. Por el hecho de tener los estilos centralizados en uno o varios documentos, cualquier modificación resulta más sencilla.

Ejemplo de enlace de una hoja de estilos externa

					
<html>
<head>
<link rel="stylesheet" href="css/estilos.css" />
...
</head>
...
</html>
					
				

Los atributos del elemento link más relevantes se pueden consultar en la siguiente tabla.

Atributo 	Descripción
href 		Especifica la ruta del documento .css.
rel 		Define la relación entre los documentos .css y .html. Puede ser stylesheet o bien alternate.
type 		Indica al navegador el tipo de recurso. En este caso: text/css.
title 		Especifica un título al recurso.
media 		Especifica los medios en los que se aplica la hoja de estilos. 
				

Incrustar una hoja de estilos en HTML

Una hoja de estilos puede incrustarse en el documento HTML con el elemento <style>, el cual se suele definir en la cabecera (<head>) del documento web.

Ejemplo de estilos incrustados

					
<head>
...
<style type="text/css" media="screen">
body { background: url(foo.gif) red; color: black; }
p em { background-color: yellow; color: black; }
.nota { margin-left: 5em; margin-right: 5em; }
</style>
</head>
					
				

En el ejemplo anterior se puede ver como el elemento <style> también admite atributos type y media.

Se aconseja utilizar un estilo incrustado cuando un único documento tiene un único estilo. Pero si los mismos estilos se utilizan en diferentes páginas web, entonces sería más apropiado utilizar una hoja de estilos externa.

Importar una hoja de estilos

Una hoja de estilos externa puede ser importado con la regla @import de CSS, que se puede especificar tanto al inicio de un fichero .css como al principio del elemento <style>.

Ejemplo de importación de hojas de estilos

					
<style type="text/css" media="screen, projection">
@import url(http://midominio.com/css/estilos.css);
@import url(css/estilos2.css);
p { background-color: yellow; color: black; }
</style>						
					
				

Estilos en línea

Para especificar estilos en línea se utiliza el atributo style, que toma por valor cualquier nombre de propiedad CSS separados por ";".

Ejemplo de estilos en línea

					
<p style="color: red; font-family: 'New Century Schoolbook', serif">
Este párrafo muestra el texto rojo y con la fuente New Century Schoolbook, si está disponible.</p>						
					
				

Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar el contenido con la presentación. Además, los estilos en línea se aplican a todos los tipos dispositivos de salida (ordenadores, tabletas, móviles ...), lo que provoca que se descuadre un diseño adaptativo. Así pues, es por estos motivos que se deberían usar con moderación.

Características de CSS: cascada y herencia

Dos de las características que hacen que las hojas de estilo tengan un amplio abanico de posibilidades son la cascada y la herencia. La cascada se refiere a la posible combinación de diferentes hojas de estilo, mientras que la herencia se refiere a la capacidad que tienen los elementos del documento HTML de heredar propiedades de sus elementos antecesores.

Hojas de estilo en cascada

A la hora de visualizar una página web, el navegador debe interpretar los diferentes estilos definidos para cada elemento HTML. Estos pueden estar especificados en diferentes lugares:

  • Estilos predeterminados del navegador.
  • Estilos especificados por el usuario final.
  • Estilos relacionados con los documentos especificados por su autor. Estos se pueden definir en tres lugares:
    • En un fichero externo.
    • Al principio del documento, a través del elemento <style>.
    • En un elemento HTML específico, a través de su atributo style.

Así, hay tres fuentes principales de información de estilos formando una cascada, de tal manera que los estilos del usuario modifican o son prioritarios a los que defina por defecto el navegador, y los estilos del autor del documento serán prioritarios los anteriores.

Del mismo modo, si la definición de un estilo de un autor entra en conflicto con la definición de otro, se aplicará el último que esté definido. Es decir, un estilo definido a través del atributo style será prioritario respecto a los definidos a través del elemento <style>.

Ejemplo de aplicación de estilos en cascada

					
<!doctype html>
<html>
	<head>
	...
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>Encabezamiento</h1>
		<p style="color: blue">Un párrafo</p>
		<p>Otro párrafo</p>
	</body>
</html>						
					
				

Ejemplo: Visualización de los estilos en cascada.

Cascada

Si os fijáis, el texto del primer párrafo es azul, como se indica en el atributo style, en lugar de rojo definido en el estilo para los párrafos en el <head> de la página. Como veis, pues, el segundo párrafo ya aparece de color rojo.

La herencia en las hojas de estilo

Dado que todos los elementos de una página HTML, con excepción del elemento raíz <html>, están contenidos en otro elemento, se debe tener en cuenta que todo elemento hereda las propiedades de sus antecesores.

Sin embargo, se deben tener en cuenta las siguientes consideraciones:

  • No todas las propiedades se heredan. Esta característica se puede consultar en: www.w3.org/TR/css-2010/#properties.
  • Si se quiere forzar la herencia de una propiedad de un elemento que por defecto no hereda se puede utilizar el valor inherit.
  • Si se especifica un valor a una propiedad, este valor prevalece sobre el valor heredado.

Ejemplo de utilización de la herencia del lenguaje CSS

					
<!doctype html>
<html>
	<head>
	...
		<style>
		body {
		color: gray;
		}
		 
		p {
		font-size: 15px;
		}
		 
		strong {
		font-style: italic;
		font-size: 20px;
		}
		 
		div {
		border-style: solid;
		border-width: 1px;
		border-color: red;
		background-color: rgba(255, 0, 0, 0.2);
		margin: 5px;
		width: 300px;
		padding: 5px;
		}
		</style>
	</head>
	<body>
		<p>Un párrafo con un <strong>texto muy enfatizado</strong></p>
		 
		<div style="border-top-style: dashed;">
			<p> Aquí tenemos un párrafo</p>
			<div style="background-color:rgba(0,0,255,0.2);width:50%;">
				<p>No se hereda la línea discontinua</p>
			</div>
		</div>
		<br />
		<div style="border-top-style: dashed;">
			<p>Aquí tenemos otro párrafo</p>
			<div style="border-top-style: inherit;background-color:rgba(0,0,255,0.2);width:50%;">
				<p>Se hereda la línea discontinua</p>
			</div>
		</div>
	</body>
</html>						
					
				

Ejemplo: Visualización de la utilización de la herencia del lenguaje CSS.

Herencia

Fíjense como el color del texto es gris, ya que el párrafo, al estar contenido dentro del elemento <body>, hereda sus estilos. Asimismo, el elemento <strong> hereda los estilos de los elementos <p> y <body>.

Fijaos también como en la primera caja azul que se encuentra dentro de la roja no hereda el atributo border-top-style, y como la segunda caja azul se ha forzado la herencia de la roja, que la contiene con el valor inherit.

Formato de una regla CSS

Para definir un estilo específico, CSS utiliza una regla que consiste en un selector y un bloque donde se declaran las diferentes propiedades que debe tener el estilo.

selector {propiedad: valor; propiedad: valor; ...}
Donde selector hace referencia al elemento que se aplica el estilo.
Donde las diferentes propiedades se declaran en el bloque separadas por ";".

Ejemplo de definición de un estilo

					
h1 {font-size:10px; color:blue; text-align:center;}						
					
				

El estilo definido en el ejemplo anterior establece que las cabeceras h1 tendrán el siguiente aspecto:

  • La medida de la fuente será de 10 píxeles.
  • El color de la fuente será azul.
  • El texto se verá centrado.

Para definir los estilos se puede utilizar cualquier editor de texto, por ejemplo el mismo que se emplee para crear los documentos HTML, como pueden ser Brackets, CODEP, Sublime, etc.

Selectores

La función de los selectores es indicar a que elemento se aplicarán los estilos definidos. Los diferentes tipos de selectores se presentan en la siguiente tabla:

Selectores básicos

Sintaxis 		Descripción
* 			Selector universal. Permite aplicar un estilo a cualquier tipo.
nombreElemento 		Selector de tipos. Permite aplicar un estilo a un elemento HTML concreto.
.nombreClasse 		Selector de clase. Permite aplicar un estilo a los elementos que utilicen esta clase.
#idNombre 		Selector ID. Permite aplicar un estilo a un elemento que tenga un código de identificación único.
selector [atributo] 	Selector de atributo. Permite aplicar un estilo a un elemento que utilice un atributo específico.					
				
Nota: Podéis consultar los diferentes tipos de selectores en: goo.gl/9mY7Fw.

Así, por ejemplo, se pueden tener los siguientes estilos definidos en una hoja de estilos:

Ejemplos de estilos con diferentes selectores

					
* {
font-size: 15px;
font-family: Arial;
}
 
h1.ressaltat {
font-weight: bolder;
font-size: 25px;
color: white;
background-color: #ff80c0;
}
 
p,h2 {
text-align:center;
}
 
.textBlau {
color: blue;
}
 
#estil1 {
font-size: larger
}
 
a[target] {
background-color: yellow;
}						
					
				

Utilización de los estilos anteriores

					
<h1 class="ressaltat">Título resaltado</h1>
 
<h2> Los subtítulos aparecen centrados</h2>
 
<p> Los párrafos aparecen centrados igual que los subtítulos.</p>
 
<p class="textBlau">Este párrafo es azul. </p>
 
<p id="estil1">Este estilo solo se utiliza una vez en el documento html.</p>
 
<h1>Título sin resaltar</h1>
<a href="http://ioc.xtex.cat">IOC</a>
<br/>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
					
				

Ejemplo: Visualización de estilos anteriores.

Selectores básicos

Algunas consideraciones del ejemplo anterior son:

  • El atributo class se utiliza para aplicar un estilo de clase al elemento.
  • El atributo id se utiliza para aplicar un estilo id, único para un elemento.
  • Por defecto, el texto de todos los elementos será Arial de 15 px.
  • Los links que tengan el atributo target aparecen resaltados.
  • Si se quiere definir el mismo estilo para diferentes selectores se pueden agrupar separados por una coma.

En la siguiente tabla se pueden consultar los diferentes tipos de selectores de atributo, ya que es estos se puede especificar que valores han de tener.

Sintaxis 		Descripción
[atribut] 		Selecciona el elemento con este atributo.
[atribut=“valor”] 	El valor del atributo es valor.
[atribut^=“texto”] 	El valor del atributo comienza por texto.
[atribut$=“texto”] 	El valor del atributo acaba con texto.
[atribut*=“texto”] 	El valor del atributo contiene el texto.
[atribut~=“valor”] 	El valor del atributo es una lista de palabras separadas per espacios, una de les cuales es exactamente valor.
[atribut|=“valor”] 	El valor del atributo es una lista de palabras separadas per guiones, comenzando por valor. 					
				

Combinaciones de selectores

Los selectores se pueden combinar para añadir especificaciones a las reglas CSS. En la siguiente tabla se pueden visualizar algunas de las posibles combinaciones de los selectores.

Sintaxis 	Descripción
A + B 		Selectores adyacentes. Permite aplicar un estilo al elemento que se encuentre a continuación (B) de un elemento específico (A).
A ~ B 		Selectores general de hermanos. Permite aplicar un estilo al elemento (B) que sea hermano del elemento (A).
A > B 		Selectores de hijos. Permite aplicar un estilo al primer elemento hijo (B) de un elemento específico (A).
A B 		Selectores descendientes. Permite aplicar un estilo a un elemento determinado (B) que se encuentre dentro de un elemento específico (A).	
				

Ejemplo de definición de estilos combinados.

					
/* selector general de hermanos */
h1 ~ h2 {
color: red;
}
 
/* selector de hermanos adyacentes */
h1 + h2 {
color: blue;
}
 
/* selector de descendientes*/
div h2 {
color: green;
}
 
/*selector de hijos*/
div > p {
color: orange;
font-weight: bold;
}						
					
				

Ejemplo de utilización de los estilos anteriores:

					
<h1>Título 1</h1>
<h2>Subtítulo 1 es azul</h2>
<p>El subtítulo 1 están definido inmediatamente después del título 1 y también es hermano.</p>
<hr/>
<h1>Título 2</h1>
<p>Aquí tenemos un párrafo cualquiera.</p>
<h2>Subtítulo 2 es rojo</h2>
<p>El subtítulo 2 es hermano del título 2 pero no es consecutivo.</p>
<hr/>
<h1>Título 3</h1>
<div>
	<h2>Subtítulo 3 es verde</h2>
	<p>El subtítulo 3 NO es hermano del título 3 anterior. Y este párrafo es naranja.</p>
	<p> Este párrafo también es hijo de la etiqueta <div> y es naranja.</p>
	<span><h2>Subtítulo 3.1 es verde</h2></span>
	<span><p>El subtítulo 3.1 también es descendiente.</p></span>
	<span><p>Este párrafo no es hijo de la etiqueta <div> y no se ve naranja.</p></span>
</div>
<h2>Subtítulo 4 es rojo</h2>
<p>El subtítulo 4 es hermano del título 3 pero no es consecutivo.</p>
					
				

Ejemplo: Visualización de estilos anteriores.

Combinación selectores

Fijaros en los siguientes puntos:

  • El primer subtítulo h2 es hermano adyacente de h1 (inmediatamente después del título h1) y, por tanto, se ve de color azul en lugar de rojo. En cambio, el subtítulo 2 se ve rojo porque no está definido inmediatamente después del título h1.
  • Los subtítulos h2 descendientes de h1 aparecen de color verde, tal como se ve en el subtítulo 3 y 3.1.
  • Los párrafos que sean hijos directos del elemento div se ven de color naranja.

Pseudoclases

Las pseudoclases se añaden al selector de manera que se pueda aplicar un formato determinado al elemento seleccionado.

La manera de definir estilos utilizando pseudoclases es:
selector:pseudoclase{ propietat: valor; ... }

En la siguiente tabla se especifican las pseudoclases para los enlaces y de acción de usuario.

Pseudoclase 	Descripción
:link 		Permite definir el estilo de los enlaces cuando todavía no se han visitado.
:visited 	Permite definir el estilo de los enlaces visitados.
:active 	Permite definir el estilo de los elementos cuando se activan (cuando se pulsa el ratón encima suyo).
:hover 		Permite definir el estilo de los elementos cuando se pasa el ratón por encima suyo.
:focus 		Permite definir el estilo de los elementos cuando reciben el foco.
				
Nota: El orden de lectura de las pseudoclases para el enlace es muy importante, se puede usar una regla nemotécnica: LVHA (link-visited-hover-active); es conveniente recordar y aplicar este orden para evitar sobrescribir indebidamente. Podemos usar una frase como “Llegamos vivos hasta amanecer” o “Luego vuelvo hasta allí" para acordarnos de este orden. La pseudoclase :focus se suele colocar justo antes de :hover.

Ejemplo de estilos para los enlaces

					
/* Los enlaces (visitados y no visitados) son de color azul con el fondo gris y sin subrayar. */
a:link,
a:visited {
color: blue;
background-color: gray;
text-decoration: none;
}
 
/* Cuando se pasa por encima tendrán el fondo azul y texto blanco */
a:hover {
color: white;
background-color: blue;
}
 
/* Cuando se hace clic antes de soltar se harán más grandes */
a:active {
font-size: larger;
color: white;
background-color: blue;
}
 
/* Cuando se sitúa en un control de formulario <input> tendrá
un borde rojo punteada, y un relleno de 2px */
input:focus {
border: red 2px dotted;
padding: 2px;
}						
					
				

Ejemplo: Utilización de estilos para los enlaces

					
<p><a href="http://fsf.org">Enlace</a></p>
 
<p><a href="http://gnu.org">Enlace por el cual pasamos por encima</a></p>
 
<p>Campo de texto no activo: <input type="text" name="input" /></p>
 
<p>Campo de texto activo: <input type="text" name="input" /></p>						
					
				

Ejemplo: Visualización de estilos para los enlaces.

Pseudoclases

Existen otras pseudoclases que aplican los estilos haciendo referencia a la estructura del DOM

El DOM (Document Object Model) representa el documento creado a partir de las etiquetas HTML y los estilos CSS que el navegador mostrará por pantalla.

Pseudoclases estructurales

Pseudoclase 		Descripción
:root 			Representa un elemento que se encuentra en la raíz del documento.
:nth-child (num) 	Selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre.
:nth-last-child (num) 	Idéntico al anterior, pero el número indicado se empieza a contar desde el último hijo.
:nth-of-type (num) 	Selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hijo de este tipo.
:nth-last-of-type (num) Idéntico al anterior, pero el número indicado se empieza a contar desde el último hijo.
:first-child 		Selecciona un elemento que sea el primer hijo de otro elemento.
:last-child 		Selecciona el elemento indicado, pero con la condición de que sean el último hijo de su elemento padre.
:first-of-type 		Hace referencia al primer elemento de este tipo en el elemento padre.
:last-of-type 		Hace referencia al último elemento de este tipo en el elemento padre.
:only-of-type 		Hace referencia a aquel elemento que es el único hijo de su padre.
:empty 			Selecciona a el elemento indicado pero con la condición de que no tenga ningún hijo y tampoco puede tener ningún contenido de texto.
:lang			De idioma. Permite aplicar estilos en función del lenguaje especificado.
:not			De negación. Selecciona todos los elementos que no cumplen con la condición de un selector.
				

Ejemplo de estilos haciendo referencia a la estructura DOM

					
/*Selecciona los elementos li descendientes de las listas de tipo especial  */
ul.especial li {
display: inline;
padding: 5px;
}
 
/* Selecciona el primer hijo de la lista*/
ul.especial li:first-child {
color: blue;
}
 
/*Selecciona los elementos impares de la lista */
ul.especial li:nth-child(odd) {
background-color: grey;
}
 
/*Selecciona los elementos impares de la lista */
ul.especial li:nth-child(even) {
background-color: pink;
}
 
/*Selecciona el cuarto hijo de la lista*/
ul.especial li:nth-of-type(4) {
color: white;
}
 
/*Selecciona los párrafos que no tienen hermanos párrafos*/
p:only-of-type {
background-color: grey;
color: #ffa0ff;
font-weight: bold;
font-size: 25px;
}
 
/*Los párrafos en inglés aparecen en itálic */
p:lang(en){
font-style:italic;
}
 
:root {
font-family:arial;
}						
					
				

Ejemplo de utilización de estilos que hacen referencia a la estructura DOM

					
<div>
	<p>Menú especial:</p>
	<ul class="especial">
		<li> Elemento 1</li>
		<li> Elemento 2</li>
		<li> Elemento 3</li>
		<li> Elemento 4</li>
	</ul>
	<div>
		<p>Un párrafo</p>
		<p lang="en">This paragraph is in english.</p>
	</div>
</div>						
					
				

Ejemplo: Visualización de estilos que hacen referencia a la estructura DOM.

Pseudoclases DOM

Podéis consultar las pseudoclases que define CSS en developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

Pseudoelementos

A diferencia de las pseudoclases, los pseudoelementos no describen el estado de un elemento, sino que se añaden a un selector para definir estilos en una parte concreta del documento HTML.

Nota: Los pseudoelementos suelen ir precedidos por "::", pero por compatibilidad con versiones anteriores también pueden ir precedidos por ":".

La forma de definir estilos utilizando pseudoelementos es: selector :: pseudoElemento {  propiedad: valor;  ...  }

Pueden consultar los pseudoelementos que define CSS en developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos. En la siguiente tabla podemos ver la descripción de algunos de ellos.

Sintaxis 	Descripción
::after 	Permite introducir contenido al final del elemento. Hay que añadir la propiedad content con el valor deseado.
::before 	Permite introducir contenido al inicio del elemento. Hay que añadir la propiedad content con el valor deseado.
::first-letter 	Permite definir el estilo de la primera letra del elemento.
::first-line 	Permite definir el estilo de la primera línea del elemento.
::selection 	Permite definir el estilo de lo que el usuario ha seleccionado con el ratón.					
				

A continuación podéis ver un par de ejemplos.

Ejemplo de estilos CSS utilizando pseudoelementos

					
div::first-line { color: red; }
h1::before { content: "Título "; }
p::after { content: "."; }
p::first-letter { text-transform: uppercase; }						
					
				

Ejemplo de utilización de estilos utilizando pseudoelementos

					
<h1>1</h1>
<div>
<p>este es el primer párrafo largo y es rojo</p>
<p>este es el segundo párrafo y no es rojo.</p>
</div>						
					
				

Ejemplo: Visualización de estilos usando pseudoelementos.

Pseudoelementos

Unidades de medida CSS

Algunas propiedades CSS indican el tamaño de la letra, la anchura, los márgenes, etc. CSS clasifica las unidades de medida en dos tipos: absolutas y relativas.

En la siguiente tabla se pueden visualizar las unidades de medida absolutas.

Unidad 		Descripción
cm 		Centímetros
mm 		Milímetros
in 		Pulgadas, inches. Equivale a 2,54 cm
pt 		Puntos. Medida que equivale a 1/72 de una pulgada
pc 		Picas. Medida que equivale a 12 pt					
				

En la siguiente tabla se pueden visualizar las unidades de medida relativas.

Unidad 		Descripción
em 		Medida relativa al tamaño del tipo de letra de su contenedor.
rem 		Root em. Medida relativa al tamaño del tipo de letra general. Tiene como referencia la unidad que utiliza el elemento raíz (root), y no el elemento contenedor.
px 		Píxeles. Medida relativa a la resolución de la pantalla.
ex 		Medida relativa a la altura de la letra x. Cambia si se cambia la fuente que utilizamos.
ch 		Medida relativa a la altura del carácter numérico "0". Cambia si se cambia la fuente que utilizamos.
% 		Porcentaje.					
				

También se dispone de unidades relativas al viewport, es decir, a la amplitud de la ventana del navegador. En la siguiente tabla se ven estas unidades.

Unidad 		Descripción
vw 		Viewport width. 1 vw equivale a (1/100) de la anchura de la ventana, es decir, al 1%. Para reflejar un valor del 15% deberíamos poner 15 vw.
vh 		Viewport height. 1 vw equivale a (1/100) de la altura de la ventana, es decir, al 1%. Para reflejar un valor del 15% deberíamos poner 15 vh.
vmin 		Funcionamiento similar a los anteriores, pero hay una evaluación previa de qué eje x o y (anchura, altura), es menor, y selecciona como referente el eje que lo sea.
vmax 		Idéntico al anterior, pero tomando como referente el eje que sea mayor de los dos.					
				

A continuación podemos ver algunos ejemplos:

Estilos con diferentes tipos de unidades de medida.

					
.mida1 {font-size: 16pt; }
.mida2 {font-size: 16px; }
.mida3 {font-size: 1.5em; }
.mida4 {font-size: 1.5rem; }
.mida5 {font-size: 1.5vw;}						
					
				

Utilización de estilos con diferentes unidades de medida

					
<P class = "mida1"> Tamaño del texto en puntos (absoluta) </p>
<P class = "mida2"> Tamaño del texto en píxeles (relativo a la resolución) </p>
<P class = "mida3"> Tamaño del texto en em (relativo al contenedor) </p>
<P class = "mida4"> Párrafo medida en rem (relativo al elemento root) </p>
<P class = "mida5"> Tamaño del texto en vw (relativa al viewport) </p>
<hr />
<div class = "mida3">
<P class = "mida1"> Tamaño del texto en puntos (absoluta) </p>
<P class = "mida2"> Tamaño del texto en píxeles (relativo a la resolución) </p>
<P class = "mida3"> Tamaño del texto en em (relativo al contenedor) </p>
<P class = "mida4"> Tamaño del texto en rem (relativo al elemento root) </p>
<P class = "mida5"> Tamaño del texto en vw (relativa al viewport) </p>
</div>						
					
				

Ejemplo: Visualización de diferentes unidades de medida.

Unidades de medida

Aunque a menudo se utiliza la unidad de medida píxel, una buena opción es "rem", ya que especifica las medidas relativas al elemento root, a diferencia de "em", el tamaño del cual puede costar de controlar porque puede variar en función de donde se encuentre.

También puede comprobar que, si modificamos el tamaño de la ventana del navegador, el texto expresado en vw se redimensiona.

Propiedades CSS

Hay múltiples atributos o propiedades que se pueden definir con CSS. Para conocer el amplio abanico que ofrece CSS se pueden consultar las siguientes webs:

Dado que el estándar CSS3 está en continua evolución, no todos los navegadores han adoptado algunas de las propiedades, o si lo han hecho, muchas veces necesitan un prefijo. Estos prefijos se utilizarán cuando así sea necesario y se pueden ver en la siguiente tabla.

Prefijo 	Navegador
-moz- 		Prefijo para el navegador Firefox.
-ms- 		Prefijo para el navegador Internet Explorer.
-webkit- 	Prefijo para los navegadores Chrome y Safari.
-o- 		Prefijo para el navegador Opera. 					
				

Sin embargo, cabe mencionar que no todos los navegadores se comportan de la misma manera ante la misma hoja de estilo, y esto se debe a que algunos no cumplen los estándares establecidos. Para ello se puede recurrir a páginas como caniuse.com para ver si determinadas características ya han sido implementadas, y por qué navegadores.

Nota: Shorthand properties. Las propiedades abreviadas permiten establecer los valores de varias propiedades CSS simultáneamente. Estas propiedades pueden hacer referencia a los márgenes, los bordes, los rellenos y también al fondo del documento web.

En la siguiente tabla se puede consultar una recopilación de algunas de las propiedades referentes a los contenidos de la página web.

 		Propiedades
Fuente 		color, font-size, font-family, font-weigth, font-style
Párrafos 	line-height, text-decoration, text-align, text-indent, text-transform, text-shadow, text-overflow, text-wrap, list-style
Fondos 		background-color, background, background-image, background-origin, background-repeat, background-position, background-attachment
Tablas 		border-spacing, border-collapse, caption-side, empty-cells
				

Estilos con CSS

					
/ * Gradiente de 180 grados que va de azul a blanco * /
.gradient1 {
background: linear-gradiente (180deg, blue, white);
background: -webkit-linear-gradient(blue, white);
background: -o-linear-gradient(blue, white);
background: linear-gradient(blue, white);
}
 
/ * Gradiente de 90 grados que va de granate a naranja a naranja más claro, la cantidad de cada color se especifica en porcentaje junto al color. * /
.gradient2 {
background: linear-gradiente (90deg, #660000 10%, #F80 30%, #ffc 60%);
background: -webkit-linear-gradient(left, #660000 10%, #f80 30%, #ffc 60%);
background: -o-linear-gradient(left, #660000 10%, #f80 30%, #ffc 60%);
background: linear-gradient(to right, #660000 10%, #f80 30%, #ffc 60%);
}
 
/ * Gradiente radial circular que va de negro a blanco * /
.gradient3 {
background: radial-gradiente (circle, black, white);
}
 
/ * Gradiente elíptico que va de negro a blanco * /
.gradient4 {
background: radial-gradiente (elipse, black, white);
}
/ * Los párrafos aparecen indentados y tienen una sombra de un píxel, separada 2px y gris * /
p {
text-indent: 50px;
text-shadow: 1px 2px #ccc;
padding: 50px;
}
 
/ * Los títulos tienen un relleno de 5px * /
h1 {
padding: 5px;
}						
					
				

Ejemplo: Utilización de gradientes con estilos CSS

					
<h1 class = "gradient2"> Título con un gradiente lineal vertical. </h1>
<h1 class = "gradient1"> Título con un gradiente lineal horizontal. </h1>
<P class = "gradient3"> Este párrafo tiene un gradiente radial circular </p>
<P class = "gradient4"> Este párrafo tiene un gradiente radial elíptico </p>
<P> Otro párrafo </p>						
					
				

Ejemplo: Visualización de gradientes.

Gradientes

Además, hay que tener en cuenta que a pesar de que los navegadores presentan algunas configuraciones similares, tales como el tipo de letra serif de color negro, por ejemplo. Difieren bastante en los valores de márgenes verticales de los encabezamientos (margin-top y margin-bottom), la tabulación izquierda de los elementos de una lista (margin-left o padding-left) o bien el interlineado (line-height).

El modelo de caja

Los navegadores, de manera automática, crean y colocan cada elemento HTML en una estructura que tiene formato de caja. Así, por defecto, la caja de los elementos HTML de tipo block ocupa toda la anchura de la ventana, y la de los elementos a nivel sólo toman la anchura necesaria.

En principio, la caja de cada elemento no es visible, ya que no muestra ningún color de fondo ni borde. Sin embargo, se puede modificar con CSS para cambiar sus dimensiones, los colores, el borde y la posición.

Nota: Elemento "<div>". Este elemento crea una caja que por defecto ocupa toda la anchura del navegador. Se utiliza para definir el estilo de una sección de una página web. Nota: Elemento "<span>". Este elemento crea una caja que por defecto sólo ocupa la anchura necesaria. Se utiliza para definir el estilo de una porción de contenido de una sección de una página web.

Se pueden modificar las propiedades de la caja de cualquier elemento HTML, pero generalmente se utiliza el elemento <div> para organizar y dar estructura al diseño de las páginas web.

Dimensiones de la caja

Las partes que componen una caja en su orden de visualización desde el punto de vista del usuario son:

  • Contenido, content: se refiere al contenido del elemento; por ejemplo, el texto, una imagen, etc.
  • Relleno, padding: espacio libre opcional existente entre el contenido y el borde.
  • Borde, border: línea que rodea el contenido y el relleno.
  • Imagen de fondo, background image: imagen que se muestra por detrás del contenido y el relleno.
  • Color de fondo, background color: color que se muestra detrás del contenido y el relleno.
  • Margen, margin: separación opcional existente entre la caja y el resto de cajas adyacentes.
Nota: El relleno y el margen que define el modelo de caja son transparentes, por lo tanto, se visualiza la imagen o el color de fondo que se haya definido. Nota: Imagen y color de fondo del modelo de caja
Si en una caja se definen el color y la imagen de fondo, la imagen tiene más prioridad y se visualiza. Pero si la imagen no cubre totalmente la caja del elemento también se visualiza el color de fondo.

Así pues, cada caja tiene un área de contenido, y opcionalmente la rodean unas áreas de relleno, borde y margen.

Modelo de caja

Propiedades de la caja

En la siguiente tabla tenemos recogidas algunas de las propiedades de la caja.

Propiedad 		Propiedades
Margen de la caja 	margin-left, margin-right, margin-top, margin-bottom, margin
Fondos 			background-color, background-image
Anchura del borde 	border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Color del borde 	border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Estilo del borde 	border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Relleno de la caja 	padding-left, padding-right, padding-top, padding-bottom, padding					
				

La propiedad box-sizing se utiliza para modificar la altura y la anchura de la caja de los elementos HTML, ya que por defecto se calcula sin tener en cuenta el relleno y la anchura del borde.

Así pues, la propiedad box-sizing puede tomar por valor content-box, el cual es el valor por defecto de las cajas, y no se tiene en cuenta el tamaño del relleno y del borde para calcular el tamaño de la caja. O bien el valor border-box, donde sí se tiene en cuenta el tamaño del relleno y del borde para calcular el tamaño de la caja.

Ejemplo de estilos CSS para la caja

					
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
 
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
 
.div3 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
 
.div4 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;						
					
				

Ejemplo de utilización de los estilos anteriores

					
<h2>Cajas sin box-sizing</h2>
<div class="div1">
<p>Esta caja es más pequeña</p>
<p>(anchura 300px y altura 100px).</p>
</div>
<br>
<div class="div2">
<p>Esta caja es más grande</p>
<p>(anchura 300px y altura 100px).</p>
</div>
 
<h2>Cajas con box-sizing</h2>
<div class="div3">
<p>Las dos cajas tienen el mismo tamaño</p>
<p>(anchura 300px y altura 100px).</p>
</div>
<br>
<div class="div4">Fantástico!!</div>						
					
				

Ejemplo: Visualización de cajas sin y con box-sizing

box-sizing

Posicionamiento

Los navegadores crean y posicionan de manera automática todas las cajas de los elementos que forman cada página HTML siguiendo el flujo normal de la misma. Sin embargo, CSS permite modificar la posición donde se muestra la caja, para así poder conseguir un diseño determinado.

Para indicar los diferentes tipos de posicionamiento de la caja se utiliza la propiedad CSS position, y los valores que puede tomar son static, relative, absolute o fixed.

Los diferentes tipos de posicionamiento de las cajas son:

1. Posicionamiento estático o normal

El posicionamiento de las cajas es estático si no se indica lo contrario. En este modelo sólo se tiene en cuenta si el elemento es en bloque o en línea, las propiedades width y height y su contenido.

Nota: En el modelo de caja, la distancia entre dos cajas se controla mediante los márgenes laterales.

Ejemplo: Visualización de la posición normal

Posición normal

Así pues, por defecto los elementos en bloque se muestran uno bajo del otro, y los elementos en línea se muestran uno detrás del otro. Y si un elemento se encuentra dentro de otro, el elemento padre se llama elemento contenedor y determina tanto la posición como el tamaño de las cajas de su interior.

2. Posicionamiento relativo

Modelo que consiste en posicionar una caja con su posicionamiento normal y luego desplazarla.

El desplazamiento de la caja se controla con las propiedades top, bottom, right y left. Así pues, el valor de estas propiedades se utiliza para mover las cajas de manera descendente, ascendente, hacia la izquierda y hacia la derecha, respectivamente. Si se utilizan valores negativos su efecto será el inverso. Fijaos, pues, que este comportamiento es poco intuitivo y puede causar errores si no se está acostumbrado.

Ejemplo de estilos con diferentes tipos de posicionamiento

					
div {
position: relative;
width: 250px;
height: 180px;
border: 1px solid black;
margin: 2px;
box-sizing: border-box;
padding: 2px;
background-color: rgba(255, 0, 0, 0.2);
}
 
.caixaInline {
height: 20px;
display: inline;
}
 
.caixaBlock {
width: 142px;
height: 20px;
margin-top: 8px;
}
 
.caixaRel {
position: relative;
top: 10px;
left: 5px;
width: 50px;
height: 20px;
display: inline;
}
 
.caixaAbs {
position: absolute;
top: 70px;
left: 100px;
width: 50px;
height: 20px;
display: inline;
}
 
.caixaFixa {
position: fixed;
top: 180px;
left: 100px;
width: 50px;
height: 20px;
display: inline;
}
 
.caixaFlotantDreta{
float: right;
width: 50px;
height: 20px;
}
 
.caixaFlotantEsquerra{
float: left;
width: 50px;
height: 20px;
}
 
body {
font-family: arial;
font-size: 0.8rem;
}
					
				

Ejemplo de la utilización de los estilos de posicionamiento anteriores para comprobar la posición relativa respecto de la posición normal.

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaInline">Caja1</div>
	<div class="caixaInline">Caja2</div>
	<div class="caixaInline">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: las cajas están en posición estática, excepto la caja2, que está en posición relativa.</p>
	<div class="caixaInline">caja1</div>
	<div class="caixaRel">caja2</div>
	<div class="caixaInline">caja3</div>
	<div class="caixaBlock">caja4</div>
</div>						
					
				

Ejemplo: Visualización de la posición relativa respecto a la posición normal

Posición normalPosición relativa

El desplazamiento relativo de una caja no afecta el resto de cajas adyacentes, las cuales se muestran en la misma posición.

3. Posicionamiento absoluto

En este modelo, la posición de la caja se establece de manera absoluta respecto de su elemento contenedor. El elemento contenedor de referencia será el que esté posicionado de cualquier manera distinta de position: static.

Si no hay ningún elemento que pueda hacer de referencia, entonces lo será la ventana del navegador, que no debe confundirse con el elemento <body>.

La nueva posición de la caja se indica mediante las propiedades top, right, bottom y left, de tal manera que:

  • El valor de la propiedad top indica el desplazamiento desde el borde superior de la caja hasta el borde superior del elemento contenedor de referencia.
  • El valor de la propiedad right indica el desplazamiento desde el borde derecho de la caja hasta el borde derecho del elemento contenedor de referencia.
  •  El valor de la propiedad bottom indica el desplazamiento desde el borde inferior de la caja hasta el borde inferior del elemento contenedor de referencia.
  • El valor de la propiedad left indica el desplazamiento desde el borde izquierdo de la caja hasta el borde izquierdo del elemento contenedor de referencia.

Las cajas posicionadas de manera absoluta salen del flujo normal de la página, lo que provoca que el resto de elementos se muevan.

Ejemplo: Utilización de los estilos de posicionamiento anteriores para comprobar la posición absoluta respecto de la posición normal

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaInline">Caja1</div>
	<div class="caixaInline">Caja2</div>
	<div class="caixaInline">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: las cajas están en posición estática, excepto la caja2, que está en posición absoluta.</p>
	<div class="caixaInline">caja1</div>
	<div class="caixaAbs">caja2</div>
	<div class="caixaInline">caja3</div>
	<div class="caixaBlock">caja4</div>
</div>					
					
				

Ejemplo: Visualización de la posición absoluta respecto a la posición normal

Posición normalPosición absoluta

La caja dos está posicionada de forma absoluta, hecho que provoca que el resto de elementos de la página modifiquen su posición y ocupen su lugar.

4. Posicionamiento fijo

En este modelo de posicionamiento, la caja se convierte en un elemento inamovible, por lo que su posición en la pantalla siempre es la misma independientemente de los otros elementos y de si el usuario sube o baja la ventana del navegador. Es un caso particular de posicionamiento absoluto.

Ejemplo: Utilización de los estilos de posicionamiento anteriores para comprobar la posición fija respecto a la posición normal

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaInline">Caja1</div>
	<div class="caixaInline">Caja2</div>
	<div class="caixaInline">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: las cajas están en posición estática, excepto la caja2, que esta en posición fija.</p>
	<div class="caixaInline">caja1</div>
	<div class="caixaFixa">caja2</div>
	<div class="caixaInline">caja3</div>
	<div class="caixaBlock">caja4</div>
</div>						
					
				

Ejemplo: Visualización de la posición fija respecto a la posición normal

Posición normalPosición fija

5. Posicionamiento flotante

En este modelo se desplaza la caja todo lo posible a la derecha o a la izquierda de la línea en la que se encuentra, y entonces esta caja deja de formar parte del flujo normal de la página, por lo que el resto de cajas ocupan su lugar.

La propiedad CSS que permite posicionar una caja de forma flotante llama float, y puede tomar por valores left, right, none y inherit.

Ejemplo: Utilización de los estilos de posicionamiento anteriores para comprobar la posición flotante respecto a la posición normal

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaBlock">Caja1</div>
	<div class="caixaBlock">Caja2</div>
	<div class="caixaBlock">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: las cajas están en posición estática, excepto la caja1, que está en posicionamiento flotante a la derecha.</p>
	<div class="caixaFlotantDreta">caja1</div>
	<div class="caixaBlock">caja2</div>
	<div class="caixaBlock">caja3</div>
</div>						
					
				

Ejemplo: Visualización de la posición flotante respecto a la posición normal

Posición normalPosición flotante a la derecha

Ejemplo: Utilización de los estilos de posicionamiento anteriores para comprobar la posición flotante respecto a la posición normal

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaBlock">Caja1</div>
	<div class="caixaBlock">Caja2</div>
	<div class="caixaBlock">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: las cajas están en posición estática, excepto la caja2, que esta en posició flotante al la izquierda.</p>
	<div class="caixaBlock">caja1</div>
	<div class="caixaFlotantEsquerra">caja2</div>
	<div class="caixaBlock">caja3</div>
</div>						
					
				

Ejemplo: Visualización de la posición flotante respecto a la posición normal

Posición normalPosición flotante a la izquierda

Ejemplo: Utilización de los estilos de posicionamiento anteriores para comprobar la posición flotante respecto a la posición normal

					
<div>
	<p>Caja contenedora: las cajas están en posición estática.</p>
	<div class="caixaBlock">Caja1</div>
	<div class="caixaBlock">Caja2</div>
	<div class="caixaBlock">Caja3</div>
	<div class="caixaBlock">Caja4</div>
</div>
<div>
	<p>Caja contenedora: Todas las cajas están en posición flotante a la izquierda.</p>
	<div class="caixaFlotantEsquerra">caja1</div>
	<div class="caixaFlotantEsquerra">caja2</div>
	<div class="caixaFlotantEsquerra">caja3</div>
</div>						
					
				

Ejemplo: Visualización de la posición flotante respecto a la posición normal

Posición normalPosición flotante a la izquierda

Se pueden utilizar todos los tipos de posicionamiento, ya que en función de lo que queramos conseguir nos interesará posicionar la caja de un elemento utilizando un tipo u otro. Sin embargo, el más utilizado es el flotante.

Además, la propiedad CSS clear permite especificar si un elemento puede estar al lado de los elementos flotantes que le preceden o debe moverse hacia abajo por debajo de ellos. Esta propiedad se puede aplicar tanto a los elementos flotantes como a los no flotantes.

Ejemplo: Utilización de la propiedad clear

					
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Propiedad clear</title>
		<style>
			p {
				float: left;
				max-width:150px;
				min-height: 50px;
				background-color: lightblue;
				margin-left: 5px;
				padding: 20px 2px 2px 20px;
			}
			 
			p.clear {
				clear: both;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p>Texto del primer párrafo</p>
		<p>Texto del segundo párrafo</p>
		<p class="clear">Texto del párrafo que se quiere apartar</p>
	 </body>
</html>						
					
				

Ejemplo: Visualización de la propiedad clear

Propiedad clear

Visualización en el navegador

Cuando el navegador visualiza una página web crea una caja para cada elemento HTML, y esta se puede modificar con CSS. Por tanto, los factores que tiene en cuenta a la hora de generar cada caja son:

  • El tamaño de la caja, si es que se ha establecido a través de las propiedades width y height.
  • El tipo de elemento HTML, es decir, block o inline.
  • El posicionamiento de la caja.
  • Las relaciones entre elementos (donde se encuentra cada elemento, elementos descendientes, etc).
  • Otro tipo de información, como por ejemplo el tamaño de las imágenes y de la ventana del navegador.

Además, CSS define propiedades para controlar la visualización de las cajas. Estas propiedades son display, visibility, overflow y z-index.

En la siguiente tabla aparecen los valores que pueden tener estas propiedades.

Propiedad 	Valores
display 	inline, block, none, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, flex, inherit
visibility 	visible, hidden, collapse, inherit
overflow 	visible, hidden, scroll, auto, inherit
z-index 	auto, numero, inherit					
				

Las propiedades display y visibility permiten ocultar cualquier elemento de la página. La propiedad display permite ocultar un elemento para que desaparezca de la página y así los demás elementos puedan ocupar su lugar. En cambio, visibility permite hacer invisible un elemento; el navegador crearía la caja, pero no la mostraría.

De hecho, la propiedad display ofrece muchas más posibilidades que ocultar o mostrar un elemento, y en realidad modifica la forma en que se visualiza un elemento. Así pues, los valores más utilizados de esta propiedad son:

  • inline: muestra el elemento como si fuera en línea, independientemente de si lo es o no.
  • block: muestra el elemento como si fuera en bloque, independientemente de si lo es o no.
  • none: oculta el elemento y hace que desaparezca de la página.

Ejemplo: Visualización del código de las propiedades "display" y "visibility"

					
<div>
	<p>Caja2. display:none</p>
	<p>Caja7. visibility:hidden</p>
	<div class="caixaFlotantEsquerra"> Caja1 </div>
	<div class="caixaFlotantEsquerra" style="display:none"> Caja2 </div>
	<div class="caixaFlotantEsquerra"> Caja3 </div>
	<div class="caixaFlotantEsquerra"> Caja4 </div>
	<div class="caixaFlotantEsquerra"> Caja4 </div>
	<div class="caixaFlotantEsquerra"> Caja6 </div>
	<div class="caixaFlotantEsquerra" style="visibility:hidden"> Caja7 </div>
	<div class="caixaFlotantEsquerra"> Caja8 </div>
</div> 						
					
				

En general, cuando se oculta un elemento no se quiere que siga ocupando lugar. Así, para conseguir este efecto es mejor usar display que visibility.

Ejemplo: Visualización de las propiedades "display" y "visibility"

Display and Visibility

La propiedad overflow se utiliza para controlar la manera como se visualizan los contenidos que sobresalen de la caja que tiene definida.

Ejemplo: Visualización del código HTML para la propiedad "overflow"

					
<div>
<p>Caja1. overflow:hidden</p>
<p>Caja5. overflow:visible</p>
<p>Caja6. overflow:scroll</p>
<div class="caixaFlotantEsquerra" style="overflow:hidden"> Caja1 caja1 caja1</div>
<div class="caixaFlotantEsquerra"> Caja2 </div>
<div class="caixaFlotantEsquerra"> Caja3 </div>
<div class="caixaFlotantEsquerra"> Caja4 </div>
<div class="caixaFlotantEsquerra" style="overflow:visible"> Caja5 caja5 caja5 </div>
<div class="caixaFlotantEsquerra" style="height: 50px; overflow:scroll"> Caja6 caja6 caja6</div>
<div class="caixaFlotantEsquerra"> Caja7 </div>
<div class="caixaFlotantEsquerra"> Caja8 </div>
</div>						
					
				

Visualización de la propiedad "overflow"

overflow

La propiedad z-index controla la posición tridimensional de un elemento que se establece sobre el tercer eje Z, y así permite establecer qué caja se ve por encima de otra.

Ejemplo de estilos para la propiedad "z-index".

					
div.z-index{
    position: relative;
    width:100%;
    height: 180px;
    border: none;
    font-size: .8rem;
}
.caja1, .caja2, .caja3{
    position: absolute;
    width: 205px;
    height: 100px;
    color: white;
}
.caja1{
    top:15px;
    left: 55px;
    background-color: #1ccece;
    z-index:1;
}
.caja2{
    top:40px;
    left: 90px;
    background-color: blue;
    z-index: 2;
}
.caja3{
    top: 60px;
    left:10px;
    background-color: green;
    z-index: 0;
}						
					
				

Ejemplo: Visualización del código HTML para la propiedad "z-index"

					
<div class="z-index">
	<div class="caja1">caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1</div>
	<div class="caja2">caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2</div>
	<div class="caja3">caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3</div>
</div>						
					
				

Visualización de la propiedad "z-index"

z-index