CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 25
Visitas el mes pasado: 106
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Ademas de las propiedades que controlan la posición de la caja, en CSS tenemos otras propiedades que controlan su forma de visualizarse:
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 |
Descripción | Permite controlar la forma de visualizar un elemento e incluso ocultarlo |
Valor inicial | inline | block |
se aplica a | Todos los elementos |
El valor inicial depende de si el elemento es de tipo inline o de tipo block
Aunque esta propiedad tiene muchos valores, los más utilizados son inline,
block, none
; los cuales explicamos a continaución:
inline
: visualiza cualquier elemento como un elemento en línea,
tanto si el elemento es en línea como de bloque.block
: visualiza cualquier elemento como un elemento de bloque,
tanto si el elemento es en línea como de bloque.none
: oculta un elemento y hace que desaparezca de la página.
El resto de elementos ocupan el espacio en el que se debería visualizar el elemento. Actúan como
si éste no existieraEl 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.
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;
visible
: Es el valor por defecto, el elemento se visualiza en la pantalla.hidden
: El elemento se hace invisible, en su lugar queda el hueco que
debería ocupar, el cual es respetado por el resto de elementos.collapse
: En principio sólo se puede utilizar en las filas,
y columnas de una tabla. Su efecto es similar al de la
propiedad display: none
. Al ocultar la fila o columna otros contenidos pueden
ocupar su lugar. Aplicado a otro elemento su efecto es el mismo que el valor hidden
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.
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;
visible
: el contenido se muestra sobresaliendo la zona reservada para
visualizar el elemento. Este es el comportamiento por defecto (cuando hemos aplicado la
propiedad position
)hidden
: el contenido sobrante se oculta y sólo se visualiza
la parte del contenido que cabe dentro de la caja del elemento.scroll
: solamente se visualiza el contenido que cabe dentro de la caja
del elemento, pero también se muestran barras de desplazamiento que permiten visualizar el resto del
contenido.auto
: el comportamiento depende del navegador, aunque normalmente es
el mismo que para el valor scroll
. Lo normal es que en auto
sólo se muestren las
barras de desplazamiento cuando el contenido se desborda de la caja. Si el contenido
cabe dentro la barra de desplazamiento no se muestra, a diferencia del valor
scroll
, que muestra siempre la barra desplazamiento .En la siguiente página de ejemplo se muestra el comportamiento de los distintos valores de
la propiedad overflow
.
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
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.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com