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