Advanced Search

Normalizar CSS (Tantek Celik) + equiparar EMs y PXs

/ Published in: CSS
Save to your folder(s)
Versión traducida y con la mejora de equiparar EMs y PXs del undohtml.css de Tantek Celik

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. ******************************************************************************
  3. ******************************************************************************
  4. * Normalizar estilos XHTML de diferentes navegadores
  5. ******************************************************************************
  6. ******************************************************************************
  7. */
  8.  
  9. /* Trabajar con ems para especificar tamaños de fuente es la forma
  10.    más accesible de trabajar con textos porque todos los navegadores
  11.    incluido IE pueden escalar la tipografía sin problemas.
  12.    El problema suele ser que los diseñadores se encuentran más cómodos
  13.    trabajando con unidades px.
  14.    Una em representa el tamaño de la letra "m" en una fuente concreta.
  15.    Utilizando la hoja de estilos por defecto de los navegadores, 1em son más
  16.    o menos 16px. Si establecemos el tamaño del texto por defecto al 62.5% del
  17.    original, tendremos que 1em = 10px y así:
  18.    
  19.        0.9em = 9px;
  20.        1.2em = 12px;
  21.        2.3em = 23px;
  22.        ...
  23. */
  24. body { font-size: 62.5% }
  25.  
  26. /* Quitamos el subrayado de los links */
  27. :link,:visited { text-decoration:none }
  28.  
  29. /* Eliminamos las viñetas de las listas */
  30. ul,ol { list-style:none }
  31.  
  32. /* Evitar el tamaño inconsistente de los diferentes encabezados
  33.    y también etiquetas <pre> y <code> */
  34. h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
  35.  
  36. /* Evitar la asignación inconsistente de márgenes y rellenos a
  37.    diferentes elementos HTML  */
  38. ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
  39. { margin:0; padding:0 }
  40.  
  41. /* Evitar el borde azul en imágenes que son links */
  42. a img,:link img,:visited img { border:none }
  43.  
  44. /* Quitar la cursiva del elemento <address> */
  45. address { font-style:normal }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.