Curso de Estándares Web - Día #6 Distintas formas y unidades de medida para especificar valores en las sentencias de CSS. Tema básico, pero referencia futura para cualquier tarea que se requiera hacer en CSS.

1. CSS
Unidades y Valores
Harold Maduro

2. Valores y Unidades
Este es un tema básico y elemental que va a ser
la base para cualquier cosa que se quiera hacer
con CSS.
Existen “units” que afectan los colores,
distancias y tamaños de toda clase de
propiedades.

3. Números

4. Números
Existen dos tipos de números en CSS: enteros
(integers) y fracciones (reals).
Los números sirven como la base para otro
tipo de valor o unidad de medida (por ejemplo:
15px), pero en algunas circunstancias, se puede
utilizar el número sólo como valor de una
propiedad.

5. Números
Tanto los enteros como fracciones pueden ser
positivos o negativos.

6. Números

7. Números
h1 { margin: 100px; }

8. Números
h1 { margin: 100px; }
p { margin-top: -10px; }

9. Porcentajes
Los porcentajes se colocan con el símbolo de
porcentaje (%) después de un número.

10. Porcentajes
Los valores de porcentaje son relativos a otro
valor (el valor del elemento ancestro, o un
valor heredado).

11. Porcentajes

12. Porcentajes
h1 { width: 100%; }

13. Porcentajes
h1 { width: 100%; }
p { width: 50%; }

14. Color

15. Color
Se pueden especificar los colores ya sea con:
• Nombres
• RGB

16. Color por nombre
Existe un reducido número de colores que se
pueden especificar por su nombre. Estos son
llamados “named colors”.
Existen sólo 17 colores definidos en la
especificación de CSS 2.1:
aqua lime red
black maroon silver
blue navy teal
fuchsia olive white
gray orange yellow
green purple

17. Color por nombre

18. Color por nombre
color: red;

19. Color por nombre
color: red;
color: blue;

20. Color por nombre
Además de estos, los browsers modernos
reconocen unos 140 nombres de colores.
Estos 140 nombres están definidos en la
especificación de CSS 3.0

21. Color por RGB
Los colores que vemos en pantalla son creados
utilizando mezclas de luces rojas, verdes y
azules.

22. Color por RGB
Existen cuatro formas como podemos detallar el color especificando sus
valores RGB:
Functional RGB colors
* Numeric: usando el valor en enteros
* Percentage: usando el valor en porcentaje
Hexadecimal RGB colors
* Hexadecimal: usando el valor formado por 6 unidades
* Short Hex: usando el valor resumido, por 3 unidades

23. Functional RGB colors

24. Functional RGB colors
Se especifican los porcentajes de cada color:

25. Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);

26. Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);

27. Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:

28. Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:
color: rgb(255,0,0);

29. Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:
color: rgb(255,0,0);

30. Functional RGB colors
Para los valores porcentuales, se pueden utilizar valores
fraccionarios para especificar el tono del color:
color: rgb(20.5%,10.5%,0);

31. Functional RGB colors
Ojo: Para los valores numéricos, sólo acepta números enteros.

32. Hexadecimal RGB colors
Aquí utilizamos los mismos valores hexadecimales que
hemos utilizado en el pasado con HTML.
color: #ff0000;

33. Hexadecimal RGB colors
Funciona uniendo 3 números hexadecimales en el
rango de 00 hasta el FF para identificar el color.
La sintaxis sería: #RRGGBB, sin ningún tipo de
separación, espacio o coma entre ellos.

34. Hexadecimal RGB colors
Short Hex
Si el valor hexadecimal está compuesto por 3 pares de
números iguales, se puede utilizar la sintaxis reducida o
Short Hex:
color: #333333
color: #ffffff
color: #333
color: #fff
color: #bb0000
color: #000000
color: #b00
color: #000

35. Hexadecimal RGB colors
Si cada uno de los pares de dígitos no se repite,
entonces no podemos utilizar la sintaxis reducida.
color: #248901 color: #ececec
color: #343434 color: #F07132

36. Longitud

37. Longitud
Muchas propiedades como width o margin dependen
de un valor de longitud para determinar su tamaño.

38. Longitud
Todos los valores de longitud se pueden especificar
tanto con un valor positivo o negativo seguido por un
“label”.

39. Longitud
También se pueden utilizar valores fraccionarios como 7.7 o 1.5.

40. Longitud
Todos los valores de longitud están seguidos por una
abreviación de dos letras que representa la unidad de
medida que se está especificando; ya sea en pixeles
(px), pulgadas (in) o puntos (pt).
La única excepción es el cero (0), que no necesita que
le especifiquemos un valor; ya que cero pixeles es lo
mismo que cero pulgadas o cero centímetros.

41. Longitud
Las unidades de medida de longitud están divididas en
dos tipos:
longitudes absolutas
longitudes relativas

42. Longitudes absolutas
Pulgadas - in
Centímetros - cm
Milímetros - mm
Puntos - pt
Picas - pc

