Unidades de medida
|
Unidades de medida |
|
CSS utiliza una serie de unidades para poder indicar cosas como tamaños, colores, ect. Vamos a ver en detalle cuales son y cómo se usan:
Las unidades de tamaño se dividen en dos grupos. El primero de ellos (y el más útil) es el de las unidades relativas, en el que el tamaño se mide en función de los elementos del medio en el que se representa la propiedad cuyo tamaño queremos especificar. Hay tres posibles unidades relativas:
em designa el ancho de la letra m.
ex hace lo propio con la letra x.
px indica que la medida se hace en pixels.
De estas unidades la menos recomendable es el pixel, ya que puede dar lugar a errores al visualizar la página en monitores de distinta resolución. Un ejemplo del uso de estas unidades sería:
Esta regla daría un tamaño de letra para el elemento <P> de 12 pixels, y un margen equivalente al grosor de la letra m.
Por otro lado tenemos las llamadas unidades absolutas, en las que se define el tamaño final, y no en relacción al medio en que se presenta. estas unidades son las siguientes:
cm Centímetros.
mm Milímetros.
in Pulgadas (inches), algunos países aún no han descubierto las ventajas del Sistema Métrico Decimal. Una pulgada equivale a 2'54 cm.
pt Puntos. Antigua unidad tipográfica (del siglo XVIII), de cuando los libros se imprimían con tipos móviles de plomo. equivale a 0'351 mm.( Por si tienes algo de curiosidad histórica, te diré que este es el punto anglo-americano. en el resto de Europa el punto que se usaba, llamado punto Didot, medía 0'376 mm.).
pi Picas. Igual que la anterior, equivale a 12 puntos (unos 4'2 mm.).
Este tipo de unidades es menos recomendable, a menos que vallas a usarlo para impresión en papel u otro medio parecido.
Las unidades percentuales se usan en ua grán variedad de contextos, y sirven para especificar que la medida que estás indicando se refiere a un porcentaje de una medida anterior o de la medida por defecto:
Se pueden usar de dos modos, el modo absoluto y el modo aditivo. en el modo absoluto solo tiene que poner el porcentaje que quiereas seguido del signo "por ciento" ( % ) de este modo:
Con esta regla estás indicando que quieres que el tamaño de fuente en el elemento <B> sea de un 120% del tamaño original del texto.
El modo aditivo es semejante al anterior, pero añadiendo un signo "más" ( + ) o un signo "menos" ( - ) delante del número, para indicar si el porcentaje debe añadirse o sustraerse de la medida original. Por ejemplo:
La primera regla tiene el mismo efecto que la anterior, hace que el tamaño de fuente del elemento <B> sea un 20% mayor que el del resto del texto. La segunda hace lo contrario para el elemento <I>, en este el tamaño de fuente será un 20% más pequeño.
Cuando queremos definir un color en CSS tenemos varias posibilidades. la primera, la más práctica, la única que te recomiendo y la única que soportan los navegadores actuales es usar los viejos códigos RGB ( Colores aditivos) que usábamos en HTML. estos consisten en el signo "almohadilla" ( # ) seguido de seis dígitos hexadecimales que corresponden, respectivamente, los dos primeros a la componente roja del color, los dos siguientes a la verde, y los dos siguientes a la azul. Veamoslo con un ejemplo:
La notación hexadecimal es aquella en la que hay 16 dígitos (en lugar de los 10 de la notación decimal). estos dígitos son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C ,D, E, F. (No importa si usas mayúsculas o minúsculas)
Existe también una paleta RGB reducida, que solo usa un dígito hexadecimal para cada color, que se usaría de este modo:
También puedes usar el siguiente formato, muy semejante a los anteriores pero con dígitos decimales:
Aquí las tres componentes de color se colocan tras la palabra "rgb", dentro de paréntesis y separados por comas. Sus valores pueden ir desde 0 a 255.
Y, por último, puedes usar el mismo sistema anterior, pero indicando valores percentuales:
Donde los valores pueden ir desde 0'0% hasta 100'0%.
La buena noticia es que tienes nada menos que cuatro modos de definir el color entre los que escojer. La mala es que solo puedes usar el primero, o los navegadores no sabrán que hacer con ellos.
A veces será necesario indicar la URL de una imagen, un documento, o cualquier otro recurso. para ello contamos con la construcción url(dirección), que se usa del siguiente modo:
Esta regla hará que la imagen "fondo.gif" se use como fondo de la página, y que la imagen "fondo2.gif" se use como pondo en los párrafos. Como puedes ver, se pueden usar tanto direcciones relativas como direcciones absolutas. Las direcciones relativas se indican con respecto a donde esté ubicada la hoja de estilo, no con respecto a la página web.
