Medios CSS
Medios CSS  |
|---|
Medios CSS. Son hojas de estilos que indican diferentes medios de dispositivos.
Sumario
Características
Una de las características más importantes de las hojas de estilos CSS es que permiten indicar diferentes reglas para diferentes medios o dispositivos: pantalla, impresora, móviles, proyector, etc. Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio.
La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripción:
Tabla 1-1. Medios definidos por CSS
Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla] y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil). CSS permite definir reglas específicas para cada medio y reglas compartidas por varios o todos los medios. Existen varios métodos para indicar el medio en el que se deben aplicar las reglas.
Medios definidos con las reglas de tipo @media
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
El ejemplo anterior asigna un tamaño de letra de 13 píxel para la página que se muestra en pantalla y un tamaño de letra de 10 puntos para la página que se imprime. Por último, se indica un interlineado igual al 120% del tamaño de letra tanto para la página en pantalla como para la página impresa.
Medios definidos con las reglas de tipo @import
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS.
Medios definidos con la etiqueta
<link>
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print, handheld"
href="especial.css" />
Este ejemplo es muy similar al anterior: el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media=”screen”). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media=”print”) o al visualizarla en un dispositivo móvil (media=”handheld”), como por ejemplo en un iPhone.
Medios definidos mezclando varios métodos
Este último ejemplo mezcla los métodos descritos anteriormente:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos específicos para impresora */
}
La primera regla de tipo @import, indica el archivo CSS que se debe cargar para obtener los estilos con los que se muestra la página en pantalla. La segunda regla de tipo @media especifica directamente los estilos que se deben utilizar al imprimir la página web.
Fuente
- Libro "Introducción a CSS" del autor Javier Eguíluz Pérez, 20 de febrero de 2008. Los contenidos de este libro están bajo una licencia Creative Commons.
