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

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> 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