CSS Reglas

/*
Reglas: Orden de trabajo CSS
1. Se definen los estilos para ETIQUETAS html, Ejemplo: header, footer, div, a, p, etc
2. Se definen los estilos unicos (id) ejemplo: #nombre-id{estilos} en el html se llaman
por medio id ejemplos <div id="publicidad"></div>
3. Se definen los estilos para las CLASES (class), las clases son elementos que se pueden
repetir n veces en el html. Ejemplo  .nombre-clase{Estilo}, en el html se llman por medio
del atributo class. Ejemplo <div class=""> </div>
4. Todos los estilos se ordenan segun el orden de las etiquetas en el html.
siempre es importante considerar que se debe mantener el orden de grupo, etiquetas, ids, clases.
5. Los atributos se declaran den la sigueinte forma:{atributo1:valor1; atributo2:valor2;...;atributoN:valorN;}
6. Todos los atributos se orden alfabeticamente, width, color, display. En el orden color, display, width
7. Los estilos para las etiquetas html y body son los primeros en el orden.
8. En el body declarar un tamanio de fuente global.
9. Los estilos que resetean los elementos html, estos van de primero.
*/ 

FUENTES Y TIPOGRAFIA
Las páginas webs a veces están limitadas por las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado que no todos los navegadores y sistemas operativos incluyen el mismo número de fuentes, y las tipografías de los sistemas operativos no serán las mismas. Por ello si queremos aplicar cualquier fuente a nuestra página debemos hacer lo siguiente:

Lo primero es descargar la fuente en formato True Type, cuya extensión es ttf. Una vez tengamos la fuente en ttf, debemos convertirla también a formato Open Type Embebido, es decir eot, o formato Web Open Font (woff) para tener compatibilidad con Internet explorer, firefox, google crome y otros navegadores. Para llevar a cabo dicha conversión existen multitud de programas y páginas gratuitas, tan solo debemos buscar por las palabras “ttf to eot” o “ttf to woff” en cualquier buscador para encontrar una.

  Pagina sugerida para transformar los ttf: http://www.fontsquirrel.com/tools/webfont-generator
  Paginas sugeridas para descargar fuentes:
  http://www.google.com/fonts/
  http://best-font.com/top.html

Una vez tengamos la fuente en ambos formatos debemos utilizar en CSS la directiva @font-face para declarar nuestra nueva fuente, por ejemplo si hemos descargado la fuente “futurastd-light-webfont.ttf”, debemos colocar el siguiente código en nuestra hoja de estilos:

1	@font-face {

2	font-family: "Futura";

3	font-style: normal;

4	font-weight: normal;

5	src: local("?"), url("/fonts/futurastd-light-webfont.woff") format("woff"), url("/fonts/futurastd-light-webfont.ttf") format("truetype");

6

}

Siendo font-family el nombre que utilizaremos en el resto de la hoja de estilos para referenciar a nuestra nueva fuente.

A continuación un ejemplo de como utilizar nuestra nueva fuente que hemos declarado arriba:

1

p {

2	font-family: "Futura";

3

}

De esta forma todas las etiquetas “p” tendrán como estilo nuestra nueva fuente declarada como Futura. 

¿Qué diferencia hay entre píxeles y ems?

La principal diferencia se basa en el problema de los píxeles. Cuando nos llega el diseño en photoshop, fireworks,… de la web que tenemos que maquetar, ésta suele estar medida o cortada en píxeles. Y cual es el problema? Pues es que algunos navegadores interpretan los píxeles ligeramente diferente a sus homólogos lo que hace que una web se pueda ver distinta de un navegador a otro. Este problema nos lo solemos encontrar no solo con esto, sino con muchas otras cosas, como propiedades de CSS que se interpretan de forma distinta en cada navegador. Hay que tener en cuanta, que el pixel es una medida relativa al lienzo, en comparación con el em, que os lo contamos a continuación.

En cambio la medida en em  es una medida flexible. Cuando abrimos una web que ha sido maquetada con valores em y queremos ampliarla para ver el texto más grande, ya sea por problema de visión, por comodidad, etc, no solo nos crecerá el texto, sino que toda la web se ampliará de forma homogénea, ampliando o reduciendo todo el inteface web. Así, si un usuario ha modificado los valores por defecto de su explorador, para ver el texto más grande, no solo se le ampliará el texto, sino toda la interface, haciendo más cómoda la navegación por el sitio, ya que los em cogen como referencia la altura de la fuente definida en el documento consiguiendo de esta forma que si un usuario aumenta el tamaño del texto, todo se ampliará de igual forma.