Unidades de Medida
Las
medidas en CSS se emplean, entre otras, para definir la altura, anchura y
márgenes de los elementos y para establecer el tamaño de letra del texto. Todas
las medidas se indican como un valor numérico entero o decimal seguido de una
unidad de medida (sin ningún espacio en blanco entre el número y la unidad de
medida).
CSS
divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas
relativas definen su valor en relación con otra medida, por lo que para obtener
su valor real, se debe realizar alguna operación con el valor indicado. Las
unidades absolutas establecen de forma completa el valor de una medida, por lo
que su valor real es directamente el valor indicado.
Unidades absolutas
Una medida indicada mediante
unidades absolutas está completamente definida, ya que su valor no depende de
otro valor de referencia. A continuación se muestra la lista completa de
unidades absolutas definidas por CSS y su significado:
·
in,
pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
·
cm,
centímetros.
·
mm,
milímetros.
·
pt, puntos.
Un punto equivale a 1 pulgada/72,
es decir, unos 0.35 milímetros.
·
pc, picas.
Una pica equivale a 12 puntos,
es decir, unos 4.23 milímetros.
body { margin: 0.5in; }
h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }
Unidades relativas
La unidades relativas, a
diferencia de las absolutas, no están completamente definidas, ya que su valor
siempre está referenciado respecto a otro valor. A pesar de su aparente
dificultad, son las más utilizadas en el diseño web por la flexibilidad con la
que se adaptan a los diferentes medios.
A continuación se muestran las
tres unidades de medida relativas definidas por CSS y la referencia que toma
cada una para determinar su valor real:
·
em, (no
confundir con la etiqueta <em> de
HTML) relativa respecto del tamaño de letra del elemento.
·
ex,
relativa respecto de la altura de la letra x ("equis
minúscula") del tipo y tamaño de letra del elemento.
·
px, (píxel)
relativa respecto de la resolución de la pantalla del dispositivo en el que se
visualiza la página HTML.
body { font-size: 10px; }
h1 { font-size: 2.5em; }
La gran
ventaja de las unidades relativas es que siempre mantienen las proporciones del
diseño de la página. Establecer el margen de un elemento con el valor
1em equivale a indicar
que "el margen del
elemento debe ser del mismo tamaño que su letra y debe cambiar
proporcionalmente".
Porcentajes
El
porcentaje también es una unidad de medida relativa, aunque por su importancia
CSS la trata de forma separada a
em, ex y px. Un porcentaje está formado por un
valor numérico seguido del símbolo % y siempre está referenciado a
otra medida. Cada una de las propiedades de CSS que permiten indicar como valor
un porcentaje, define el valor al que hace referencia ese porcentaje.
Los
porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño
de letra de los elementos:
body { font-size: 1em; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
0 Comentarios