Las Unidades de Medida en Estilos CSS
Como hemos visto, algunas propiedades toman valores numéricos, pero para que funcionen correctamente tenemos que indicar en que unidades estamos midiendo. No es lo mismo un centímetro que un Kilómetro, verdad? Pues si solo indicamos como valor 1, el navegador no sabrá muy bien si es una u otra unidad y los efectos pueden ser desastrosos.
Para remediar esto haremos uso de tres tipos de unidades. Las unidades absolutas, las relativas y los tantos por ciento.
Unidades Absolutas
Son medidas de un tamaño fijo, como por ejemplo, un centímetro. Si indicamos medidas de este tipo, es posible que una imagen (por ejemplo) de 10 cm sea demasiado grandota para un monitor grandote, y relativamente pequeña para uno menor. Es por eso que se prefieran las medidas Relativas. Las absolutas solo deben usarse (bajo mi punto de vista, claro) cuando sepamos con certeza las dimensiones del medio de salida (monitor, impresora, etc) lo cual no siempre en posible.
Las distintas unidades Absolutas que podemos usar son las siguientes:
- in: son pulgadas (en inglés "inches") y equivalen a 2.5 centímetros aproximadamente.
- cm: centímetros y equivalen exactamente a .. pues a un centímetro.
- mm: Acertaste, es el milímetro.
- pt: el Punto equivale a 0.014 pulgadas, si la memoria no me falla (que suele ocurrir con frecuencia).
- pc: Las picas, equivalen a 12 puntos.
Si queréis ponerle decimales usad el punto, no la coma.
Unidades Relativas
Adoptan el valor relativo al tamaño del documento, del monitor, impresora, etc, según el caso y son las siguientes:
- px: la más utilizada es el Pixel que es , para entendernos, la cantidad de puntos en los que se divide el monitor. Si tu monitor tiene una definición de 800x600, se refiere a pixeles.
- ex: se refiere a la altura de la "x" del tipo de letra usada, creo.
- em: también llamada "cuadratín" es relativa al tamaño de letra definido por font-size.
Como veis, las dos últimas no las conozco mucho, je je, pero nadie es perfecto y menos un servidor, je je. Pero podéis hacer experimentos con ellas para ver como se comportan. Yo suelo usar los pixeles casi siempre.
ATENCIÓN!!: Nunca separéis la cifra (el número) de las unidades (px, pt, ex, em) pues entonces algunos navegadores no las leeran. Es decir, no vale poner 15_px (suponiendo que "_" es un espacio). Solo vale 15px (todo junto) Recordadlo bien, vale?
Los tantos por ciento % o porcentajes
Se refiere al tanto por ciento de la medida característica de la zona donde esté el elemento al que se aplica. Por ejemplo, si se especifica un tamaño de celda de 25%, ésta será una cuarta parte de la tabla. Si se indica una anchura del 25% a una tabla, esta sera el 25% del ancho del sitio donde éste, normalmente del documento, pero si la tabla está dentro de otra, será el 25% del tamaño de la tabla que la contiene. Claro? un poco lioso, no? je je.
Algunas propiedades admiten valores negativos para todas estas unidades, aunque los efectos no serán claros siempre, de modo que conviene comprobarlos antes de nada.
Algunos ejemplos de propiedades, sus valores y unidades podrían ser:
.gigante { font-size: 10cm} (texto de 10cm de altura)
p { word-spacing: 5mm} (espacio entre palabras de 5mm)
etc.. Otros ejemplos aplicados son:
Tamaño de letra de 12px
Tamaño de letra de 12pt
Tamaño de letra de 0.3in
Tamaño de letra de 10mm
Puedes comprobar que las medidas absolutas no varian de tamaño aunque se varie el tamaño del texto desde tu navegador. Esto hay que tenerlo en cuenta, pues un tamaño absoluto pequeño puede imposibilitar la lectura a algunos visitantes, pues les quitas la opción de agrandar el texto con el Navegador (si es que conocen esa posibilidad, claro.). Así que prueba bien las medidas escogidas, si es posible en distintos ordenadores, con distintos navegadores, etc.
Lección I:
