Fundamentos Básicos de CSS

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.

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

Técnicas imprescindibles

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

Técnicas imprescindibles

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;

}

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros