Las propiedades CSS por defecto

Sin CSS, una página está desnuda pero, aún así, algo de pudor le queda ya que los navegadores establecen una serie de propiedades por defecto que serán aplicadas a menos que las cambiemos. Tienen ciertas diferencias según se trate de un navegador u otro pero, en general, son justamente esas propiedades no-identificadas, las que nos causan problemas porque no solemos tenerlas en cuenta.

El body de una página es donde están definidas por defecto algunas de esas propiedades Es más o menos conocido que el fondo (background) de una página es blanco y que el color de los textos (color) es negro pero tiene algunas más que suelen perturbar, por ejemplo, el margen (margin):
body {
background: #FFF url() repeat left top;
color: #000;
font-family: Times New Roman;
font-size: 16px;
margin: 8px;
}
Los enlaces también tienen propiedades por defecto, son de color azul y se muestran subrayados.

Todas las etiquetas de títulos tienen fuentes en negrita (font-weight:bold) y además, un tamaño que está en relación al tamaño de la fuente definida en el body. Para colmo, también tiene márgenes:
h1 font-size: 2em; margin: 21px 0;
h2 font-size: 1.5em; margin: 19px 0;
h3 font-size: 1.2em; margin: 19px 0;
h4 font-size: 1em; margin: 21px 0;
h5 font-size: .8em; margin: 21px 0;
h6 font-size: .7em; margin: 26px 0;
Ni las etiquetas DIV ni SPAN tienen propiedades por defecto pero si las tiene la etiqueta P; esta posee un márgen superior e inferior igual al tamaño de la fuente por defecto (margin:1em 0).

Más etiquetas con propiedades pre-definidas:
blockquote margin: 16px 40px;
pre font-family: monospace; margin: 16px 0;
Las imágenes que sirven como enlaces tienen un borde de color igual al color de los enlaces (border: 2px solid #0000EE)

Probablemente, las etiquetas que causan más conflictos son las listas ya que tanto OL como UL tienen varias propiedades incluyendo márgenes y separaciones:
ol margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: decimal;
ul margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: disc;
Es muy común leer que para evitar que todas estas propiedades no nos molesten, lo mejor es "resetearlas", es decir, poner al inicio de nuestra plantilla, algunas definiciones que "limpien" esas cosas. Hay decenas de ejemplos que pueden verse online pero, para un uso normal, no es necesario tanto, basta agregar unas pocas, justo al inicio de nuestra plantilla, dentro de etiquetas <style> </style> o de <b:skin> </b:skin>.
* {margin: 0; padding: 0;}

html, body {height: 100%;}
body {height: 100%;}

a, a:visited, a:link, a:active  {outline: none; text-decoration: none;}
a:hover {outline: none; text-decoration: none;}
a img {border: none; outline: none; text-decoration: none;}

object, embed {outline: none;}

ol, ul, li {list-style: none;}
Por supuesto, esto tendrá que verse caso por caso ya que es posible que algunas de las propiedades por defecto nos sean útiles y por lo tanto, no nos interese sacarlas pero, siempre es bueno saber que allí están y, cuando comenzamos un sitio nuevo, lo mejor es eliminarlas a todas y tomarnos el trabajo de definirlas una por una.

0 comentarios:

Publicar un comentario