Stampa CSS - Regola @media

Puoi utilizzare CSS per modificare l'aspetto della tua pagina web quando viene stampata su carta. È possibile specificare un carattere per la versione dello schermo e un altro per la versione stampata.

Hai visto la regola @media nei capitoli precedenti. Questa regola consente di specificare uno stile diverso per media diversi. Quindi, puoi definire regole diverse per lo schermo e una stampante.

L'esempio seguente specifica diverse famiglie di caratteri per schermo e stampa. Il prossimo CSS utilizza la stessa dimensione del carattere sia per lo schermo che per la stampante.

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

Se stai definendo il tuo foglio di stile in un file separato, puoi anche utilizzare l'attributo media quando ti colleghi a un foglio di stile esterno -

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">