Traducción en curso

Definición

Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), un 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 abereviada 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. Un valor que no es especificado se le asigna su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán valores previamente definidos. Por lo tanto:
    background-color: red;
    background: url(images/bg.gif) no-repeat top right;
    
     no pondrá el color en rojo si no 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 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, 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 specifying inheritance:

inherit
Sets the property value applied to a selected element to be the same as that of its parent element.
initial
Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead.
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.
revert
Reverts the property to the value it would have had if the current origin had not applied any styles to it. In other words, the property's value is set to the user stylesheet's value for the property (if one is set), otherwise, the property's value is taken from the user agent's default stylesheet.

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

Note: initial and unset are not supported in Internet Explorer.

Of these, inherit is frequently the most interesting — it allows us to explicitly make an element inherit a property value from its parent.

Let's take a look at an example. First some HTML:

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

Now some CSS for styling:

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}

Result:

Let's explain what's going on here:

  • We first set the color of the <body> to green.
  • As the color property is naturally inherited, all child elements of body will have the same green color. It's worth noting that browsers set the color of links to blue by default instead of allowing the natural inheritance of the color property, so the first link in our list is blue.
  • The second rule sets links within an element with the class my-class-1 to inherit its color from its parent. In this case, it means that the link inherits its color from its <li> parent, which, by default inherits its color from its own <ul> parent, which ultimately inherits its color from the <body> element, which had its color set to green by the first rule.
  • The third rule selects any links within an element with the class my-class-2 and sets their color to initial. Usually, the initial value set by browsers for the text color is black, so this link is set to black.
  • The last rule selects all links within an element with the class my-class-3 and sets their color to unset — we unset the value. Because the color property is a naturally inherited property it acts exactly like setting the value to inherit. As a consequence, this link is set to the same color as the body — green.

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

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, IsraelFloresDGA, huichops
Última actualización por: mdnwebdocs-bot,