ALD | Afrael Live & Direct

Usando CSS Shorthand Parte 2

En la nota anterior hablamos de como usar shorthand de font, background, margin y padding. Hoy hablarémos de:

• border
• list-style

Veamos la definición de cada con su ejemplo respectivo:

border
Para usar shorthand debes seguir la siguiente sintáxis
{border: width style color}
Deben estar en ese orden y todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:

div {
border-top: double solid black ;

border-bottom: double solid black;

border-left: double solid black;

border-right: double solid black;

}

Luego de aplicar shorthand quedaria reducido a:

div{ border: double solid #000; }

Este es el caso en que todos son iguales, si todos son iguales excepto uno, por ejemplo el border-left es de tipo dotted puede aplicar lo siguiente:

div {
border-top: 3px solid black ;

border-bottom: 3px solid black;

border-left: 1px dotted black;

border-right: 3px solid black;

}

Luego de aplicar shorthand quedaria reducido a:

div{ border: 3px solid #000; }

div{ border-left: 1px dotted;}

Las combinaciones son muchas, todo es cuestión de entender el principio básico y aplicarlo en la vida real.

list-style
Para usar shorthand del list-style debes seguir la siguientes reglas
{list-style: type position image}
Pueden ser especificados en cualquier orden, todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:

ul li {
list-style-type: square;

list-style-position: outside;

list-style-image: url(images/bullet.gif);

}

Luego de aplicar shorthand quedaria reducido a:

ul li{ list-style: url(images/bullet.gif) outside square; }

colores en hexadecimal
Hay cinco diferente formas de definir los colores en CSS, podemos usar nombres, por ejemplo, black o white, podemos usar una combinación RGB y finalmente podemos usar un número hexadecimal. Los colores expresados en hexadecimal pueden reducirse considerablemente, pero debe cumplirse una condición, veamos:

La forma hexadecimal de expresar colores es la siguiente

class {color: #rrggbb; } siendo rrggbb números, por ejemplo, class {color: #00ff00; }.

Si los valores rrggbb se repiten pueden ser abreviados, veamos algunos ejemplos:

• #ff0000 luego de shorthand #f00
• #000000 luego de shorthand #000
• #ff00ff luego de shorthand #f0f
• #cccccc luego de shorthand #ccc

La aplicación de shorthand en sus hojas de estilo conlleva el beneficio de hacer que ellas sean más compactas, más cortas, byte a byte vamos ahorrando bandwidht, y también, le dan un toque un poco más elegante a las hojas de estilo, esto es una apreciación netamente personal. Apliquen shorthand, la práctica hace al maestro. Errores u omisiones, por favor haganmelas saber, al igual que cualquier sugerencia, si necesitan ayuda, por aquí siempre a la orden, claro, en la medida que el tiempo me permita.