43. Longitudes absolutas
width: 40in;
height: 50mm;

44. Longitudes absolutas
Estas unidades de medida son más útiles cuando se está
trabajando con impresos, ya que en pantalla, la imagen
está afectada por el tamaño del monitor y la resolución
de pantalla del mismo.

45. Longitudes absolutas

46. Longitudes absolutas
Utilizarlos para medidas de elementos en pantalla
puede resultar en textos que son muy pequeños para
leer correctamente en algunas combinaciones de
sistema operativo / monitor / browser; mientras que en
nuestra pantalla se ve perfectamente bien.

47. Longitudes relativas
Son llamadas de esta manera ya que son medidas en
relación a otro elemento u objeto.
El tamaño real que midan estos elementos puede
cambiar debido a factores que van más allá de su
control; como por ejemplo, resolución de pantalla,
ancho del browser o preferencias del usuario.

48. Longitudes relativas
Hay tres unidades de medida relativos:
em-height - em
x-height - ex
pixel - px

49. em
En CSS, un em es considerado el valor determinado del
font-size de un elemento.
Si el font-size de un elemento es 14 pixeles, entonces,
para ese elemento 1em es equivalente a 14 pixeles.

50. em
Por ejemplo: si un H1 tiene 20px como su font-size;
entonces, 1em es equivalente a 20px para ese H1.
Al especificar margin: 1em para el H1, el margen sería
igual a 20px.

51. em
Cuando se utiliza em para especificar el tamaño del
font, entonces el valor de em es relativo al font size del
padre.
Por ejemplo, si el BODY tiene un font-size de 10px, un
DIV que sea descendiente de él y tenga 2em como su
font-size, tendrá un tamaño de letra de 20px.

52. em
margin-bottom: 3em;
font-size: 2em;
font-size: 1.2em;

53. ex
ex, se refiere a la altura de una x en minúscula en el
font utilizado.
Si se tienen dos párrafos de texto, ambos con el mismo
tamaño de letra, pero con tipografías diferentes; el valor
de ex sería diferente para cada párrafo.
Esto es, ya que cada font tiene un tamaño de x distinto.

54. ex
Garamond x
Centhury Gothic x
Times New Roman x
Arial x

55. ex
Ojo: Ahora, existen algunos browsers que determinan
el valor de ex, obteniendo el valor de em y dividíendolo
por la mitad.

56. Pixeles
Esta es la unidad de medida más sencilla y fácil de
entender. 1px en CSS es equivalente a 1px en pantalla.

57. Pixeles
El valor de pixel se considera relativo ya que depende
de la resolución de la pantalla del usuario.

58. Pixeles
width: 500px;
margin: 20px;

59. Pixeles
Ojo: Al especificar el tamaño de letra en pixel, Internet
Explorer 6.0 no le permite al usuario hacer resize del
texto; a pesar de seleccionar un tamaño de texto más
grande, el texto no se agranda.
Esto puede crear problemas de usabilidad y
accesibilidad.
Esto no es un problema con los browsers modernos.

60. URL

61. URLs
Cuando utilizamos el @import directive o el
background-image, utilizamos URLs para llamar al
archivo indicado.
url(protocol://server/pathname/file)

62. URLs
Se puede utilizar las rutas absolutas (absolute paths):
url(http://www.bootstudio.com/images/logo.gif)
O se pueden utilizar rutas relativas (relative paths):
url(../images/logo.gif)

63. URLs
En CSS las rutas relativas son relativas al archivo CSS,
no al archivo HTML que llama al CSS.
Ojo: Nestcape Navigator 4 interpretaba las rutas
relativas en relación al archivo HTML, no al archivo
CSS.
No se puede colocar un espacio entre url y el
paréntesis

64. Keywords

65. Keywords
Existen algunos keywords que permiten describir o asignar
un valor con una palabra.
Por ejemplo:
none
inherit
normal
underline

66. Keywords
font-weight: normal;
margin: auto;
text-decoration: none;

67. Keywords
Si una propiedad acepta keywords, los keywords que podrá
usar serán limitados por la definición de la propiedad.
También tengan en cuenta que el comportamiento del
elemento al aplicarle un valor de keyword va a ser
diferente dependiendo de la propiedad.
Por ejemplo: none es diferente para text-decoration que
para font-style.

68. Keywords
inherit
Inherit es un keyword que es compartido por todas las
propiedades en CSS 2.1.
Este valor hace que la propiedad herede los mismos
valores que su padre.
En la mayoría de los elementos no es necesario especificar
inherit; ya que las propiedades se heredan de manera
predeterminada; pero puede ser útil en el caso de los
backgrounds, margin, padding y border.

69. Bibliografía
CSS: The Definitive Guide
Eric Meyer
Amazon: http://tinyurl.com/5hs7jf

70. Bibliografía
CSS 2.1 Specification
World Wide Web Consortium
http://www.w3.org/TR/CSS21/syndata.html#values