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.
MisiónA 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.
CierreLa 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.
