Los
navegadores crean y posicionan de forma automática todas las cajas que forman
cada página HTML. No obstante, CSS permite al diseñador modificar la posición
en la que se muestra cada caja.
Utilizando
las propiedades que proporciona CSS para alterar la posición de las cajas es
posible realizar efectos muy avanzados y diseñar estructuras de páginas que de
otra forma no serían posibles.
El
estándar de CSS define cinco modelos diferentes para posicionar una caja:
- Posicionamiento normal o estático: se trata del
posicionamiento que utilizan los navegadores si no se indica lo contrario.
- Posicionamiento relativo: variante del
posicionamiento normal que consiste en posicionar una caja según el
posicionamiento normal y después desplazarla respecto de su posición
original.
- Posicionamiento absoluto: la posición de una caja se
establece de forma absoluta respecto de su elemento contenedor y el resto
de elementos de la página ignoran la nueva posición del elemento.
- Posicionamiento fijo: variante del posicionamiento
absoluto que convierte una caja en un elemento inamovible, de forma que su
posición en la pantalla siempre es la misma independientemente del resto
de elementos e independientemente de si el usuario sube o baja la página
en la ventana del navegador.
- Posicionamiento flotante: se trata del modelo más
especial de posicionamiento, ya que desplaza las cajas todo lo posible
hacia la izquierda o hacia la derecha de la línea en la que se encuentran.
El
posicionamiento de una caja se establece mediante la propiedad
position:
Propiedad
|
position
|
Valores
|
|
Se aplica a
|
Todos los elementos
|
Valor inicial
|
static
|
Descripción
|
Selecciona el posicionamiento con el que se mostrará el
elemento
|
static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedadestop,right,bottomyleftque se verán a continuación.relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedadestop,right,bottomyleft.absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedadestop,right,bottomyleft, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.
La
propiedad
position no permite controlar el posicionamiento flotante, que se
establece con otra propiedad llamada float y que se explica más adelante.
Además, la propiedad position sólo indica cómo se posiciona una
caja, pero no la desplaza.
Normalmente,
cuando se posiciona una caja también es necesario desplazarla respecto de su
posición original o respecto de otro origen de coordenadas. CSS define cuatro
propiedades llamadas
top, right, bottom y left para controlar el desplazamiento de
las cajas posicionadas:
Propiedades
|
top, right,
bottom, left
|
Valores
|
|
Se aplica a
|
Todos los elementos posicionados
|
Valor inicial
|
auto
|
Descripción
|
Indican el desplazamiento horizontal y vertical del
elemento respecto de su posición original
|
En
el caso del posicionamiento relativo, cada una de estas propiedades indica el
desplazamiento del elemento desde la posición original de su borde
superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las
propiedades indican el desplazamiento del elemento respecto del borde
superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.
En
cualquiera de los dos casos, si el desplazamiento se indica en forma de
porcentaje, se refiere al porcentaje sobre la anchura (propiedades
right y left) o altura (propiedades top y bottom) del elemento.
Clases CLASS
Las clases podremos agregarla a múltiples elementos en una página, las Clases se declaran en la sección de CSS con un punto ".", también podemos asignar más de una clase a un atributo class, por ejemplo si tenemos las reglas de clase .reglaid1 y .reglaid2, class="reglaid1" es correcto de la misma forma que class="reglaid1 reglaid2" separando cada clase con un espacio. Los navegadores web pasan los valores CSS a todos los elementos con la misma clase.
Clase aplicando al código CSS: Reglas CSS
Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos), recuerde que las reglas de clase se inician con un punto ".":
Las clases podremos agregarla a múltiples elementos en una página, las Clases se declaran en la sección de CSS con un punto ".", también podemos asignar más de una clase a un atributo class, por ejemplo si tenemos las reglas de clase .reglaid1 y .reglaid2, class="reglaid1" es correcto de la misma forma que class="reglaid1 reglaid2" separando cada clase con un espacio. Los navegadores web pasan los valores CSS a todos los elementos con la misma clase.
Clase aplicando al código CSS: Reglas CSS
Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos), recuerde que las reglas de clase se inician con un punto ".":
<style>
.reglaclass1
{propiedades CSS}
.reglaclass2
{propiedades CSS}
{propiedades CSS}
.reglaclass2
{propiedades CSS}
</style>
Aplicar las reglas de clase a etiquetas HTML
Para aplicar reglas de clase se usa el atributo class="nombreclase" (los atributos no deben incluir el punto), por ejemplo:
Para aplicar reglas de clase se usa el atributo class="nombreclase" (los atributos no deben incluir el punto), por ejemplo:
<body>
<div class="reglaclass1"> contenido 1 </div>
<div class="reglaclass2"> contenido 2 </div>
<p class="reglaclass1"> Texto 1 </p>
<span class="reglaclass1"> contenido 1 </span>
<div class="reglaclass2"> contenido 2 </div>
<p class="reglaclass1"> Texto 1 </p>
<span class="reglaclass1"> contenido 1 </span>
</body>
Clases e Identificadores
Como pueden observar es muy simple el uso de ID y Class, es posible usar ambos atributos en la misma etiqueta, algo bastante útil, ya que no tenemos que escribir todo el código en un único ID, sino que podemos asignar, por ejemplo: font-size a un ID, mientras que con class ponemos otras propiedades, por ejemplo el background-color, que compartamos con otras etiquetas.
Vamos a crear dos reglas ID (reglaid1 y reglaid2) a cada uno le asignamos dos tamaños de fuente diferente y creamos una Clase con un color que podemos asignar a varias etiquetas HTML
Reglas CSS:
Como pueden observar es muy simple el uso de ID y Class, es posible usar ambos atributos en la misma etiqueta, algo bastante útil, ya que no tenemos que escribir todo el código en un único ID, sino que podemos asignar, por ejemplo: font-size a un ID, mientras que con class ponemos otras propiedades, por ejemplo el background-color, que compartamos con otras etiquetas.
Vamos a crear dos reglas ID (reglaid1 y reglaid2) a cada uno le asignamos dos tamaños de fuente diferente y creamos una Clase con un color que podemos asignar a varias etiquetas HTML
Reglas CSS:
<style type='text/css'><!--
#reglaid1
{font-size:20px;}
#reglaid2
{font-size:12px;}
.reglaclass1
{color:#c00;}
{font-size:20px;}
#reglaid2
{font-size:12px;}
.reglaclass1
{color:#c00;}
--></style>
Ahora agregaremos los atributos ID a un DIV diferente reglaid1 y reglaid2, pero a ambos DIV les agregaremos el la misma clase, reglaclass1 lo que hará que cada div tenga un tamaño de fuente diferente, pero el mismo color de texto.
<body>
<div id="reglaid1" class="reglaclass1"> contenido 1 </div>
<div id="reglaid2" class="reglaclass1"> contenido 2 </div>
<div id="reglaid2" class="reglaclass1"> contenido 2 </div>
</body>
Inicialmente se puede asignar los estilos directamente a las etiquetas HTML, pero con el tiempo es imprescindible aprender el uso de ID y Class para que CSS llegue a todo su potencial, aunque ahí no termina el uso de las clases, ha muchas maneras de agrupar instrucciones CSS.
0 comentarios:
Publicar un comentario