Propiedades abreviadas

Definición

Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad  background de CSS es una propiedad abreviada que puede definir el valor de background-color, background-image, background-repeat, y background-position. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación font, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación margin.

Casos especiales delicados

Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:

  1. Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto:
    background-color: red;
    background: url(images/bg.gif) no-repeat top right;
    
     no pondrá el color en rojo sino al valor por defecto de background-color , transparent, puesto que la segunda regla tiene precedencia.
  2. Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit.
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
    1. Shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges:
      border1.png The 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.png The 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.png The 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

    2. Similarly, shorthands handling properties related to corners of a box, like border-radius (en-US), always use a consistent 1-to-4-value syntax representing those corners:
      corner1.png The 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.png The 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.png The 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

Propiedades Background

Un fondo con las siguientes propiedades...

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

... puede acortarse con una sola declaración:

background: #000 url(images/bg.gif) no-repeat top right;

(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)

Propiedades Font

Las siguientes declaraciones:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

... pueden ser abreviadas como sigue:

font: italic bold .8em/1.2 Arial, sans-serif;

Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a font-variant: normal y font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

Propiedades Border

Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,

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

... puede ser simplificada como

border: 1px solid #000;

Propiedades Margin y Padding

Versiones abreviadas de margin y padding funcionan de la misma forma. Las siguientes declaraciones CSS:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)

margin: 10px 5px 10px 5px;

La propiedad abreviada universal

CSS provee una propiedad abreviada universal, all, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:

CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.

inherit
Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".
initial
Sets the property value applied to a selected element to the initial value of that property.
unset
Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.

Note: There is also a newer value, revert, which has limited browser support.

Note: See Origin of CSS declarations in Introducing the CSS Cascade for more information on each of these and how they work.

We can look at a list of links and explore how universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to get to grips with HTML and CSS.

For example:

  1. The second list item has the class my-class-1 applied. This sets the color of the <a> element nested inside to inherit. If you remove the rule how does it change the color of the link?
  2. Do you understand why the third and fourth links are the color that they are? Check the description of the values above if not.
  3. Which of the links will change color if you define a new color for the <a> element — for example a { color: red; }?

Ver Cascade and inheritance o Introducing the CSS Cascade para más información acerca de como trabaja la herencia en CSS.

Ver también