Saltar navegación

Medios CSS

Antes de comezar...

Unha das características máis importantes das follas de estilos CSS é que permiten definir diferentes estilos para diferentes dispositivos: pantallas, impresoras, móbiles, proxectores, etc.

A seguinte táboa mostra o nome que CSS utiliza para identificar cada medio e a súa descrición:

Medio Descrición
all Todos os medios definidos
braille Dispositivos táctiles que empregan o sistema braille
embosed Impresoras braille
handheld Dispositivos de man: móbiles, PDA, etc.
print Impresoras e navegadores no modo "Vista Previa para Imprimir"
projection Proxectores e dispositivos para presentacións
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por persoas minusválidas
tty Dispositivos textuais limitados como teletipos e terminais de texto
tv Televisores e dispositivos con resolución baixa

Os medios máis utilizados actualmente son screen (para definir o aspecto da páxina en pantalla) e print (para definir o aspecto da páxina cando se imprime), seguidos de handheld (que define o aspecto da páxina cando se visualiza mediante un dispositivo móbil).

A gran vantaxe de CSS é que permite modificar os estilos dunha páxina en función do medio no que se visualiza. Vamos a ver dúas formas de especificar o medio CSS:

Medios definidos coas regras de tipo @media

As regras @media son un tipo especial de regra CSS que permiten indicar de forma directa o medio ou medios nos que se aplicarán os estilos incluídos na regra. Para especificar o medio no que se aplican os estilos, inclúese o seu nome despois de @media. Se os estilos se aplican a varios medios, inclúense os nomes de todos os medios separados por comas.

A continuación móstrase un exemplo sinxelo:

@media screen {
  body{ 
    color: red; 
  }
}

@media print {
  body { 
    color: black; 
  }
}

O exemplo anterior establece que a cor de letra da páxina cando se visualiza nunha pantalla debe ser vermella, pero si a imprimimos será de cor negra.

Medios definidos coa etiqueta link

Se se utiliza a etiqueta <link> para enlazar os arquivos CSS externos, pódese utilizar o atributo media para indicar o medio ou medios nos que se aplican os estilos de cada arquivo:

<!doctype html>
<html>
  <head> 
  ...
    <link rel="stylesheet" type="text/css" media="screen" href="basico.css">
    <link rel="stylesheet" type="text/css" media="print" href="impresora.css">
  ...
  </head>
  
  <body> 
   ....

Neste exemplo, o primeiro arquivo CSS tense en conta cando a páxina se visualiza na pantalla (media="screen"). Os estilos indicados no segundo arquivo CSS, aplícanse ao imprimir a páxina (media="print") .

Se a etiqueta <link> non indica o medio CSS, sobreenténdese que os estilos se deben aplicar a todos os medios, polo que é equivalente a indicar media="all".