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