การกำหนด CSS เพื่อการพิมพ์
เราสามารถทำได้โดยการกำหนด CSS ให้กับเอกสารครับ โดยที่การกำหนด CSS เป็นชนิด print จะถูกเรียกใช้เมื่อพิมพ์ หรือกำหนดเป็น media เมื่อแสดงผลทางจอภาพ เป็นต้น (ยังมีแบบอื่นๆอีกแต่ไม่ขอกล่าวในที่นี้) รูปแบบการกำหนดทำได้โดย property media ครับ เช่น
@media print {
img {
display:none;
}
}ตัวอย่างเป็นการกำหนด CSS บนเอกสารเลยครับ โดยเมื่อพิมพ์ รูปภาพทั้งหมดบนเว็บจะไม่ถูกพิมพ์ออกมา แต่ถ้าแสดงบนเว็บปกติ รูปภาพก็จะถูกแสดงตามปกติ
<link rel="stylesheet" type"text/css" href="print.css" media="print">นอกจากนี้ยังสามารถกำหนดบน CSS ภายนอกได้ด้วยครับ โดยการเขียน CSS ควบคุมต่างๆลงในไฟล์ print.css และกำหนด media="print" ถ้าเป็น CSS สำหรับการพิมพ์ หรือ เ็ป็น screen สำหรับการแสดงผล บน Browser
display:none; /* สำหรับกำหนดให้ไม่ต้องแสดงส่วนนั้นๆเมื่อพิมพ์ */เทคนิคการเขียน CSS เพื่อควบคุมการพิมพ์ โดยทั่วไป การเขียน CSS เพื่อแสดงผลหรือเพื่อพิมพ์ก็มีลักษณะคล้ายๆกันครับ เราสามารถกำหนดส่วนต่างๆให้แสดงออกได้ตามต้องการด้วย CSS ปกติครับ เช่น การกำหนดไม่ให้มีรูปภาพ เมื่อพิมพ์ดังโค้ดด้านบน
@media print { /* เมื่อพิมพ์ ตัวอักษรทั้เอกสารจะเป็นขนาด 10pt และพื้นหลักเอกสารจะเป็นสีขาว */
BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen { /* เมื่อแสดงปกติ ตัวอักษรจะเป็นขนาด medium และมีสีพื้นเป็นสีเงิน */
BODY {font-size: medium; line-height: 1em; background: silver;}
}หรือการกำหนด CSS ให้เมื่อแสดงเพจปกติใช้ฟ้อนต์ขนาดหนึ่ง แต่เมื่อพิมพ์ให้ใช้อีกแบบหนึ่ง
<style type="text/css">
@media print {
.section {
height: 100%;
margin: 0px 0px 0px 0px;
}
}
</style>
<div class = "section">section 1</div>
<div class = "section">section 2</div>ตัวอย่างการกำหนด CSS เพื่อแบ่งหน้าพิมพ์ ตามที่เรากำหนดครับ เช่น เมื่อพิมพ์ section 1 จะพิมพ์ออกหน้าหนึ่ง และ section 2 จะถูกพิมพ์ออกอีกหน้าหนึ่ง