Manual CSS – Paso 7 > Colocando el contenido

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.

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.

AVISO: esta publicación es de hace dos 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.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (1 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar