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.

Con 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.

A 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.