Toqueteando ayer otro poco los estilos descubrí que sólo hay 5 tipos de fuentes genéricos, como si llevas cinco años conduciendo y ayer encuentras el mando del limpia trasero.

Podría ser útil si se mostrasen igual en todos los navegadores, pero como siempre el IE no muestra los resultados como el firefox y el chrome. Sólo he puesto un estilo condicional por el tamaño para el IE, A mí me vale con que sean fuentes distintas.

Ejemplos de los 5 tipos genéricos.

• Fuente serif

  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

• Fuente sans-serif

  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

• Fuente cursive

  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

• Fuente fantasy

  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

• Fuente monospace

  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

He descubierto los seudo elementos y las seudo clases de CSS, algunas ya las conocía, pero otras se ven poco y me han parecido muy vistosas.

• Seudo elementos
  • :first-line o primera línea
  • :first-letter o primera línea
  • :before y :alter o elementos anteriores o posteriores
• Seudo clases
  • :first-child o elemento hijo
  • :link , :visited y :hover son los conocidos para los enlaces, los enlaces visitados y los enlaces al poner el puntero encima.

El que hoy empiezo a usar es el :first-letter y de momento sólo en los encabezados h2 y h3. Con los div no me funciona, pero seguiré buscando.

La primera prueba ha sido eliminar la hoja de estilos e incluir los mismos en la cabecera quitando el enlace relativo

<link rel="stylesheet" href="http://www.zancajo.com/.../style.css" type="text/css" media="screen" />

y añadiendo los estilos sin archivo.css

<style type="text/css">/*
Theme Name:	Z2009-2
Description:Modificación del tema WordPress Classic.
*/

*{margin:0;padding:0;}
...

</style>

Así imprime la página bien pero, pensando en economizar el tráfico, cada vez se descargará todo el código y la solución es importar el archivo y todo OK

<style type="text/css">
@import url("http://www.zancajo.com/.../style.css");
</style>

Parece una tontería, pero hasta el ahorro en el número de páginas se nota.

Creamos un div y en el estilo le indicamos donde y como quedarse. Sin archivo de estilos (.css) sería:
<div style="position:fixed; bottom:10px; right:10px;"><img src="tu_carpeta/tu_imagen.gif" alt="" /></div>

Si quieres que sea con css sería en el documento html

<div class="nombre_de_clase"><img src="tu_carpeta/tu_imagen.gif" alt="" /></div>

o

<div id="nombre_de_clase"><img src="tu_carpeta/tu_imagen.gif" alt="" /></div>


Y en el archivo de estilos (.css) para la primera opción

.nombre_de_clase{position:fixed; bottom:10px; right:10px;}

o para la segunda

#nombre_de_clase{position:fixed; bottom:10px; right:10px;}


Lo normal sería hacerlo en la hoja de estilos.
La imagen sería esta

Ahora la ponemos un borde de 3pixel rojo ( border:3px solid #FF0000; )

Ahora separo el borde (padding:5px o 10px)

Podría poner un fondo (background-color:#000000) pero sólo voy a modificar el tipo de borde por uno doble (border:3px double #FF0000)

de puntos (border:3px dotted #FF0000)

de rayas (border:3px dashed #FF0000)

o como los botones (border:3px inset #FF0000) (border:3px outset #FF0000)

También se puede jugar con los bordes haciendo cada uno de una forma y separando unos más que otros. Yo me quedo con esta