Ba’zi paytlarda veb sahifalarni qog‘ozga chop qilish kerak bo‘ladi, veb sahifaning qog‘ozdagi varianti biroz noqulayroqdir. Chunki veb sahifa yaratuvchisi, chop qilishni e’tiborga olmagan bo‘ladi. CSS hususiyatlari orqali veb sahifalarni chop qilishni sozlash mumkin. Bu xususiyatlardan ko‘pchilik foydalanmaydi, lekin to‘g‘ri ishlatilsa, sahifaning qog‘ozdagi varianti ham chiroyli bo‘ladi.
Chop etish xususiyatlari faqat blokli(p, div)elementlarda ishlaydi.

Quyida chop etishga oid CSS xususiyatlari ro‘yxati berilgan:

widows;

orphans;

page-break-after;

page-break-before;

page-break-inside.

Bu hususiyatlarni birma-bir ko‘rsataman, lekin misollarni rasm shaklida ko‘rsatmayman, chunki buning uchun kamida bir varroq to‘la matn bo‘lishi kerak. Shunday bo‘lsa ham, tushunarli yozishga harakat qilaman.Chop etish xususiyatlari faqat sahifa chop qilinganda yoki chop qilishdan oldin ko‘rishni (предварительный просмотр) amalga oshirganda ishlaydi, kod natijasini ko‘rishda chop etish xususiyatlari ishlamaydi.

1. Widows — bu xususiyat biror varroq to‘lganda, keyingisiga o‘tish kerak bo‘lgan joyda ishlaydi, ya’ni blok ichidagi matnning minimal nechta qatori keyingi varroqqa o‘tish kerakligini aniqlashtiradi. qiymat sifatida raqam beriladi, misol uchun:

<html>
<head>
  <style>
    @media print {
      p{ widows:3; }
    }
  </style>
</head>
<body>
<p>Katta hajmdagi matn bo'lishi mumkin</p>
</body>
</html>

Bu misoldan biror natija ololmaysiz, chunki matn bir varroqni to‘la egallamagan, misolda faqat bu xususiyatni qanday ishlatishni ko‘rsatdim. «@» belgisi veb sahifaga biror tashqi narsani bog‘lanayotganini ko‘rsatadi, bizning holda bu printer.

2. Orphans — veb sahifani chop qilishda, matnning minimal nechta qatori dastlabki varroqda qolish kerakligini ko‘rsatadi. Qiymat raqamda beriladi. Agar siz bergan qiymat, ya’ni qatorlar soni dastlabki varroqqa sig‘masa, butun blok matnini keyingi qatorga o‘tkazib yuboradi.  Orphans bilan widows xususiyatlari bir — biriga qarama qarshi qiymatlarni qabul qilsa, widows xususiyati qiymati ishlaydi, prioritet widowsda ko‘proq.

3. Page-break-after — bloklarni varroq bo‘ylab bo‘lishni amalga oshirib beradi. Sahifada bir necha bloklar bo‘lsa, ma’lum bir blokdan keyin  veb sahifani bo‘lib, qolganini keyingi varroqqa o‘tkazib yuboradi. Quyidagi qiymatlarga ega:

always — har doim shu elementdan keyin qolgan qismni keyingi varroqga o‘tkazish;

auto — agar zarur bo‘lsa qolgan qismni keyingi varroqga o‘tkazadi, o‘zi aniqlaydi;

avoid — elementdan keyin keyingi varroqga o‘tishni taqiqlaydi;

left — elemendan keyin varroqni bo‘lib, qolgan elementlarni bitta yoki ikkita bo‘sh varroq tashab keyingisiga yozadi, bu orqali matnlarni faqat juft varroqlarga yozadi, toq varroqlar bo‘sh bo‘ladi(chrome, safari, firefoxda ishlamaydi, Operada ishlaydi);

right — elemendan keyin varroqni bo‘lib, qolgan elementlarni bitta yoki ikkita bo‘sh varroq tashab keyingisiga yozadi, bu orqali matnlarni faqat toq varroqlarga yozadi, juft varroqlar bo‘sh bo‘ladi(chrome, safari, firefoxda ishlamaydi, Operada ishlaydi);

<html>
 <head>
  <title>page </title>
  <style>
   @media print {
    .p {
     page-break-after: always;
    }
   }
  </style>
 </head>
 <body>
  <h2>Hello World</h2>
  <p>Bu qism birinchi varroqda bo'ladi</p>
  <span>bu esa keyingisiga o'tadi</span>
 </body>
</html>

4. Page-break-before — bloklarni varroq bo‘ylab bo‘lishni amalga oshirib beradi. Sahifada bir necha bloklar bo‘lsa, ma’lum bir blokdan avval veb sahifani bo‘lib, shu joydan boshlab, qolganini keyingi varroqqa o‘tkazib yuboradi. Qiymatlari «page-break-after» bilan bir xil.

5. Page-break-inside — bu xususiyat blok ichi bilan ishlaydi va berilgan qiymat asosida bo‘lishni amalga oshirib beradi. Qiymatlari:

auto — kerak bo‘lganda blok ichidagi matnni bo‘lishi mumkin, matn qismlarga ajralib, boshqa-boshqa varroqlarda chop etiladi;

avoid — blok ichidagi matnni bo‘lmaydi, blok butunlay u yoki bu varroqda chop etiladi.

<html>
 <head>
  <title>Inside</title>
  <style>
   @media print {
   p {
     page-break-inside: avoid;
    }
   }
  </style>
 </head>
 <body>
  <p>Bu matn bitta varroqda namoyon bo'ladi, matnning bir qismi bir varroqda ikkinchisi boshqasida bo'lmaydi.</p>
</body>
</html>