Cuando se han colocado correctamente los contenedores y se muestran correctamente en todos los navegadores, ya pueden quitarse las alturas. A continuación se puede colocar algo de texto de muestra en cada contenedor. El contenido debería ser semánticamente correcto – o sea, utilizar h1, h2 etc. para los encabezados, párrafo para el texto, etc. Una vez mas, los resultados deben comprobarse en los navegadores.
- Contenedores con texto de muestra
- Resultados en Browser Cam (antes debes crear un proyecto)
Índice de contenidos
Una nota sobre los tamaños de fuente
El tamaño de fuente es un asunto incendiario. Todo el mundo tiene una opinión acerca de lo que está bien y de lo que no. Actualmente parece haber dos elecciones principales:
Deja tranquilos los tamaños de fuente
No definas ningún tamaño de fuente. En vez de eso deja que las hojas de estilo del navegador (http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#browser) o las hojas de estilo del usuario (http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#user) determinen los tamaños de fuente.
Usa unidades relativas para definir tamaños de fuente
Si se tiene que usar tamaño de fuente este es el mejor método. Los tamaños de fuente se establecen por porcentaje o unidades em. Pueden redimensionarse en casi todos los navegadores y están dirigidas por la preferencia de tamaño de fuente del usuario, por lo que los usuarios pueden ajustar el tamaño del contenido a sus necesidades.
Los tamaños de fuente relativos son fáciles de implantar utilizando uno de estos tres métodos o combinaciones entre ellos:
Metodo de tamaño relativo de fuente 1 – aplicando tamaños de fuente a los contenedores
Cuando tienes el contenido colocado en los contenedores puedes especificar directamente tamaños de fuente en el contenedor y/o los elementos dentro del contenedor. Esto significa que tendrás un alto nivel de control sobre los elementos de toda la plantilla. Por ejemplo, a un elemento <h1> se le pueden aplicar diferentes tamaños dependiendo de su contenedor:
#navigation h1
{
font-size: 120%;
}
#content h1
{
font-size: 140%;
}
Metodo de tamaño relativo de fuente 2- el cuerpo
Se puede aplicar un tamaño relativo al elemento del cuerpo, lo que significa que todos los demás elementos utilizarán esta medida como base.
body
{
font-size: 85%;
}
Algunos navegadores no aplican esta regla con consistencia – especialmente cuando el contenido está dentro de tablas. Esto es especialmente cierto si tu tipo de documento (docytype) está establecido al modo Quirks.
Metodo de tamaño relativo de fuente 3 – selectores de tipo
También puedes aplicar tamaños relativos de fuente directamente a los elementos HTML. Por ejemplo:
p
{
font-size: 85%;
}
h1
{
font-size: 150%;
}
Sin enbargo, puede haber problemas con este método. Por ejemplo, una regla como la siguiente puede provocar problemas de herencia en listas jerarquizadas:
ul
{
font-size: 85%;
}
Cualquier contenido incluido en una lista desordenada puede escalarse a un 85% del tamaño por defecto del navegador del usuario. El problema sucede cuando hay una lista desordenada. El elemento de lista jerarquizada heredará el tamaño de fuente relativo y lo aplicará de nuevo, haciendo que los elementos de la lista jerarquizada se reduzcan un 72.25% (85% x 85% = 72.25%). Esto se puede solucionar fácilmente con otra regla que devuelva todos los elementos de lista jerarquizada a un tamaño de fuente del 85%:
ul ul
{
font-size: 100%;
}
Normalmente, lo mas seguro es utilizar una combinación de los métodos 1 y 2. Esto implica establecer un porcentaje base al tamaño de fuente en el cuerpo y luego un porcentaje o tamaños de fuente basados en em sobre los elementos relevantes que se requiera.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
