TECNato – TIC's Perú

Estilos Genéricos para CSS

viernes, 20 de agosto del 2010 4 comentarios

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:

Alineación

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

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

Esquinas redondeadas

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

Ejemplo:

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:

Esquinas redondeadas en CSS3

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

Ejemplo:

Iconos

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

Ejemplo:

Elemento oculto

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

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.


Escrito por para TECNato

4 comentarios

  • jronal
    20 de agosto del 2010

    Tambien encontraran mas tips en http://www.positioniseverything.net/easyclearing.html

  • wilson
    23 de agosto del 2010

    interesante articulo, sobre todo por que siempre se rescribe elementos comunes (cajas) y sus dimensiones.

  • financial aid for college
    11 de enero del 2011

    Useful blog website, keep me personally through searching it, I am seriously interested to find out another recommendation of it.

  • Marycruz
    14 de mayo del 2012

    Muy bueno, bien explicado y algo muy util, haber si sigues colocando mas post sobre tips de maquetacion ..!!

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación)

Hazte miembro

TECNato es libre y abierto a nuevos miembros Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress