Contenido

Reseteando estilos CSS

7 ago

+ 47

Por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Estos estilos, generalmente son los ocasionantes de algunos de los problemas más comunes en el famoso cross-browsing (verse bien en todos los navegadores). Y por ello puede ser interesante resetearlos, para evitar que estos elementos nos descuadren la página.

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, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

19 comentarios, 28 referencias

+

#

  1. Reseteando el CSS « frogx.three 08/08/2007 05:08
  2. Reseteando el CSS — Gran Impetu 08/08/2007 11:08
  3. Reseteando estilos CSS 09/08/2007 06:08
  4. Tripoli, una CSS genérica para mejorar nuestras aplicaciones | aNieto2K 22/08/2007 10:08
  5. Neutralizar los estilos del navegador : Intrópicos 24/09/2007 11:09
  6. duda basica de un novato - Foros del Web 10/12/2007 01:12
  7. Dia de los links (II) | De la mano de TECNICOS o TECNICUCHOS | Tecnicucho 30/01/2008 10:01
  8. Chicoblog » Reseteando Css 28/04/2008 05:04
  9. Operación limpieza | DragóndeLuz.com 30/06/2008 04:06
  10. Lograr compatibilidad CSS en varios navegadores | Uberbloggerz 04/07/2008 05:07
  11. Desnudando a WydBlog I | WydBlog 13/08/2008 01:08
  12. 10 Técnicas para Reset CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards 10/11/2008 10:11
  13. 10 técnicas para resetear CSS 25/11/2008 05:11
  14. KRUZ-GRAPHIX » ブラウザの差異をなんとかしたいのです。 25/11/2008 04:11
  15. Cómo inicializar la hoja de estilos CSS » blogpocket 26/11/2008 07:11
  16. 10 técnicas para resetear CSS | Tecnolink Informatica 27/11/2008 05:11
  17. Spartan-Code» Blog Archive » 10 Tecnicas para resetear el CSS 03/12/2008 05:12
  18. Reseteando estilos CSS en nuestras páginas web - davidcostales blog 18/12/2008 05:12
  19. CSSBlog ES - ¡CSS 100%! 20/01/2009 07:01
  20. CSS Reset « El bit campeador 07/02/2009 09:02
  21. Técnicas para resetear CSS | CSSBlog ES 01/03/2009 07:03
  22. How to reset elements in CSS « CssFinest 05/03/2009 12:03
  23. Universal IE6 CSS, un CSS Reset para IE6 | aNieto2K 22/05/2009 09:05
  24. Aspectos a tener en cuenta al crear sitios web públicos | Spargo.Net 19/07/2009 11:07
  25. CSS Reset para HTML5 | aNieto2K 27/07/2009 06:07
  26. » 分享一些老外的CSS Reset - WEB前端开发- 专注前端开发,关注用户体验 31/07/2009 10:07
  27. Dedos de Silicio, Píxeles de Papel » Qué hacer para que un CSS funcione 02/10/2009 11:10
  28. 10 Reset CSS « Cristian Cena: Bitácora Personal 20/10/2009 10:10
  • Simplemente lo encuentro fantastico :o

    Gracias!!!

    Excelente aporte ^^

    Saludos!

  • Hola, Andrés. Yo me quedo con la última versión del reset de Eric Meyer:

    http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/

    Saludos!

  • xD si me toco resetear unas veces los elementos para que se viera bien en firefox e iexplorer

  • El unico problema de resetear los estilos es que muchas veces sin darnos cuenta usamos los estilos por defecto de tal o cual navegador y al hacer el reset se desalinea todo.

    Yo utilizo normalmente el reset.css de Yahoo.

  • El resetear el css te libera de muchos dolores de cabeza y ayuda a mejorar el diseño para el cross-browsing excelente tema, yo al = que Eduo utilizo la de YUI pero pues no vendria mal probar otras igual y ayudan mas aunque pues basicamente son las mismas variantes.

  • Hace algunas semanas escribí sobre esto también, especialmente por los reseteos de Eric Meyer y Faruk Ateş: Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş.
    En todo caso también hago referencia a otros más…
    Saludos!

  • Hace rato vengo viendo el anieto2k.com, sus articulos se entienden muy bien.

    Gracias mil

    saludos

  • Ummm… al margen de fuentes, bordes, listas y tal, no sería posible – y mejor- una versión reducida con el selector universal??:

    * {
    padding:0; 
    margin:0;
     }

    Te ahorras unas cuantas líneas creo, al menos en márgenes y espaciados… no?

  • veamos si puedo aplicarlo sin problemas, gracias!!

  • ESTE CÓDIGO ME HA SALVADO LA WEB EN FIREFOX!!!! muxisimas gracias

  • Como bien apunta Covi, empezando el primer CSS con

    * { padding:0; margin:0; }

    te ahorra los mayores quebraderos de cabeza.

    salu2

  • Este codigo se inserta en el archivo o se crea un .css ?

  • Muy interesante. Yo actualmente utilizo YUI pero vamos a probarlo tambien con Anieto2k.-
    Saludos!

  • Como dicen por ahí, la manera más simple de resetar, es con la archiconocida línea de:

    *{margin:0;padding:0}

    Pero para los que les guste todo lo contrario, y tenerlo todo, todito, perfectamente definido, el Reset CSS más completo que puedas imaginar, lo ha creado Objetivo Creativo ;)

    Enlace al artículo donde lo presento:
    http://blog.objetivocreativo.com/version-final-reset-css-v11/

  • de lo leido saco algunas ideas que creo que deberian comentarse, como por ejemplo:

    - la regla *{margin:0; padding=0}
    Si con el selector * podemos seleccionar todos los elementos de XHTML porque no introducir las reglas de CSS ahi directametne en lugar de ir nombrando uno por uno cada salector? si la regla es valida para ese selector se aplicara, si no pasara al siguiente y punto no? entonces, porque todo el mundo recomienta aplicar el reseteo a cada selector por separado?

    - font-size:100%
    Porque se utilizan porcentajes para el texto que es una unidad relativa, en lugar de utilizar una unidad exacta como px o pt ?? si en este archivho estamos reseteando toda la configuracion por defecto del CSS en el navegador, tendremos que darle un valor fijo de primeras para que el resto de medidas se puedan relativizar conforme a este valor fijo no es asi?

    - yo utilizo el reset de yahoo, yo el de Eric Meyer….
    …esto si que me parece una paranolla XD, a ver, si es un reseteo todos los valores del navegador se inicializaran a los mismos valores no?…entonces como es que existen diferentes archivos de reseteo?!??

    agradeceria que me resolvierais estas dudas que creo que tb son interesantes para todos, gracias^^

    por cierto anieto2k es la primera vez que escribo en tu blog, aunque no lo leo con frequencia esta claro que si es uno a tener como referencia, buen trabajo^^

    espero que dentro de poco mi blog sea igual de bueno jeje

  • @wili: Buenas Wili, voy a intentar responder a todas las dudas que planteas.

    - la regla *{margin:0; padding=0}
    Generalmente se hace para especificar más los estilos que se han de redefinir. Al usar el selector universal, estamos aplicando estilos a elementos que no requieren estos estilos (por que quizas no tengan problemas con otros navegadores). De esta forma, aplicamos lo justo a cada elemento.

    - font-size:100%
    Esto lo que hace es obligarte a usar tu propio tamaño de fuente. Al resetear las fuentes hacemos que esto dependa completamente de nosotros y así tengamos mayor control sobre ellas. Si pusieramos un tamaño fijo, tendríamos que definirlo de nuevo para cada elemento. De esta forma, definiendo el tamaño del padre tenemos ya el tamaño de lo hijos.

    - yo utilizo el reset de yahoo, yo el de Eric Meyer….
    Principalmente por que hay diferentes interpretaciones del mismo planteamiento. Basicamente todos realizan la misma función aunque no de la misma forma.

    Espero que te haya servido y que te pases por aquí más frecuentemente.

    Saludos

  • wenas de nuevo aNieto2K y gracias por tus respuestas^^…aunque hay algo que no me queda claro.

    Entiendo que el “font-size:100%” es para darle tamaño al padre como tu dices, pero precisamente por eso no entiendo que se utilice la medida en porcentaje en lugar de una unidad fija como px o pt…si ponemos un porcentaje sera un porcentaje con respecto a algo no? cual es ese algo? o es que nosotros tenemos que definir despues en nuestra hoja de estilos el tamaño fijo del padre?

    de nuevo gracias por tu atencion

  • @wili: Por defecto los navegadores tienen un valor estático definido para 100%, aunque no es por esto que se pone.

    La idea es hacer que todos los elementos tengan el 100% sobre un padre, lo que hace necesario que establezcamos un tamaño para el body y sus hijos siempre tendrán el valor 100% asociado a no ser que los definamos nosotros mismos.

    Saludos

  • Hola,

    Tienes un blog tremendamente bueno. Utilísimo.

    En el tema del reseteo de CSS, tengo un apunte o mejor una duda:
    Con la propiedad “vertical-align: baseline” he visto que dan problemas con “rowspan” en tablas en Firefox 3. También “border” es irregular. Esto ocurre al definir elementos al principio de la css.

    ¿Alguien tiene idea de porqué sucede esto?

    Saludos.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.