Las propiedades CSS (tamaño y ubicación)

Estas son algunas de las propiedades que nos permiten controlar el diseño de una página web; el tamaño de los distintos objetos, su ubicación y la forma en que los vemos.

Las propiedades width y height establecen el ancho y el alto de los elementos ya que debemos recordar que TODO lo que vemos en una página es un rectángulo.

sintaxis en HTML
elemento {width: valor;}
por ejemplo: div {width: 80%;}
elemento {height: valor;}
por ejemplo: div {height: 50px;}

sintaxis en JAVASCRIPT
elemento.style.width='valor';
por ejemplo: this.style.width='80%';
elemento.style.height='valor';
por ejemplo: this.style.height='50px';

Por defecto, su valor es auto pero podemos indicar cualquier otro, expresándolo en cm, mm, in, pt, pc, px, em, ex o como un porcentaje.

El valor nunca puede ser negativo y en muchos casos (por ejemplo, las imágenes), indicando uno de ellos, el otro adopta el valor proporcional correspondiente y no es necesario expresarlo.

Asociadas con estas, hay otras propiedades que nos permiten establecer los anchos y altos máximos y mínimos de los elementos:

sintaxis en HTML
elemento {max-width: valor;}
minWidth {min-width: valor;}
elemento {max-height: valor;}
elemento {min-height: valor;}
por ejemplo: div {max-width: 500px; min-width: 10px; max-height:: 200px; min-height: 10px;}

sintaxis en JAVASCRIPT
elemento.style.maxWidth='valor';
elemento.style.minWidth='valor';
elemento.style.maxHeight='valor';
elemento.style.minHeight='valor';
por ejemplo: this.style.maxWidth='500px';

Al igual que las anteriores, los valores admitidos son cm, mm, in, pt, pc, px, em, ex o un porcentaje.

La propiedad display nos permite definir la forma en que se mostrará un elemento.

sintaxis en HTML
elemento {display: valor;}
por ejemplo: div {display: nine;}

sintaxis en JAVASCRIPT
elemento.style.display='valor';
por ejemplo: this.style.display='none';

Los valores posibles son:

block el objeto se muestra como un bloque (un elemento adyacente se muestra debajo)
none el objeto permanece oculto
inline el objeto tiene las dimensiones de su contenido (un elemento adyacente se muestra al lado)
inline-block es similar al anterior pero el contenido se muestra como bloque; los elementos adyacentes se muestran en la misma línea

Hay otros valores posibles: inline-table, table, table-cell, table-row-group, table-column-group, table-column, table-row, table-header-group, table-footer-group, table-caption se utilizan para definir la forma en que se muestran las columnas y las filas de una tabla y list-item, marker, compact, run-in casi no tiene uso práctico

Todos los elementos de una página son de tipo block o de tipo inline. Por ejemplo, DIV es un objeto de tipo block y SPAN es de tipo inline. La diferencia entre ellos es que, los llamados bloques comienzan en una nueva línea y, generalmente, contienen a otros elementos. Por el contrario, los elementos inline sólo contienen datos.

El valor por defecto depende del tipo de objeto. Las siguientes son definidas como bloques: ADDRESS, BLOCKQUOTE, BODY, CENTER, COL, COLGROUP, DD, DIR, DIV, DL, DT, FIELDSET, FORM, FRAME, Hx, HR, IFRAME, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PRE, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, UL.

Lorem ipsum dolor sit amet consectetuer adipiscing elit sed [ ESTE ES EL ELEMENTO A MODIFICAR ] diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad visibility nos permite mostrar u ocultar un elemento.

En principio, parece ser lo mismo que la anterior pero es fundamentalmente distinta ya que, a diferencia de display=none, el elemento no "desaparece" de la página sino que conserva el espacio.

sintaxis en HTML
elemento {visibility: valor;}
por ejemplo: div {visibility: hidden;}

sintaxis en JAVASCRIPT
elemento.style.visibility='valor';
por ejemplo: this.style.visibility='hidden';

Tiene dos valores posibles: visible o hidden (para las tablas hay una posibilidad más, el valor collapse que es similar a hidden)

Lorem ipsum dolor sit amet consectetuer adipiscing elit sed [ ESTE ES EL ELEMENTO A MODIFICAR ] diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad clip se utiliza para "recortar" elementos o, lo que es lo mismo, establecer que parte de este será visible.

sintaxis en HTML
elemento {clip: valor;}
por ejemplo: img {clip: rect(0px,50px,50px,0px);}

