Índice

La hoja de estilos CSS

Como hemos indicado anteriormente, esta plantilla utiliza una hoja de estilos CSS llamada blogPostStyle.css.

Esta hoja de estilos CSS contiene en primer lugar todas las reglas CSS comunes a los diseños, sea cual sea el medio en que se muestren.

En el panel Diseñador de CSS, seleccione la fuente blogPostStyle.css, y haga clic en la consulta de medios GLOBAL.

En la pestaña Selectores verá todos los selectores comunes:

images/22OWT-04.PNG

En la fila 174 se encuentra la consulta multimedia para la vista específica en las tabletas.

@media screen and (max-width:769px) { ... }

Esta consulta multimedia está hecha para pantallas de ancho inferior a 769 píxeles.

Las reglas CSS adaptadas se aplican sobre todo al contenedor principal <div #mainwrapper> y a los contenedores de estructura, <div #content>, <section #sidebar>, <nav> y <footer>.

En el panel Diseñador de CSS, seleccione la fuente blogPostStyle.css, y haga clic en la consulta multimedia screen and (max-width:769px).

En la pestaña Selectores, verá todos los selectores de esta consulta multimedia:

images/22OWT-05.PNG

Por último, en la fila 238 se encuentra la consulta multimedia para la vista específica en smartphones.

@media screen and (max-width:480px) { ... }

Esta consulta se hace para pantallas cuyo ancho no excede los 480 píxeles.

En el panel Diseñador de CSS, seleccione la fuente blogPostStyle.css, y haga clic en la consulta multimedia screen and (max-width:480px).

En la pestaña Selectores ...