Una de las características más importantes de las hojas de estilo es que se pueden utilizar en una variedad de medios, como páginas, pantallas, sintetizadores electrónicos, etc. Ciertas propiedades solo pueden funcionar en medios específicos. Por ejemplo, la propiedad "tamaño de fuente" solo es válida en tipos de medios desplazables (pantalla).
La declaración de un atributo de medios se puede introducir usando @import o @media:
Aquí hay una cita:
@importar voz (loudvoice.css);
@media imprimir {
/* la hoja de estilo para imprimir va aquí */
}
Los medios también se pueden introducir en el marcado del documento:
Aquí hay una cita:
<enlace rel="hoja de estilo" tipo="texto/css" media="imprimir" href="foo.css">
Se puede ver que la diferencia entre @import y @media es que el primero introduce hojas de estilo externas para los tipos de medios, mientras que el segundo introduce directamente atributos de medios. El método para usar @import es agregar la dirección URL del archivo de hoja de estilo a @import y luego agregar el tipo de medio. Varios medios pueden compartir una hoja de estilo y los tipos de medios están separados por separadores ",". El uso de @media es poner el tipo de medio primero, y otras reglas son básicamente las mismas que el conjunto de reglas. Los distintos tipos de medios se enumeran a continuación:
PANTALLA: Se refiere a la pantalla de la computadora.
IMPRESIÓN: Se refiere a medios opacos utilizados con impresoras.
PROYECCIÓN: se refiere al proyecto utilizado para la visualización.
BRAILLE: Sistema Braille, se refiere a material impreso con efecto táctil.
AURAL: se refiere a un sintetizador de voz electrónico.
TV: Se refiere a medios de tipo televisión.
PORTÁTIL: se refiere a un dispositivo de visualización portátil (pantalla pequeña, monocromática)
TODOS: Apto para todos los medios.