Es/Referencia de notación abreviada de CSS

From Web Education Community Group
Jump to: navigation, search

Este breve artículo cubre los diferentes modos de notación abreviada de CSS que encontrará en su trabajo de día a día.

Bordes

border le permite establecer tanto el ancho, el estilo y el color de borde en una sola propiedad. Así, por ejemplo:

border: 1px solid black;

es equivalente a las siguientes tres reglas:

border-width: 1px;
border-style: solid;
border-color: black;

También puede descomponerla aún más en reglas aún más específicas, para un solo borde del elemento al que se aplica, por ejemplo:


border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;

o incluso:

border-left-width: 2px;
border-left-style: solid;
border-left-color: black;

Muy rara vez deseará ser tan específico. Con mayor probabilidad utilizará simplemente border o border-left/right-top-bottom en la mayoría de los casos. Las opciones más específicas se utilizarán sólo si desea reemplazar una declaración anterior de borde.

Márgenes, rellenos y contornos

La notación abreviada tanto para margin, padding, y outline funciona de la misma manera. Considere la siguiente regla de margin:

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

Tal regla podría también escribirse así:

div.foo {
  margin: 1em 1.5em 2em 2.5em;
}

Estos tipos de propiedad pueden tomar menos de cuatro valores también, de la siguiente manera:

  1. El mismo valor aplicado a todos los cuatro lados — margin: 2px;
  2. El primer valor aplicado arriba y abajo, el segundo a la derecha e izquierda — margin: 2px 5px;.
  3. El primer y el tercer valor aplicados arriba y abajo respectivamente, el segundo valor aplicado a la derecha e izquierda — margin: 2px 5px 1px;.

Fuentes

Puede especificar el tamaño, espesor, estilo, familia e interlineado usando una sola línea de notación abreviada. Considere las siguientes CSS:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5em;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;

Todo esto lo puede especificar usando la siguiente línea:

font: bold italic small-caps 1.5em/200% Georgia, "Times New Roman", serif;

Tenga en cuenta que en realidad no importa el orden de muchos de ellos, aunque debe asegurarse de que font-size/line-height y font-family están en las posiciones que se muestran, además, tanto font-size como font-family deben ser especificados. De no ser así, puede que esta notación abreviada no funcione en algunos navegadores.

Note también que si font-weight, font-style o font-variant no son especificadas, sus valores se establecerán al valor predeterminado normal.

Fondos

En las CSS 2, puede especificar el color de fondo, la imagen de fondo, la repetición de la imagen y la posición de la imagen con una línea de CSS. Observe el siguiente código:


background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;

Esto puede representarse usando la siguiente notación abreviada:

background: #000 url(image.gif) no-repeat top left fixed;

Tenga en cuenta que si alguno de los valores no es especificado, se asumen los siguientes valores predeterminados:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;

Mejoras en CSS3

Las CSS3 introducen tres nuevas propiedades: background-size, background-origin, y background-clip. Puede incluirlas en la notación abreviada de background de esta manera:

background: #000 url(image.gif); no-repeat top left / 50% 20% border-box content-box;

Observe la barra diagonal entre top left y 50% 20%. Ésta separa los valores de background-position y background-size ya que estas dos propiedades comparten algunas unidades de valor (longitud y porcentaje) y sin dicha barra no podemos distinguir que valores son para que.

Así que si desea incluir el valor de background-size en la notación abreviada, necesita:

  • Incluir explícitamente los valores de background-position incluso si estos son iguales a los valores predeterminados (ver arriba).
  • Colocar los valores de background-position antes que los valores de background-size.
  • Colocar una barra diagonal entre estos dos pares de valores.

Del mismo modo, background-origin y background-clip comparten las mismas palabras clave como valores. Estas dos propiedades también deben escribirse en orden: background-origin se coloca de primera y background-clip de segunda.

Si sólo especifica un valor de box (border-box, padding-box, o content-box), entonces el valor se aplica a background-origin y background-clip.

Nota: Los degradados de CSS3 son un valor avanzado especial de background-image. Aparte de las diferencias sintácticas, los valores de degradado aparecen exactamente en el mismo lugar en la notación abreviada que los otros valores de background-image y funcionan de la misma manera. Para obtener más información sobre los degradados de CSS3, puede leer Degradados lineales de CSS3 (inglés) y Degradados radiales de CSS3 (inglés) en dev.opera.com.

Listas

Puede especificar el tipo, posición e imagen de viñeta de las listas en una sola línea. Observe el siguiente código CSS:

list-style-type: circle;
list-style-position: inside;
list-style-image: url(vineta.gif);

Que es el equivalente de:

list-style: circle inside url(vineta.gif);

Tenga en cuenta que de omitir alguno de los valores, se asumirán los siguientes valores predeterminados:

list-style-type: circle;
list-style-position: outside;
list-style-image: none;

Color

Al especificar valores hexadecimales de color puede utilizar la notación abreviada si ambos valores hexadecimales son los mismos para cada canal de color. Por ejemplo, #000 es equivalente a la notación extendida #000000. Veamos un ejemplo un poco más complicado: #6c9 es lo mismo que #66cc99.