JMiur [E]

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.

9 comentarios:

Graciela  

"Sin CSS, una página está desnuda pero, aún así, algo de pudor le queda" :D...JMIUR lo has explicado maravilloso, ésto lo tendré guardado ¿podrías seguir con las desnudeces con algo de pudor???, ésto sí me parece interesante!!! mis besos

Responder
JMiur  

Intentaré seguir con lo mismo, Graciela ... con pudor, claro :D

Responder
Gabriel  

Tengo una duda existencial: ¿Existe alguna manera de que en un blog se muestren por defecto en negrita ciertas palabras seleccionadas por el administrador (por ejemplo, que al aparecer la palabra "atómico" siempre se muestre en negrita)?
Muchas gracias.

Responder
JMiur  

Con CSS, yal vez, usando pseudo-elementos pero, la verdad, lo dudo mucho.

Podría hacerse con algún script, aunque tampoco sería tan sencillo.

Responder
egoloco  

mas justo que esto, imposible! es la entrada que necesitaba para "arrestar" a la duda que me asalta :D

Tengo en el blog definiciones en el CSS que, creo yo, son demasiadas para un solo objeto que con unas pocas bastarian, pero veo que para saber si se pueden quitar habria que probar...


un ejemplo es el body:

body {
background: #7A1A1A url(img01.gif) repeat left top;
color:#000;
font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0 auto;
text-align:center;
text-transform:case insensitive;
}


Lo que esta en negrita es necesario?
y asi me pregunto lo mismo para otras...

Responder
JMiur  

egoloco:

font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
son declaraciones innecesarias

padding:0 auto;
es una declaracion equivocada ya que padding no acepta el valor auto por lo tanto, no se ejecuta; si quisiera que se ejecutara, debería escribir padding:0;

text-transform:case insensitive;
tambien es una declaración errónea ya que esos valores no son aceptados por lo tanto, que este allí o no es indiferente, no hace nada y los navegadores la saltean.

font-size: small;
Depende. Define un valor inicial que define tamaños y separaciones, habría que ver cómo influye en el resto de las cosas. siempre es bueno definir el tamaño de la fuente inicial así como la familia a la que pertenece aunquem en lo personal, prefiero hacerlo en pixeles para que los navegadores usen un valor común a todos. Samlla, equivale maás omenos a 13 pixeles en ese tipo de fuente.

Responder
egoloco  

Gracias JMuir!!!! Había visto este tipo de declaraciones y ya me parecia que tanto era innecesario, de cualquier manera voy a probar :D

Cualquier cosa regreso x esta entrada para no enloquecer tanto...

Responder
La hormiguita  

Muy bueno....lo guardo, guardo tanto y después no lo encuentro :(

Responder
Gilberto TORRES ALCIA  

Jmiur. Te felicito eres muy bueno programando En css!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR