Drukowanie CSS - reguła @media

Możesz użyć CSS, aby zmienić wygląd strony internetowej, gdy jest drukowana na papierze. Możesz określić jedną czcionkę dla wersji ekranowej, a drugą dla wersji drukowanej.

Widzieliście regułę @media w poprzednich rozdziałach. Ta reguła umożliwia określenie innego stylu dla różnych mediów. Możesz więc zdefiniować różne reguły dla ekranu i drukarki.

Poniższy przykład określa różne rodziny czcionek dla ekranu i drukowania. Następny CSS używa tego samego rozmiaru czcionki zarówno dla ekranu, jak i drukarki.

<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>

Jeśli definiujesz swój arkusz stylów w oddzielnym pliku, możesz również użyć atrybutu media podczas łączenia z zewnętrznym arkuszem stylów -

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