CSS Tipos de Medios

Especifica si el documento esta diseñado para el monitor, para ser impreso o para un sintetizador de voz.


Tipos de medios con CSS

Una de las caracteríticas más importantes de las hojas de estilo es que especifican como se debe presentar un documento para los diferentes tipos de medios:

  • En la Pantalla
  • Sobre el papel
  • Con un sintetizador de voz
  • En un dispositivo braille
  • Etc.


Especificaciones de los tipos de medios

Hay dos maneras de especificar las hojas de estilos dependientes de los medios:

Sintaxis

Desde una hoja de estilo con las reglas: @import o @media

@import url("archivo.css" ) tipo de medio;

@media tipo de medio{/* la hoja de estilo para el tipo de medio va aquí */}

Sintaxis

Especificando el medio de destino dentro del lenguaje del documento

<html>
<head>
<title>Vínculo a un tipo de medio</title>
<link rel="stylesheet" type="text/css" media= "tipo_medio1, tipo_medio2" href="archivo.css">
</head>

<body>
<p>Texto, texto, texto</p>
</body>
</html>

Los posibles valores para tipos de medios

all | brille | embossed | handheld | print | projection | screen | speech | tty | tv

La regla @media

Una regla @media especifica los tipos de medios.

Ejemplo

Veamos unos ejemplos del uso de la regla @media

@media print{body { font-size: 10pt }}

@media screen{body { font-size: 12px }}

@media screen, print{body { line-height: 1.2 }}

Tipos de medios reconocidos

TiposDescripción
all Todos los dispositivos.
braille Dispositivos táctiles braille.
embossed Impresoras braille.
handheld Dispositivos de mano(pantallas pequeñas, ancho de banda reducidos, etc.).
print Para documentos paginados y mostrados en vista de impresión.
projection Dispositivos de proyección de presentaciones.
screen Pantallas a color de equipos informáticos.
speech Para sintetizadores de voz.
tty Dispositivos de visualización con capacidades limitadas.
tv Televisores.


<<< Guía de referencia de CSS Home de CSS >>>

En la Web