Con el propósito de especificar elementos en una
página web con estricto orden,
posicionaremos elementos en cajas CSS, según las reglas de este lenguaje. En ocasiones
el desconocimiento de las propiedades para la ubicación exacta de textos,
conlleva resultados lejos de los deseados. Por lo tanto, evaluaremos las
utilidades y los usos de las especificaciones top, bottom, left y right, en cajas de CSS.
El lenguaje CSS tienes especificaciones
de estilos de forma predeterminada para el modelo de cajas con el cual se
identifica. Sin embargo, en muchas oportunidades es necesario definir con
detalle la ubicación de elementos internos, para conseguir resultados acordes
con las necesidades del proyecto web. Debido
a ello, existe una serie de atributos para ser más precisos, tal como se
muestra en la imagen siguiente, donde el texto tiene diferentes posiciones.
061-01_0609_gra01. Posicionamiento de
textos
A nivel general, en el lenguaje
CSS existen cuatro propiedades de posicionamiento de cajas, ellas son:
- top: para definir la parte de arriba
- bottom: para definir la parte de abajo
- left: para definir la parte izquierda
- right: para definir la parte derecha
061-01_0609_ilu01. Valores de posiciones
Ahora bien, para posicionar
elementos en cajas, es necesario aplicarlas en:
- Padding: aquí, utilizamos padding-top
para el alto del relleno, y con padding-bottom
se define el relleno en la parte baja. Asimismo, padding-left corresponde al relleno en la izquierda, y padding-right el de la derecha.
061-01_0609_ilu02. Bloque de declaración
con padding
- Border: aquí, utilizamos border-top
para el alto del borde y seguidamente, se encuentra border-bottom, en español es la parte de abajo del borde. Luego, border-left corresponde al borde de la
izquierda, mientras que el de la derecha se denomina border-right. Además, estas especificaciones detalladas permiten
aplicar estilos de bordes diferentes a la caja, como por ejemplo línea sólida arriba
y abajo, y doble para los lados.
061-01_0609_ilu03. Bloque de declaración
con border
- Margin: aquí, utilizamos margin-top
para el alto del margen, y margin-bottom
para la parte de abajo. Asimismo, el lado izquierdo es con margin-left, y el derecho con margin-right.
061-01_0609_ilu04. Bloque de declaración
con margin
Este tema en CSS es realmente
extenso, pues de él depende la presentación del proyecto web. Constituye una de las formas de posicionar los elementos en
las cajas con más detalle. Al respecto, existen los posicionamientos relativos,
absolutos, fijos y estáticos, mediante los cuales es posible mostrar las cajas
en un espacio específico de la pantalla.
Keynotes
- A nivel general, en el lenguaje CSS existen
cuatro propiedades de posicionamiento de cajas, a saber: top: para definir la parte de arriba, bottom: para definir la parte de abajo, left: para definir la parte izquierda, right: para definir la parte izquierda.
- Utilizamos padding-top para el alto del relleno, y con padding-bottom se define el relleno en la parte baja. Asimismo, padding-left corresponde al relleno en
la izquierda, y padding-right al
relleno de la derecha.
- Utilizamos border-top para el alto del borde y seguidamente, se encuentra border-bottom, en español es la parte de
abajo del borde. Luego, border-left
corresponde al borde de la izquierda, mientras el de la derecha se denomina border-right.
- Utilizamos margin-top para el alto del margen, y margin-bottom para la parte de abajo. Asimismo, el lado izquierdo
es con margin-left, y el derecho con margin-right.
- Elos posicionamientos relativos, absolutos,
fijos y estáticos, mediante los cuales es posible mostrar las cajas en un espacio
específico de la pantalla.
MisiónCon la finalidad de especificar elementos en una
página web realiza seis declaraciones
diferentes para el posicionamiento de elementos en cajas CSS, según las reglas
de este lenguaje.
Pasos a seguir:
- Ubica el estándar oficial
de CSS y lee las especificaciones del posicionamiento de elementos en cajas.
- Crea un documento CSS.
- Realiza en él seis
declaraciones diferentes para el posicionamiento de elementos en cajas CSS
- Ubica un especialista de la
materia en vProfile y muéstrale tu código
a fin de anotar sus sugerencias.
Sabrás que has tenido éxito cuando tu documento se
muestre en el navegador web, de forma
correcta con las especificaciones realizadas.
Realiza las modificaciones necesarias luego de tu
presentación, y comparte el resultado final del código en tu vProfile. Pide a tus compañeros una
retroalimentación de tu presentación.
Tiempo disponible: 3 horas.
CierreA través del posicionamiento de elementos en cajas
CSS, obtenemos los resultados deseados, en cuanto a la ubicación de los
elementos, debido a la posibilidad de especificarlos con estricto orden. Mediante
la precisión y la disciplina, modificaremos cajas en CSS con criterio
profesional.
