Jump to content

Resetear todos los estilos CSS | Mejorar compatibilidad de navegadores


Sylfaen

Publicaciones recomendadas

Resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados.

 

Así, los márgenes, espacios y tamaños de fuente de títulos (entre otros) pueden tener diferentes propiedades por defecto de un navegador a otro y provocar que se vean diferentes por mucho formato que le demos nosotros. Al resetear el CSS digamos que ponemos a cero esos valores por defecto y podemos empezar desde el principio a dar el formato que nosotros queramos, controlando el aspecto de cada elemento mucho mejor. Para resetear el CSS se escribe un código CSS al principio de tu hoja de estilos, y después todo lo que tu vayas creando. El código de Eric Meyer es una de las formas más conocidas que tenemos de resetear el CSS de nuestra web, muy efectivo:

 

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 {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-weight: inherit;
       font-style: inherit;
       font-size: 100%;
       font-family: inherit;
       vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
       outline: 0;
}
body {
       line-height: 1;
       color: black;
       background: white;
}
ol, ul {
       list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
       border-collapse: separate;
       border-spacing: 0;
}
caption, th, td {
       text-align: left;
       font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
       content: "";
}
blockquote, q {
       quotes: "" "";
}

Enlace al comentario
Compartir en otros sitios web

Otra codigo de ejemplo para reset.css

 

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img { 
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
} 

Enlace al comentario
Compartir en otros sitios web

Crear una cuenta o conéctate para comentar

Tienes que ser miembro para dejar un comentario

Crear una cuenta

Regístrese para obtener una cuenta nueva en nuestra comunidad. ¡Es fácil!

Registrar una nueva cuenta

Conectar

¿Ya tienes una cuenta? Conéctate aquí.

Conectar ahora
×
×
  • Crear nuevo...