Cap3. unidades de medida y colores

1. Programación Web.
de León Guerra Mariana Goretti.

2. Introducción.

CSS es tan flexible que permite indicar
las medidas y colores de muchas
formas diferentes.
El valor de una propiedad puede tomar
el valor de una medida o de un color.

3. Unidades de medida.
Definen:

La altura.
La anchura.
Márgenes de los elementos.
Establecen el tamaño de letra del texto.

4. Tipos de unidades de medida.



Relativas.
Absolutas.

5. Unidades 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.

6. em.


Relativa respecto del tamaño de letra
empleado.
La referencia es el tamaño de letra por
defecto del sistema del usuario
(ordenador, dispositivo móvil, etc.).
(no confundir con la etiqueta <em> de
HTML)

7. Ejemplo:
body { font-size: 0.9em; }

Si el tamaño por defecto es 12, el valor
0.9em sería igual a:

0.9 x 12 = 10.8

12 = 100%
10.8 = 90%

9. Que pasa si manejamos herencia…

11. ex.


Relativa respecto de la altura de la letra
x ("equis minúscula") del tipo de letra
que se esté utilizando.

13. px (píxel) .



Relativa respecto de la pantalla del
usuario .

15. Porcentaje:


Está formado por un valor numérico
seguido del símbolo % y siempre está
referenciado a otra medida.

17. Otra opción:
div#contenido { width: 600px; }
div.principal { width: 80%; }

<div id="contenido">
<div class="principal">
...
</div>
</div>

18. Ventajas:


Las unidades relativas permiten
mantener las proporciones del diseño
independientemente del tamaño de letra
por defecto del navegador del usuario.

19. Problemas:



“El texto cada vez es mas pequeño”.
“El texto es cada vez mas grande”.

20. “Cada vez mas pequeño”

21. “Cada vez mas grande”

22. Unidades absolutas.


Establecen de forma completa el valor
de una medida, por lo que su valor real
es directamente el valor indicado.

23. in, cm, mm, pt, pc.
in: "inches", pulgadas (1 in = 2.54 cm).
cm: centímetros.
mm: milímetros.
pt: puntos (1 pt = 1 in/72, es decir, unos
0.35 mm).
pc: picas (1 pc = 12 pt, es decir, unos
4.23 mm).

24. Ejemplos:

body { margin: 0.5in; }
h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }

25. Notas:
Todas las medidas se indican como un
valor numérico entero o decimal seguido
de una unidad de medida (sin espacios
en blanco entre ellos.)
Si el valor es 0, la unidad de medida es
opcional.

26. Notas:
Si el valor es distinto a 0 y no se indica
ninguna unidad, la medida se ignora
completamente, lo que suele ser una
fuente habitual de errores para los
diseñadores que empiezan con CSS.
 Algunas propiedades permiten indicar
medidas negativas.

27. Colores.
Se pueden indicar de las siguientes
formas:

 Palabras clave.
 RGB decimal.
 RGB porcentual.
 RGB hexadecimal.
 Colores del sistema.
 Colores web safe.

28. Palabras Clave.

30. RGB Decimal.


Es un modelo de tipo "aditivo", ya que
los colores se obtienen sumando sus
tres componentes R (rojo), G(verde) y B
(azul), que pueden tomar valores entre
0 y 255.

32. RGB Porcentual.

El funcionamiento y la sintaxis de este
método es el mismo que el del RGB
decimal. La única diferencia en este
caso es que el valor de las
componentes RGB puede tomar valores
entre 0% y 100%.

34. RGB Hexadecimal.
Pasos:
1. Se determina el color RGB decimal,
por ejemplo: R = 71, G = 98, B =176.
2. Cada valor se transforma a
hexadecimal, R = 47,G = 62, B = B0.
3. Se concatenan los valores en ese
mismo orden y se les añade el prefijo #.
El color es #4762B0 en formato RGB
hexadecimal.

36. Ventajas.
Se pueden comprimir los valores
cuando todas sus componentes son
iguales dos a dos: #AAA = #AAAAAA.
Todos los programas de diseño gráfico
convierten de forma automática los
valores RGB decimales a sus valores
RGB hexadecimales.

37. 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, por ejemplo
ActiveBorder.
Aunque es posible definir los colores en
CSS utilizando estos nombres, se trata
de un método que nunca se utiliza.

38. Colores Web Safe.
Hay 256 x 256 x 256 = 16.777.216 colores
RGB.
Sin embargo, en la década de los 90 los
monitores de los usuarios no eran capaces
de mostrar más de 256 colores diferentes.
Se eligieron 216 colores para formar la
paleta "web safe“, con la seguridad de que
se verán correctamente en cualquier
navegador de cualquier sistema operativo
de cualquier usuario.

39. Bibliografía.



Introducción a CSS.
Autor: Javier Eguíluz Pérez.

40. ¡Gracias!