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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

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.