Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 175

Visitas el mes pasado: 184

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Posicionamiento (VI)

7.6 Visualización

css

Ademas de las propiedades que controlan la posición de la caja, en CSS tenemos otras propiedades que controlan su forma de visualizarse:


Propiedad display

la propiedad display modifica la forma en la que se visualiza un elemento. puede tener distintos valores. Veamos su definición:

display Visualización de un elemento
Valores 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 | inherit
Descripción Permite controlar la forma de visualizar un elemento e incluso ocultarlo
Valor inicial inline
se aplica a Todos los elementos

Aunque esta propiedad tiene muchos valores, los más utilizados son inline, block, none; los cuales explicamos a continaución:

El resto de valores no son muy habituales, y suelen utilizarse para crer páginas complejas o intervienen en páginas dinamicas, si queres ver la descripción de todos los valores puedes consultar la siguiente página : Display-MDC de Mozilla.org.

El valor block nos permite convertir cualquier elemento en un elemento de bloque, ya sea éste inicialmente un elemento en linea o de bloque. Por ejemplo permite tratar los enlaces como elementos de bloque.

El valor inline nos permite convertir cualquier elemento en un elemento en linea, ya sea éste inicialmente un elemento en línea o de bloque. Por ejemplo permite colocar los elementos de una lista (elementos de bloque inicialmente) seguidos en una misma línea.

El valor none suele utilizarse en páginas dinámicas con javascript, en las que al pulsar un botón aparece o desaparece un elemento.

Algunos de los otros valores los veremos más adelante, por ejemplo para solucionar el problema de hacer una página con columnas iguales.


Propiedad visibility

Esta propiedad permite que un elemento sea visible o no, pero al contrario de la propiedad display: none, al hacerse invisible, los demás elementos no se mueven y respetan el hueco dejado por el elemento.

La definición de esta propiedad es la siguiente:

visibility Visibilidad de un elemento
Valores visible | hidden | collapse | inherit
Descripción Permite hacer visibles e invisibles a los elementos
Valor inicial visible
se aplica a Todos los elementos

Los valores de esta propiedad tienen el siguiente significado;

Al igual que la propiedad display: none su uso más habitual es junto con javascript para crear páginas dinámicas en las que según actúe el usuario se puede mostrar u ocultar el elemento.


Propiedad overflow

Cuando definimos una caja, podemos darle una anchura (width) y una altura (height). Si no definimos la altura, ésta se adapta al contenido de la caja, alargándose ésta en vertical para que su conenido esté dentro. Si la altura está definida, pueden ocurrir dos cosas, que el contenido quepa dentro de la caja o que ocupe más espacio del que tiene la caja, en este caso normalmente el contenido se muestra fuera de la caja (por debajo de ésta), pero este comportamiento puede modificarse mediante la propiedad overflow

Veamos ahora la definición y los valores de la propiedad overflow

overflow Parte sobrante de un elemento
Valores visible | hidden | scroll | auto | inherit
Descripción Permite controlar los contenidos sobrantes de un elemento
Valor inicial visible
se aplica a Elementos de bloque y celdas de tablas

Los valores de esta propiedad tienen el siguiente significado;

En la siguiente página de ejemplo se muestra el comportamiento de los distintos valores de la propiedad overflow.

Propiedad overflow



Propiedad z-index

Hasta ahora hemos controlado la posición de la caja en horizontal y en vertical en la página, pero además podemos controlar su posición tridimensional, es decir, qué caja se muestra delante o detrás de otras cuando se producen solapamientos. Esto lo controlamos mediante la propiedad z-index. Utilizando esta propiedad podemos hacer páginas con varios niveles o capas.

La definición de esta propiedad es la siguiente:

z-index Orden tridimensional
Valores auto | <numero> | inherit
Descripción Establece el nivel tridimensional en el que se muestra el elemento
Valor inicial auto
se aplica a Elementos que han sido posicionados explícitamente

El valor <numero> debe ser un número entero. Aunque no es frecuente utilizarlos, se permiten los números negativos, Las cajas con valor numérico más alto se muestran siempre por encima de las de valor númerico más bajo.

El valor auto es el valor por defecto, y equivale a z-index: 0. Caso de que haya solapamiento con varias cajas con valor auto o sin que esté aplicada la propiedad z-index se mostrará por encima la que en el código esté escrita en último lugar.

Por otra parte la propiedad z-index sólo actúa en cajas que previamente estén posicionadas mediante la propiedad position.

A continuación vemos una página con ejemplos de la propiedad z-index

Propiedad z-index



Relacion entre posición absoluta y relativa, y posicionamiento flotante.

Si aplicamos a un mismo elemento las propiedades position y float el comportamiento es distinto según el posicionamiento (position) sea absoluto o relativo.

Con posicionamiento absoluto la propiedad float es ignorada, y el elemento se posiciona según las propiedades de desplazamiento (left, top, right, bottom).

Con posicionamiento relativo, al elemento se le aplica primero la propiedad float, y después desde esa posición se aplican las propiedades de desplazamiento.




En el siguiente tema veremos como aplicar el posicionamiento para construir el diseño de páginas, así como los modelos de páginas más habituales.

Diseño de páginas.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com