Con la finalidad de modificar con precisión elementos de páginas web, identificaremos las características de las cajas CSS en la creación de un documento. Algunos creadores de proyectos para internet muestran textos desorganizados, debido al desconocimiento de los atributos para ponerlos en orden. Por este motivo, aprenderemos el uso y la utilidad de las propiedades padding, border y margin, según las reglas de CSS.

En algún momento tuvimos la necesidad de presentar trabajos de grado pulcros, con los márgenes exactos a cada hoja, y otras reglas para garantizar su aceptación por parte del tutor. Aunque podía resultar complicada la especificidad del trabajo, aquí el énfasis se pone sobre su organización y precisión, y así sucede en CSS.

En un documento CSS organizado es necesario definir las siguientes propiedades:

• Padding: en español significa relleno, e identifica un espacio transparente entre el contenido o área y el borde. Aunque es utilizado en menor frecuencia con respecto a las demás propiedades, tiene gran utilidad.
• Border: en español quiere decir borde, y consiste en la división entre el relleno y el margen. Si es necesario, lo declaramos visible al usuario.
• Margin: en español significa margen, y se trata de un espacio transparente entre el borde y otra caja.

061-01_0608_ilu01. Propiedades de cajas

Para aplicar características a una caja, existen dos formas posibles, las cuales dependen de las necesidades del proyecto:

• CSS2: incluye un procedimiento específico para definir las características del tamaño de una caja. El width, en español, es alto y el height es ancho; tales rasgos delimitan el contenido del área. Posteriormente, sin orden específico, se define el padding, el border y el margin. Aunque inicialmente el área mide 300 px, al sumar el relleno de cada lado, correspondiente a 10 px, más el borde de 1 px en cada lado, y el margen de 10 px, finalmente, la caja se muestra con un ancho de 342 px.

061-01_0608_ilu02. Características de caja, mediante CSS2

• CSS3: incluye border-sizing:content-box y border-sizing:border-box, para definir las características del tamaño de una caja.
• El atributo border-sizing:content-box es la especificación por defecto, con las mismas medidas de la caja anterior, al especificar la caja mantiene los 300 px de ancho sin incluir los márgenes y bordes; por lo tanto, al final se muestra con 342 px.
• El atributo border-sizing:border-box es la especificación cuando al total del ancho se le restan los márgenes y bordes; por lo tanto, con el ejemplo anterior, finalmente se muestra con los mismos 300 px declarados.

061-01_0608_ilu03. Características de caja, mediante CSS3

Existe un gran diferencia entre ambas formas. La primera descrita permite cajas con tamaños específicos; sin embargo, requiere de muchos cálculos para la unificación del tamaño. En tanto, la segunda forma es más rápida, por lo cual es importante delimitar el objetivo y, luego, aplicar el método necesario para cumplirlo, independientemente de la desventaja.

Keynotes

• Padding: en español significa relleno, e identifica un espacio transparente entre el contenido o área y el borde. Aunque es utilizado en menor frecuencia con respecto a las demás propiedades, tiene gran utilidad.
• Border: en español quiere decir borde, y consiste en la división entre el relleno y el margen. Si es necesario, lo declararmos visible al usuario.
• Margin: en español significa margen, y se trata de un espacio transparente entre el borde y otra caja.
• CSS2: incluye un procedimiento específico para definir las características del tamaño de una caja. El width, en español, es alto y el height es ancho; tales rasgos delimitan el contenido del área. Posteriormente, sin orden específico, se define el padding, el border y el margin.
• CSS3: incluye border-sizing:content-box y border-sizing:border-box, para definir las características del tamaño de una caja.

A fin de modificar, con precisión, elementos de las páginas web, realiza un resumen escrito con la identificación de las características de las cajas CSS, según las versiones números dos y tres.

Pasos a seguir:

• Ubica el estándar oficial de CSS2 y CSS3, y lee las especificaciones de cajas.
• Agrega los nuevos conocimientos a tu resumen.
• Ubica un especialista de la materia vPages y muéstrale tu resumen, a fin de anotar sus sugerencias.
• Explica tu resumen a cinco compañeros.

Sabrás que has tenido éxito cuando expliques correctamente los modelos de cajas a dos de tus compañeros sin leer el resumen creado.

Realiza las modificaciones necesarias luego de tu presentación, y comparte el resultado final del resumen en tu vProfile e invita a tus compañeros a comentar para crear un debate en tu publicación.

Tiempo disponible: 3 horas.

La identificación de las características de las cajas CSS, en la creación de un documento, permite mostrar textos organizados, gracias al dominio de los atributos para disponerlos adecuadamente y, por ende, modificaremos con precisión elementos de las páginas web. Con orden y claridad en los objetivos, obtendremos diseños vistosos y pulcros.