Ir directamente al contenido de esta página
id y classComo hice con los elementos de XHTML 1.1, recojo en las siguientes listas las propiedades de CSS 2.1. Sólo quiero dar antes unas notas.
Algunas de las propiedades en las listas aparecen marcadas como propiedad de conjunto, lo que significa que se pueden emplear como anotación abreviada de varias declaraciones. Por ejemplo una regla como ésta
#resumen{
background-color:#E8E8E8;
background-image:url(marca_agua_resumen.png);
background-position:right bottom;
background-repeat:no-repeat;
}
se puede resumir así:
#resumen{
background:#E8E8E8 url(marca_agua_resumen.png) right bottom no-repeat;
}
En general, el orden de los valores de las propiedades es irrelevante, por lo que la regla anterior es equivalente a ésta:
#resumen{
background: url(marca_agua_resumen.png) #E8E8E8 no-repeat right bottom;
}
No obstante, cuando haya un orden estricto, se indicará en la descripción.
Por último, hay que tener en cuenta que al emplear una propiedad de conjunto, los valores de propiedades no especificados se restablecen a su valor por defecto. ¿Qué significa esto? Pongamos un ejemplo. Supongamos que tenemos una hoja de estilo como ésta:
div{
color:#000;
background-color:#E8E8E8;
}
div#resumen{
background:url(marca_de_agua_resumen.png) bottom right no-repeat;
}
Intuitivamente, uno pensaría que el div con id="resumen" va a heredar el gris pálido de fondo —puesto que no deja de ser el mismo elemento—, pero que además va a contar con una imagen en su esquina inferior derecha. Sin embargo no es así: con la propiedad de conjunto, al no especificar color de fondo, lo hemos restablecido a su valor por defecto, así que heredará el del elemento padre. Ver el ejemplo de rigor.
Saber esto último ahorra muchos dolores de cabeza.
Cuando en los valores de las propiedades hablo de medidas, indico si estas son absolutas, relativas o porcentuales, pero en todo caso es necesario indicar las unidades con su abreviatura correspondiente, y sin espacio en blanco entre ésta y el valor; 1em sería correcto, 1 em no.
Las unidades absolutas son:
mm).cm).in).pt): Un punto equivale a 1/72 de una pulgada, lo cual para los que pensamos según el sistema decimal, casi es como no decir nada; no obstante se define así.pc): Una pica equivale a 12 puntos.Las unidades relativas, a diferencia de las anteriores, dependen de variables como el tamaño de fuente por defecto del agente de usuario o la resolución de pantalla:
em): Es la distancia que hay entre las líneas base de dos renglones para una fuente determinada, siempre y cuando no se haya añadido interlineado extra.ex): Es más o menos la altura de la letra «x» minúscula de una fuente en concreto, aunque en los navegadores actuales suele ser la mitad de una em.px): Creíais que era una unidad absoluta, ¿verdad?.Por último, los porcentajes son eso, porcentajes.
Los detalles excepcionales se explicarán en la descripción de la propiedad correspondiente.
Acerca de los colores, hay que indicar que existen cuatro formas de especificar sus valores.
Por medio de su valor hexadecimal: Se indica precedido por una almohadilla (#) y sin espacio en blanco entre medias. Suelen ser seis caracteres, entre las cifras del 0 al 9 y las letras de la A a la F, y representan el valor RGB —Red/Green/Blue— del color, cada par uno de los canales, por ejemplo #FD12A4.
Se puede optar por una anotación abreviada, siempre que los dos caracteres que corresponden a cada componente de color sean iguales, eliminando un caracter de cada par; así, #FFCC00 se puede expresar como #FC0, #00CC00 como #0C0 o #22AA44 como #2A4. No se puede en casos como #FFF000 o #E1E1E1, porque cada uno de los pares no está formado por dos caracteres iguales.
rgb, por ejemplo rgb(45,28,233).rgb(22%,78%,10%).Se supone que además de todo esto, se podrían elegir colores de sistema (inglés), que serían los colores empleados por el usuario en la interfaz de su sistema operativo. No obstante, no los incluyo aquí porque su soporte es escaso, y además en la propia especificación se indica que en el módulo de color de CSS 3 se considerarán depreciados.
El soporte de las propiedades en los navegadores es algo inconsistente, aunque la tendencia actual por parte de los desarrolladores de los mismos es ajustarse cada vez más a las especificaciones del W3C. Podría incluir notas sobre este soporte, pero no lo voy a hacer mejor de lo que lo hace Peter-Paul Koch en su lista de compatibilidad de CSS (inglés), así que compruébelo allí; sólo hay que tener en cuenta únicamente que incluye algunas propiedades que son de CSS 3, y algunas que son código propietario.
O mejor, experimente.
Y ahora sí, sólo queda dar las listas:
