In CSS - Quy tắc @media

Bạn có thể sử dụng CSS để thay đổi giao diện trang web của mình khi nó được in trên giấy. Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in.

Bạn đã thấy quy tắc @media trong các chương trước. Quy tắc này cho phép bạn chỉ định kiểu khác nhau cho các phương tiện khác nhau. Vì vậy, bạn có thể xác định các quy tắc khác nhau cho màn hình và máy in.

Ví dụ dưới đây chỉ định các họ phông chữ khác nhau cho màn hình và bản in. CSS tiếp theo sử dụng cùng một kích thước phông chữ cho cả màn hình cũng như máy in.

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

Nếu bạn đang xác định biểu định kiểu của mình trong một tệp riêng, thì bạn cũng có thể sử dụng thuộc tính phương tiện khi liên kết với biểu định kiểu bên ngoài -

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