Estilos genéricos de css como base para una web

Por: Coyr + 27.05.2006

En internet existen muchos navegadores, y cada uno tiene diferentes estilos predeterminados tales como margenes, y padding. Esto dificulta el trabajo en muchos casos, por lo tanto crearemos estilos genéricos para que se visualice adecuadamente en todos.

Esta hoja de estilos reseteará los estilos y reescribirá los valores por defecto de algunas etiquetas, body, títulos, listas, formularios.

Para más información respecto a este tip pueden revisar el artículo original Starting with CSS: Revisited (Empezando con CSS).

Código :

/* =INITIAL 
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
   margin: 0;
   padding: 0;
   font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
   margin: 1em 0;
   padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
   margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
   cursor: pointer;
}
fieldset {
   border: none;
}

/* Form field text-scaling */
input, select, textarea {
   font-size: 100%;
}

Clases genéricas

Como otra recomendación es bueno usar clases genéricas para alinear contenidos, flotar imagenes, limpiar los floats, y otras clases que puedan tener en mente.

Código :

.alignleft { text-align: left; }
.alignright { text-align: right; }

.floatleft { float: left; margin: 0 10px 10px 0; }
.floatright { float: right; margin: 0 0 10px 10px; }

.clearboth { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }

Ya lo he probrado y me ha funcionado bastante bien, espero también les ayude en sus proyecto

Actualización: NEO_JP explica mas a fondo sobre el tema en las conferencias Cristalab Ozon3.

css

Deja un comentario

IMPORTANTE

Este mensaje ha sido cerrado; si deseas participar en la discusión o hablar de otro tema relacionado, hazlo en los foros de Cristalab