Técnicas imprescindibles

Capítulo 1. Técnicas imprescindibles

El estándar CSS 2.1 incluye más de 100 propiedades de todo tipo para diseñar el aspecto de las

páginas HTML. No obstante, los diseños web más actuales muestran recursos gráficos que no se

pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografía

avanzada. Por ese motivo, es preciso que los diseñadores web profesionales conozcan las

técnicas imprescindibles para crear diseños web avanzados.

En las próximas secciones se muestran las siguientes técnicas imprescindibles:

▪ Propiedades shorthand para crear hojas de estilos concisas.

▪ La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos

errores de ese navegador.

▪ Limpiar floats, para trabajar correctamente con los elementos posicionados de forma

flotante.

▪ Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de las

páginas.

▪ Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS 2.1.

▪ Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el

diseño de las páginas.

▪ Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas.

▪ Técnicas para trabajar con el texto y la tipografía.

1.1. Propiedades shorthand

Algunas propiedades del estándar CSS 2.1 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 Tipografía

Valores

( ( <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

CSS avanzado Capítulo 1. Técnicas imprescindibles

www.librosweb.es

5

margin Margen

Valores ( <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

padding Relleno

Valores ( <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

border Estilo completo de todos los bordes

Valores ( <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 Fondo de un elemento

Valores

( <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 Estilo de una lista

Valores

( <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:

CSS avanzado Capítulo 1. Técnicas imprescindibles

www.librosweb.es

6

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;

...