การพิมพ์ CSS - กฎ @media

คุณสามารถใช้ CSS เพื่อเปลี่ยนลักษณะของหน้าเว็บเมื่อพิมพ์ลงบนกระดาษ คุณสามารถระบุแบบอักษรหนึ่งสำหรับเวอร์ชันหน้าจอและอีกแบบสำหรับเวอร์ชันพิมพ์

คุณได้เห็นกฎ @media ในบทก่อน ๆ กฎนี้ช่วยให้คุณระบุรูปแบบที่แตกต่างกันสำหรับสื่อต่างๆ ดังนั้นคุณสามารถกำหนดกฎต่างๆสำหรับหน้าจอและเครื่องพิมพ์ได้

ตัวอย่างด้านล่างระบุตระกูลฟอนต์ที่แตกต่างกันสำหรับการสกรีนและการพิมพ์ CSS ถัดไปใช้ขนาดตัวอักษรเดียวกันสำหรับทั้งหน้าจอและเครื่องพิมพ์

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

หากคุณกำลังกำหนดสไตล์ชีตของคุณในไฟล์แยกต่างหากคุณยังสามารถใช้แอตทริบิวต์สื่อเมื่อเชื่อมโยงกับสไตล์ชีตภายนอก -

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