Aplicar los estilos a diferentes dispositivos con CSS

Por lo general cuando pensamos en los estilos, sólo pensamos en ellos para modificar la apariencia de nuestras páginas por la pantalla de un PC, sin embargo hay otros dispositivos en los que los usuarios pueden visitar nuestra Web como por ejemplo sacándola por la impresora o en los cada vez mas comunes ordenadores de mano. Cuantas veces nos ha pasado que al imprimir una página Web, está aparece ilegible?
Los estilos además de dar formato a la Web cuando sale por pantalla, también lo puede dar para cuando salga por impresora o por otras salidas y lo que es más útil, ser independientes unos de otros.

Para que los estilos se apliquen en una salida u otra debemos usar el atributo "media", este atributo tiene los siguientes valores reconocidos actualmente por el W3C:

screen	Para pantallas de ordenador no paginadas
tty	Para medios de comunicación que usan una rejilla de carácter de diapasón fijo, como teletipos, terminales, o dispositivos portátiles con capacidades de demostración limitadas.
tv	Para dispositivos de tipo televisión (resolución baja, scroll limitado, ...)
projection	Para proyectores
handheld	Para dispositivos de mano (pequeña pantalla, limitada paleta de colores o monocroma, ...)
print	Para salida por dispositivos de página, opacos o vista preliminar
braille	Para dispositivos braille
embossed	Para impresoras braille
aural	Para salida por dispositivos de audio
all	Para todos los dispositivos

Aunque esta lista puede ampliarse en un futuro.

Si quisiéramos definir los estilos para mas de un dispositivo, deberíamos enumerarlos separados por comas, por ejemplo para los dispositivos de pantalla e impresora: media="print, screen"

Este atributo puede ser establecido de las siguientes formas:

1. directamente al ser llamado un archivo de estilos con la etiqueta "link":


2. Dentro del texto CSS:

<style type="text/css">
@media screen, handheld{
/*Aquí ponemos los estilos para la salida por pantalla y proyectores, por ejemplo el color de fondo blanco*/
body{background-color:#ffffff}
}
@media all{
/*Aquí ponemos los estilos para la salida para todos los dispositivos*/

}
<style>

3. Al llamar a un archivo de estilos dentro del texto CSS con "@import":
Esta última opción no la recomendamos, ya que la instrucción "@import" no es reconocida por el Internet Explorer de Microsoft.

Usuarios que han visto este tema también han visto...

- Crear un menú dinámico con CSS
- Modelo de cajas en CSS
- Resaltar una porción de Texto con CSS
- Redefinición de etiquetas
- Qué son las capas

- Versión imprimible de este documento
- Enviar por e-mail este documento