Con el propósito de crear proyectos web con tamaños precisos en todos los
elementos, aplicaremos las unidades de medidas CSS en el diseño de páginas web, según las reglas de este lenguaje. Algunas páginas de internet carecen de organización
entre sus elementos, debido al desconocimiento del procedimiento exacto para la
definición de tamaños. Por este motivo, crearemos códigos CSS para especificar el
píxel, la pulgada, el porcentaje y las medidas relativas al tamaño del texto.
Mediante las unidades de medidas, definimos
con exactitud tamaños de letras, números o imágenes, a fin de lograr una vista
armoniosa de la página web, para el
usuario. La especificación precisa de elementos en un documento CSS permite
cumplir, en su totalidad, los propósitos del proyecto.
En el siguiente código HTML,
observamos un pequeño texto marcado por diferentes etiquetas, para realizar las
pruebas con unidades de medidas:
061-01_0603_ilu01. Código HTML y CSS, sin
unidades de medidas
En el documento CSS, la etiqueta p esta en blanco, sin declaración de
estilos, motivo por el cual, en la vista del usuario, todo se muestra del mismo
tamaño, excepto el título. Por defecto,
h1 es más grande, debido al diseño predeterminado del navegadorweb Google Chrome.
Para definir la unidad de medida
absoluta:
- Píxel: se
agrega con su acrónimo correspondiente, px,
a la etiqueta p. Es necesario agregar,
al final, el punto y coma; de lo contrario, se muestra de forma incorrecta. A la
vista del usuario, es posible notar la diferencia con el resto del texto.
061-01_0603_ilu02. Código con
especificación de píxel
- Pulgada: se
agrega con su abreviatura correspondiente,
in, a la etiqueta div. A la vista
del usuario, es posible notar la diferencia de tamaño con el texto dentro de la
etiqueta p. En ambas declaraciones,
se utiliza font-size para cambiar el
atributo “tamaño de letra”.
061-01_0603_ilu03. Código con
especificación de pulgada
Para definir la unidad de medida
relativa:
- Porcentaje:
se agrega con el símbolo correspondiente a la etiqueta requerida, en el
siguiente ejemplo es div, y el
porcentaje toma como referencia base el ancho de la pantalla donde se muestra.
Si estuviese con porcentaje la etiqueta mark,
el navegador web toma como
referencia al bloque donde está contenido.
061-01_0603_ilu04. Código con
especificación de porcentaje
- Relativa
al tamaño de la letra: se agrega con el acrónimo em; en el ejemplo, dos veces el tamaño original de la fuente.
Las unidades de medidas de CSS se
combinan entre sí hasta lograr el tamaño deseado, con el interés de ser más
precisos en los diseños.
061-01_0603_ilu05. Código con
especificación relativa al tamaño
Keynotes
- Mediante las unidades de medidas, definimos
con exactitud tamaños de letras, números o imágenes, a fin de lograr una vista
armoniosa de la página web, para el
usuario.
- Para definir la unidad de medida absoluta: Píxel:
se agrega con su acrónimo correspondiente, px.
- Para definir la unidad de medida relativa: Porcentaje:
se agrega con el símbolo correspondiente a la etiqueta requerida.
- Las unidades de medidas de CSS se combinan
entre sí hasta lograr el tamaño deseado, con el interés de ser más precisos en
los diseños.
RetoCrear un documento CSS con la aplicación de dos
unidades de medidas aprendidas, según
las reglas de este lenguaje. Es necesario utilizar las etiquetas section y div.
¡Comparte el resultado de tu reto es tu vPages, e invita a tus compañeros a
evaluarla!
Tiempo disponible: entre 15 y 30 minutos.
CierreMediante la aplicación de unidades
de medidas CSS, creamos páginas para internet con organización entre sus
elementos, y tamaños precisos en cada uno. La organización, al momento de crear
las declaraciones, permitirá una ejecución correcta de la página web.
