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.
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.
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.
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
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
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);
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
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
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.
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.
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.
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.
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.
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
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.