Shorthand en css

Algunas propiedades  del estándar CSS son especiales, ya que permiten establecer simultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades se denominan “propiedades shorthand” y todos los diseñadores web profesionales las utilizan.

 

La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia la definición formal de las seis propiedades shorthand disponibles en el estándar CSS 2.1.

 

font 

Valores

Tipografía 

( ( <font-style> || <font-variant> || <font-weight> )?

<font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit

Se aplica a Todos los elementos
Valor inicial
Descripción Permite indicar de forma directa todas las propiedades de la tipografía de un texto

 

 

marginValores Margen 

( <medida> | <porcentaje> | auto ) {1, 4} | inherit

Se aplica a Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas
Valor inicial
Descripción Establece de forma directa todos los márgenes de un elemento

 

paddingValores Relleno 

( <medida> | <porcentaje> ){1, 4} | inherit

Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial
Descripción Establece de forma directa todos los rellenos de los elementos

 

borderValores Estilo completo de todos los bordes 

( <border-width> || <border-color> || <border-style> ) | inherit

Se aplica a Todos los elementos
Valor inicial
Descripción Establece el estilo completo de todos los bordes de los elementos

 

background 

Valores

Fondo de un elemento 

( <background-color> || <background-image> ||

<background-repeat> || <background-attachment> ||

<background-position> ) | inherit

Se aplica a Todos los elementos
Valor inicial
Descripción Establece todas las propiedades del fondo de un elemento

 

list-style 

Valores

Estilo de una lista 

( <list-style-type> || <list-style-position> ||

<list-style-image> ) | inherit

Se aplica a Elementos de una lista
Valor inicial
Descripción Propiedad que permite establecer de forma simultanea todas las opciones de una lista

 

Si se considera la siguiente hoja de estilos:

 

 

p {

font-style: normal;

font-variant: small-caps; font-weight: bold;

font-size: 1.5em; line-height: 1.5;

font-family: Arial, sans-serif;

}

div {

margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; padding-top: 3px; padding-right: 5px; padding-bottom: 10px; padding-left: 7px;

}

h1 {

background-color: #FFFFFF;

background-image: url("imagenes/icono.png"); background-repeat: no-repeat;

background-position: 10px 5px;

}

 

Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:

 

p {

font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;

}

div {

margin: 5px 10px;

padding: 3px 5px 10px 7px;

}

h1 {

background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;

}

También te puede interesar:

CategoríasCSS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *