Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Resetear un archivo CSS

20 febrero, 2011
en CSS
0
Reglas CSS por defecto para los navegadores

Resumen del Contenido

  • ¿Qué es Reset CSS?
  • ¿Qué conseguimos con ello?
  • ¿Por qué haremos esto?

¿Qué es Reset CSS?

CSS Reset es un conjunto de reglas CSS cuyo objetivo es restablecer, o mejor tal vez decir, establecer todos los elementos de valor de referencia.

¿Qué conseguimos con ello?

Bueno, este es un intento de garantizar que el sitio web se ve más o menos idénticos en distintos navegadores.

¿Por qué haremos esto?

Debido a que los principales navegadores (Firefox, Internet Explorer, Opera, Chrome, Safari, etc) tienen sus propias reglas generalizadas CSS, y estas reglas son totalmente diferentes entre ellos. Buscamos que en todos los navegadores se vea practicamnte igual nuestra web. Esto es más fácil de conseguir cuando partimos del mismo punto de referencia

Hay un montón de diferentes métodos de reajustes, mencionaré una par de ellos como ejemplo

Además yo no te diré si debes o no debe utilizar este reajuste de CSS, porque no hay solución definitiva. Sólo estoy tratando de darte algunas ideas al respecto.

A continuación un archivo (reset.css) más elaborado para inicializar los estilos:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* En el código HTML es necesario añadir cellspacing="0" a la tabla */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Otro posible archivo para resetear la hoja de estilos puede ser el siguiente:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Son muchas las posibilidades, puedes optar por cualquiera de ellas. Para incluir esta hoja de estilos en tu web solamente tienes que crear el fichero, por ejemplo reset.css y llamarlo desde tu página, en la cabecera de la página incluir esta linea:

<link rel="stylesheet" type="text/css" href="reset.css"/>
Etiquetas: csshoja de estilosresetreset.css
ANUNCIO
Post anterior

Chuleta para WordPress

Próximo Post

CSS: Efecto cebrado en tablas y listas

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Por favor logueate para comentar

Recomendados

Curso PHP, como cortar una cadena de texto

Mostrar los errores de PHP en tiempo de ejecución

23 febrero, 2016
Algunas herramientas SEO muy útiles

Guía SEO de Google para principiantes

19 diciembre, 2010
Como acceder a la administración de WordPress

Cambio de Servidor

14 mayo, 2011
Códigos de error con el pago por tarjeta, TPV

Optimizar imágenes en WordPress

11 abril, 2016

Tutotial Monstersse

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .