Propieades CSS con sintaxis corta

0 - - 20/01/2006 00:00:00

Una de las posibilidades de CSS es la de utilizar una sintaxis corta, lo que posibilita utilizar multiples propiedades en una sola línea. Utilizar una sintaxis corta mejora la visibilidad y optimiza el archivo CSS.

A continuación se muestran varias propiedades con su sintaxis corta.

FONT

Sintaxis corta:
font: font-style | font-variant | font-weight | font-size | line-height | font-family

Por ejemplo:

font-family: serif;
font-size: 1.4em;
font-weight: bold;

quedaría:

font: bold 1.4em serif;

MARGIN y PADDING

Sintaxis corta:

margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Por ejemplo:

padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;

quedaría:

padding: 1px 4px 3px 4px;

BORDER

Sintaxis corta:

border: border-width | border-style | color

Por ejemplo:

border-width: 1px;
border-style: solid;
border-color: #000;

quedaría:

border: 1px solid #000;

border-top, border-right, border-bottom y border-left funcionarían de un modo similar a la hora de aplicar este tipo de sintaxis. Así por ejemplo para definir un borde derecho sería:
border-right: 4px dotted #CCC;

LIST-STYLE

Sintaxis corta:

list-style-type | list-style-position | list-style-image

Por ejemplo:

list-style-position: inside;
list-style-image: url(flecha.gif);
list-style-type: disc;

quedaría:

list-style: disc inside url("flecha.gif");

BACKGROUND

Sintaxis corta:

background: background-color | background-image | background-repeat | background-attachment | background-position

Por ejemplo:

background-color: #EEE;
background-image: url(bg.gif);
background-attachment: fixed;

quedaría:

background: #EEE url(bg.gif) fixed;

La utilización de esta sintaxis es soportada tanto por IE, como por Mozilla y Opera. Únicamente es parcialmente soportada por navegadores antiguos como IE4 o NS4.

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha