Capitulo 3 Unidades de medida y colores

Capitulo 3 Unidades de medida y colores

En este capitulo se enseña las propiedades de medidas y colores

Unidades de Media

Unidades absolutas

La ventaja de estas unidades es que su valor es directamente el que esta, sin hacer cálculos intermedios, su desventaja es que no son fáciles de adaptar a diferentes medios

• 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.

A continuación se muestran ejemplos de utilización de unidades absolutas:

/* El cuerpo de la página debe mostrar un margen de media pulgada */
body { margin: 0.5in; }

/* Los elementos <h1> deben mostrar un interlineado de 2 centímetros */
h1 { line-height: 2cm; }

/* Las palabras de todos los párrafos deben estar separadas 4 milímetros entre si */
p { word-spacing: 4mm; }

/* Los enlaces se deben mostrar con un tamaño de letra de 12 puntos */
a { font-size: 12pt }

/* Los elementos <span> deben tener un tamaño de letra de 1 pica */
span { font-size: 1pc }

Unidades relativas

Estas no están completamente definidas, ya que su valor esta unido a otro, estas son mas fáciles de adaptar a diferentes medios

• 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.

Colores

En css los colores se pueden identificar principalmente de 5 formas:

-Palabras Clave

-Colores del sistema

Los colores del sistema son similares a los colores indicados mediante su nombre, pero en este caso hacen referencia al color que muestran algunos elementos del sistema operativo del usuario.

-RGB Hexadecimal

Se debe transformar el numero decimal usando una operacion matematica, una calculadora se encuentra facilmente en internet

p { color: rgb(71, 98, 176); }   =     p { color: #4762B0; }

-RGB Numérico

Es la fusión entre la cantidad de cada color Rojo(R) - Verde(G) - Azul(B)

  p { color: rgb(71, 98, 176); }

-RGB Porcentual
Para transformar decimal a un valor RGB porcentual se debe untilizar una regla de 3, considerando que  0 es igual a 0% y 255 es igual a 100%.

p { color: rgb(27%, 38%, 69%); }