Bueno, pues ya que una lleva un tiempecillo maquetando páginas web, haciendo css y demás, pues de vez en cuando pondré alguna cosilla de las que he aprendido al respecto, que espero os sirva. Y como en la maquetación también hay estilos y formas de ver las cosas, quiero que quede claro que éste no va a ser para nada un apartado de cómo deberían hacerse las cosas.. cada uno que opine si le es útil o no.

Nota importante
Quede constancia de que en un principio dejaré de lado el usar las css para construir por completo la página web y estos tutoriales se basarán exclusivamente en maquetación con tablas y el uso de css casi exclusivamente para dar formato al texto. Espero más adelante y a medida que me sienta cómoda empezar un nuevo post sobre la maquetación sin tablas.

Viva el pixel invisible!!!

Sabéis que si dejáis la fila de una tabla vacía, el navegador le dará una altura predeterminada, unos 19 o 20 píxeles... ¿qué hacer si quieres que la fila tenga una altura de, por ejemplo, 7 píxeles?

Pues crear un píxel invisible. En photoshop creáis un nuevo archivo de 1x1 pixels con fondo transparente. Le dais a Guardar para web y lo salváis como .gif, permitiendo tranparencia. De esta manera tenéis una imagen invisible que podéis distorsionar como queráis, tanto en altura como anchura.

Así que dentro de la fila de la tabla metéis esta imagen invisible, con una altura de 7 píxeles, y la fila pasará a tener esta altura.

OJO!!! Pongamos que por cualquier motivo tenéis una fila formada por varios <td>, algo así:

y queréis que esa fila tenga una altura de 1 píxel. Pues no bastaría con poner un píxel invisible en el primer <td> de la fila, ya que la altura de la misma seguiría siendo de unos 20 píxeles... hay que meter la imagen en todos los <td>

Bueno, y lo mismo que usarse para dar altura se puede usar para dar anchura a los <td>

Seguiré informando

Ahora hablemos de texto. Yo he definido un texto por defecto para el <td>, y es como sigue (en negro explico lo que define, no debe escribirse en la hoja de estilos):

td{
COLOR:#000000;     color de texto
FONT-SIZE:12px;    tamaño de texto
FONT-FAMILY;     verdana, Arial, Helvetica, sans-serif, Geneva; tipografía
}

Es decir, cada vez que escriba dentro de una tabla (y este site está diseñado con tablas), el texto que obtendré sin tener que poner molestas etiquetas <font> será una verdana (y si el usuario no la tiene será arial y así sucesivamente), de color negro y de 12 píxeles de tamaño.

¿por qué por ejemplo no defino atributos tales como FONT-WEIGHT o TEXT-DECORATION, es decir, si el texto tiene negrita o no o si tiene decoración o no? Pues porque por defecto los valores de estos atributos son normal y none respectivamente, es decir, obtengo un texto normal y sin decoración, que es lo que quiero y por lo tanto no me hace falta definir.

LINKS

Bien, lo siguiente fue sopesar cómo queríamos que fueran nuestros links. Decidí que fueran del mismo color que el texto que no es link, pero como por supuesto deben diferenciarse en algo del texto sin link, decidí que estuvieran subrayados.

Los links tienen 4 estados:

link --> estado inicial
hover --> cuando el puntero del ratón pasa por encima
active --> cuando se hace click sobre el link
visited --> cuando es un link que ya se ha visitado

Podéis definir que cuando se pase el puntero sobre vuestros links éstos pasen de ser negros a rojos, o de no tener subrayado a tenerlo, o que cambie el tamaño del texto, etc., etc.

Pero yo soy muy sosa y esta vez he decidido que sean iguales en todos sus estados, es decir, verdana, de 12 píxeles, color negro y subrayados... así que se podría definir así (si seguís leyendo veréis que se puede resumir aún más):

a:link{color:#000000;}
a:visited{color:#000000;}
a:active{color:#000000;}
a:hover{color:#000000;}


¿Y por qué no defines el tamaño del texto, su familia y que esté subrayado?

Pues porque al haber definido ya cómo sería cualquier texto escrito dentro de un <td> como de tamaño 12px y verdana, los links, que  están escritos dentro de <td>, heredan automáticamente estas características y no tengo que volver a escribirlas.
En cuanto al subrayado, el valor por defecto de TEXT-DECORATION en los links es UNDERLINE, es decir, subrayado, así que no tengo por qué especificarlo.


¿Y por qué entonces sí que vuelves a especificar que el texto sea negro?

Porque el atributo COLOR en los links sí que tiene unos valores por defecto (ya conocéis esos azulones en su estado normal o color vino de los links visitados), así que tengo que poner que sean negros para que no me ponga los colores por defecto. 


¿Hace falta escribir todos los estados de los links si éstos van a ser iguales?

No. Las css nos permiten agrupar características similares para todos los estados, y nos bastará con escribir lo siguiente, que sustituye a lo escrito arriba:

a{color:#000000;}

¿No es impresionante saber que el estilo de todos los links que un site puede definirse en algo tan corto? ¿a que vale la pena dejar los tags <font> y demás?

Y si, por ejemplo, quieres que todos los links tengan estas características menos en el estado hover, en el que quieres que el texto pase a ser rojo, tenga un tamaño de 16px y no esté subrayado, escribes lo siguiente:

a{color:#000000;}
a:hover{color:#FF0000;font-size:16px;text-decoration:none;}

mañana sigo !!