TECNato – Comunidad Tecnológica del Perú

Cuando uno maqueta páginas Web desde cero y de forma constante, se hace necesaria la adopción y creación de estilos genéricos con el propósito de facilitar y agilizar el proceso de codificación HTML/CSS.

En esta ocasión se presentan algunos estilos genéricos que pueden ser de mucha utilidad.

CSS Reset

Muy importante para empezar, son los estilos que “limpian” los elementos del HTML, es decir eliminan los atributos visuales que no son de utilidad (CSS Reset).

Ejemplo:

YUI Reset de Yahoo!

Enlaces o links

Se define un color común y el subrayado al pasar el puntero del ratón (evento “hover”).

Ejemplo:

a { color:blue; text-decoration:none; }
a:hover { text-decoration:underline; }

Alineación

Estilos para la ubicación o alineación de los elementos:

.left { float:left; } /* alineación izquierda */
.right { float:right; } /* alineación derecha */
.clearer { clear:both; } /* limpiador de alineaciones */

Estilos para la alineación de texto o cualquier elemento “inline” dentro de un elemento “block”.

.tac { text-align:center; }
.tar { text-align:right; }

Esquinas redondeadas

Estos nos sirven para diseños que contienen elementos rectangulares con las esquinas redondeadas.

Ejemplo:

.esq { background:url('esquinas.gif') no-repeat; height:4px; position:absolute; width:4px; } /* propiedades similares de las 4 esquinas */
.si { left:0; top:0; } /* esquina superior izquierda */
.sd { right:0; top:0; background-position:-4px 0; } /* esquina superior derecha */
.ii { left:0; bottom:0; background-position:0 -4px; } /* esquina inferior izquierda */
.id { right:0; bottom:0; background-position:-4px -4px; } /* esquina inferior derecha */

Para este caso se utiliza la técnica de “sprite” y la imagen “esquinas.gif” es como sigue:

Y aquí un ejemplo de código HTML:

<div class=”caja”>
<div class="esq si"></div>
<div class="esq sd"></div>
<div class="esq ii"></div>
<div class="esq id"></div>
<!-- contenido -->
</div>

Esquinas redondeadas en CSS3

Con la nueva versión del CSS, la técnica es sencilla, pero solo es soportada por algunos navegadores.

Ejemplo:

.round { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }

Iconos

Usualmente los enlaces van acompañados de un icono al lado izquierdo.

Ejemplo:

/* Para un icono de 16x16 pixeles a lado izquierdo de un enlace */
.ico { background:url('icono.gif') no-repeat; line-height:16px; padding:1px 0 1px 20px; }

Elemento oculto

Muchas veces es necesario un estilo que oculte elementos, que podemos solucionar con la siguiente clase:

.oculto { display:none; }

De esta manera podemos crear aun mas estilos genéricos y que podemos usar en todas nuestras maquetas, incluso llegar a crear un sencillo Framework CSS que se adapte a nuestras necesidades.