Juan Manuel 7 de abril de 2008 a las 18.16
   Imprimir artículo
elWebmaster.com

Repasando las medidas y tamaños en CSS


Repasando las medidas y tamaños en CSSLos estilos CSS nos dan varias opciones a la hora de ajustar el formato de presentación de los elementos de una página web, así se trate de texto, imágenes, etc. Hay varios tipos de etiquetas para especificar tamaños y medidas que nos serán de mucha utilidad.

Desde csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que refresquemos estos conceptos (y para que aquellos que están comenzando con CSS se pongan a tono).

Medidas y tamaños en CSS

  • Absolutas
    • in (pulgadas)
    • cm (centímetros)
    • mm (milímetros)
    • pt (puntos)
    • pc (picas)
    • px (pixeles)

Las unidades absolutas permiten un control exacto de la apariencia de la página, siempre y cuando se visualice en el entorno para la cual fue diseñada.

A modo de ejemplo, al utilizar px se visualizará diferente en cada resolución de pantalla y la plataforma del usuario que está desplegando ese contenido. Peor si utilizamos pt, ya que depende del tamaño del punto de la resolución de la pantalla.

  • Relativas
    • em
    • ex

Las unidades relativas dependen de la altura del elemento en el que se usa, aunque en la práctica, es el tamaño de texto definido en las preferencias del navegador.

Con esto, quien está definiendo estilos mantiene un control relativo ya que depende directamente del tamaño de fuente por defecto del usuario (1em), y a partir de eso, cuanto más grande (1.2em por ej) o menor (0.7em) se visualizará esa letra.

Además, permiten su uso en cualquier propiedad de medida (margin, padding) lo que finalmente muestra un diseño proporcionado a la configuración del usuario (por ejemplo, proporcionado entre una pantalla widescreen de 17″ y un iPhone).

  • Porcentaje
    • %

No recomendado para tipografías, ya que su control no es fácilmente determinado por quien construye los estilos ya que necesita de un elemento de referencia (100%).

Sólo recomiendo su uso en cajas de layout, determinados por el ancho de la resolución del usuario.

Tabla de equivalencias:

Repasando las medidas y tamaños en CSS

Fuente: csslab


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Juanu dice:

    Buenisimo, sobre este nivel, lo domino, peero DEBO profundizar el tema.. aparte, es MUY interesante a mi forma de ver. Sirvió el repaso eh! :)

  2. Caton dice:

    El artículo es aceptable pero falta indicar que las unidades relativas dependen del navegador.
    No es el mismo tamaño inicial por defecto en Internet Explorer que en Firefox, Opera o Safari.
    Para evitar este problema se recomienda definir como tamaño por defecto 16 píxeles en el HTML y el BODY y luego utilizar exclusivamente las unidades relativas para que salga exactamente como se espera.
    Delnda Carthago!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder