Comunidad de diseño web y desarrollo en internet online

Estilos genéricos de css como base para una web

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%;
}


NOTA: Es recomendable usar el selector universal para resetear los margenes y paddings de todas las etiquetas a cero (0).



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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate