Qui tắc @media trong CSS




Bạn có thể sử dụng CSS để thay đổi bề mặt của Webpage khi nó được in trên giấy. Bạn có thể xác định một font để hiển thị trên màn hình và một font khác cho việc in.

Các chương trước đã trình bày về qui tắc @media trong CSS. Qui tắc này cho phép bạn xác định các Style khác nhau cho các thiết bị khác nhau. Do đó, bạn có thể định nghĩa các qui tắc khác nhau cho việc hiển thị trên màn hình hoặc khi in.

Ví dụ dưới đây xác định qui tắc CSS để thiết lập cùng một font size khi in hoặc khi hiển thị trên màn hình.

<style tyle="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 định nghĩa Style Sheet trong một file riêng biệt, bạn cũng có thể sử dụng thuộc tính media khi liên kết tới External Style này.

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

Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: TutorialspointW3Schools

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.