Habíamos visto en el primer artículo acerca de los atajos CSS un ejemplo clásico de ellos y una bastante larga explicación,
A continuación puedes ver los atajos CSS mas utilizados en una serie de ejemplos para un clase llamada “cabecera”
Para la etiqueta Font:
CSS largo:
.cabecera{
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px; line-height: 16px;
}
Atajo:
.cabecera{
font: bold 11px/16px verdana, sans-serif;
}
Para la etiqueta Margin:
CSS largo:
.cabecera{
margin-top:2px;
margin-right:1px;
margin-bottom:0;
margin-left:1px;
}
Atajo1:
.cabecera{
margin: 2px 1px 0 1px;
}
CSS largo2:
.cabecera{
margin-top:2px;
margin-right:1px;
margin-bottom:0;
margin-left:1px;
}
Atajo2, se aplica cuando las cifras primera y tercera o segunda y cuarta son iguales:
.cabecera{
margin: 2px 1px 0;
}
CSS largo3:
.cabecera{
margin-top:2px;
margin-right:1px;
margin-bottom:2px;
margin-left:1px;
}
Atajo3, se aplica cuando las cifras está repetidas por pares:
.cabecera{
margin:2px 1px;
}
CSS largo4:
.cabecera{
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
}
Atajo4, se aplica cuando las 4 cifras son iguales:
.cabecera{
margin:1px;
}
Nota: este atajo funciona exactamente igual para la etiqueta Padding
Para los bordes:
CSS largo:
.cabecera{
border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;
}
Atajo:
.cabecera{
border-top: 2px dashed #f00;
}
Nota: Para aplicar el estilo en todos los bordes se usaría:
.cabecera{
border: 2px dashed #f00;
}
Para el atributo Background:
CSS largo:
.cabecera{
background-color: #fff;
background: url(“test.gif”);
background-repeat: repeat-x;
}
Atajo:
.cabecera{
background: #fff url(“test.gif”) repeat-x;
}
Para las listas UL
CSS largo:
.cabecera{
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
}
Atajo:
.cabecera{
list-style: disc outside url(image.gif)
}
Para los colores:
CSS largo:
.cabecera{
color:#cccccc;
}
y
.cabecera{
color:#ff6600;
}
Atajo:
.cabecera{
color:#ccc;
}
y
.cabecera{
color:#f60;
}
Nota: Los colores básicos también se pueden definir con los nombres en inglés, white,red, blue, black, etc..
.cabecera{
color:red;
}
Para cifras con valor 0:
CSS largo:
0px;
Atajo:
0;
Nota: las medidas en pixeles, em y pt no necesitan el descriptor del tipo de unidad en valores iguales a 0
Bien este es un rápido resumen de algunos atajos CSS, espero que te sean útiles, hasta el próximo post,
@Jotace
Comments
No Responses to “Atajos CSS – Parte 2”