sintaxis en JAVASCRIPT
elemento.style.clip='valor';
por ejemplo: this.style.clip='rect(0px,50px,50px,0px)';

El valor por defecto es auto y para modificarlo, debemos utilizar este tipo de formato:

rect(top right bottom left)

donde top, right, bottom y left indican el tamaño. Por ejemplo, top especifica que todo lo que está por encima de ese valor es recortado; lo mismo ocurre con los otros parámetros.

Su uso es bastante complejo y limitado porque la propiedad position tiene que ser establecida como absolute.

overflow se utiliza para determinar qué ocurrirá si un elemento es más grande que el objeto que lo contiene.

sintaxis en HTML
elemento {overflow: valor;}
por ejemplo: div {overflow: hidden;}

sintaxis en JAVASCRIPT
elemento.style.overflow='valor';
por ejemplo: this.style.overflow='hidden';

Los posibles valores son:

visible si el elemento es grande, no se corta sino que aparecen barras de desplazamientos
scroll se fuerza a que se muestren barras de desplazamiento aunque el contenido sea menor que el contenedor
hidden todo lo que excede es cortado
auto deja que el navegador decida si las barras de desplazamiento son o no son necesarias

El valor por defecto es visible excepto para BODY y TEXTAREA que tienen el valor auto.

Hay dos propiedades que complementan la anterior.

overflow-x establece la forma en que se manejará el contenido si excede el ancho del objeto y overflow-y hará lo mismo si excede el alto del objeto.

sintaxis en HTML
elemento {overflow-x: valor;}
por ejemplo: div {overflow-x: hidden;}
elemento {overflow-y: valor;}
por ejemplo: div {overflow-y: hidden;}

sintaxis en JAVASCRIPT
elemento.style.overflowX='valor';
por ejemplo: this.style.overflowX='hidden';
elemento.style.overflowY='valor';
por ejemplo: this.style.overflowY='hidden';

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

vertical-align establece el alineamiento vertical de un elemento.

sintaxis en HTML
elemento {vertical-align: valor;}
por ejemplo: div {vertical-align:bottom;}

sintaxis en JAVASCRIPT
elemento.style.verticalAlign='valor';
por ejemplo: this.style.verticalAlign='bottom';

Por defecto, es baseline y puede tomar estos otros valores: top, middle, bottom, text-top, text-bottom. Además, en los textos, pueden usarse los valores sub y super.

position establece la posición de un elemento

sintaxis en HTML
elemento {position: valor;}
por ejemplo: div {position:relative;}

sintaxis en JAVASCRIPT
elemento.style.position='valor';
por ejemplo: this.style.position='relative';

Los posibles valores son:

static es el valor por defecto
relative permite ubicar el elemento de manera relativa a su posición normal
absolute permite ubicar el elemento de absoluta indicando la posición exacta dentro de la página
fixed se posiciona de manera relativa a la ventana del navegador

La propiedad position se combina con otras cuatro que son las que definen los valores de esa posición cuando se utiliza relative o absolute.

top, right, bottom y left establecen las coordenadas de un elemento.

sintaxis en HTML
elemento {top: valor;}
elemento {right: valor;}
elemento {bottom: valor;}
elemento {left: valor;}
por ejemplo: div {top:10px; left:0px; bottom:20px; right:0px;}

sintaxis en JAVASCRIPT
elemento.style.top='valor';
elemento.style.right='valor';
elemento.style.bottom='valor';
elemento.style.left='valor';
por ejemplo: this.style.left='10px';

Los valores pueden ser expresados en cm, mm, in, pt, pc, px, em o ex.

En Internet Explorer hay una serie de propiedades alternativas que controlan el tamaño y la posición:

elemento.style.posWidth='valor';
elemento.style.posHeight='valor';
elemento.style.posTop='valor';
elemento.style.posRight='valor';
elemento.style.posBottom='valor';
elemento.style.posLeft='valor';

La propiedad z-index establece el orden del elemento, es decir, si irá arriba o abajo de otro.

sintaxis en HTML
elemento {z-index: valor;}
por ejemplo: div {z-index:-1;}

sintaxis en JAVASCRIPT
elemento.style.zIndex='valor';
por ejemplo: this.style.zIndex='-1';

Sólo funciona si la propiedad position ha sido establecida como absloute o relative y los valores pueden ser positivos o negativos. Ver Ubicando elementos con CSS [1 2 3]

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

Las propiedades CSS (textos 1ª parte)

Las propiedades CSS (textos 2ª parte)

Las propiedades CSS (textos 3ª parte)