Month: March 2006

Seguimos organizando las hojas de estilo.
La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.
### LoVe HAte
Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:
a:link { /* Love hate */
}
a:visited { /* loVe hate */
}
a:hover { /* love Hate */
}
a:active { /* love hAte */
}
### TRouBLe
Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).
Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta:
#unSelector {
margin: 0 1em 1em 1em;
}
El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).
Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos:
#unSelector {
margin: 0;
/* margen 0 por los cuatro costados */
}
#unSelector {
margin: 0 1em;
/* márgenes superior e inferior a cero,
márgenes izquierdo y derecho de 1em */
}
#unSelector {
margin: 0 1em 2em;
/* huy, este tiene truco: margen superior, cero;
margen derecho, 1em; margen inferior, 2em.
¿Y el izquierdo? en caso de tener
tres valores, se toma el segundo, esto es el
valor es el mismo para los dos laterales */
}
#unSelector {
margin: 0 1em 2em 1em;
/* TRouBLe, como ya hemos comentado */
}
Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.
Más sobre [Memoria y reglas nemotécnicas][m].
[mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española”
[m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm