จัดการเรื่องการพิมพ์หน้าเว็บด้วย CSS

หลายท่านเคยใช้ Web Browser แล้วต้องสั่งพิมพ์หน้าเว็บนั้นออกทางเครื่องพิมพ์ เมื่อพิมพ์ออกมาจะปรากฏทุกอย่างบนหน้าเว็บนั้น ไม่ว่าจะเป็น เมนู โฆษณา ภาพกราฟฟิก และอื่นๆอีกจะปาถะ ซึ่งบางส่วนเราไม่ต้องการ ดังนั้นถ้าเราเป็นคนเขียนเว็บ เราจะทำอย่างไรเมื่อเวลาสั่งพิมพ์ แล้วให้พิมพ์เฉพาะข้อมูลที่ต้องการเท่านั้น เราสามารถทำได้โดยอาศัย CSS เข้ามาช่วยในการกำหนดรูปแบบของการพิมพ์ ไม่ว่าจะเป็น ฟอนต์ สีสัน หรือขอบเขตของข้อมูลที่ต้องการ เป็นต้น สำหรับบทความนี้จะนำเสนอเฉพาะเอกสาร HTML เท่านั้น (ส่วน ASP.NET ก็จะคล้ายกันแต่มีรายละเอียดเพิ่มเติมอีกนิดหน่อ จะยังไม่ขอกล่าวในตอนนี้)

ตัวอย่าง คำสั่ง HTML 5























ตัวอย่าง คำสั่ง CSS

ไฟล์ชื่อ stylesheet.css จะแสดงรายการของ Header ออกมาที่หน้าจอ

header {
        color:blue;
        background-color:yellow;
       }

ไฟล์ชื่อ printstylesheet.css จะไม่แสดงรายการของ Header ออกมาเมื่อทำการพิมพ์

header {
        visibility:hidden; 
        width:0px;
        height:0px;
       }

จากนั้น เมื่อทำการพิมพ์ผลออกทางเครื่องพิมพ์ จะไม่ปรากฎในส่วนที่ถูกกำหนดให้ visibility:hidden