Bagaimanakah CSS Boleh Meningkatkan Kecekapan Pencetakan dengan Mengawal Gelagat Cetakan?

Barbara Streisand
Lepaskan: 2024-11-11 14:05:03
asal
800 orang telah melayarinya

How Can CSS Enhance Printing Efficiency by Controlling Print Behavior?

CSS untuk Pencetakan Terpilih

Mencetak halaman web yang luas boleh menyusahkan, memerlukan kemasukan elemen yang tidak perlu. CSS menyediakan penyelesaian melalui ciri "@media print"nya. Memahami cara ia berfungsi boleh membantu anda memperkemas proses pencetakan anda.

Sokongan Penyemak Imbas

Kebanyakan penyemak imbas moden menyokong "@media print." Ia digunakan secara meluas dalam pelayar popular seperti Chrome, Firefox, Safari dan Edge. Ciri ini telah menjadi standard yang boleh dipercayai untuk mengawal tingkah laku cetakan.

Memaparkan Elemen Khusus

Untuk memaparkan elemen secara selektif semasa mencetak, anda boleh menggunakan salah satu daripada dua pendekatan:

  1. Pendekatan Penyenaraian Putih (paparan: blok):

    • Buat kelas CSS (cth., "boleh dicetak").
    • Gunakan "paparan: tiada" pada semua elemen dalam pertanyaan cetakan media kecuali yang mempunyai kelas "boleh dicetak".
    • Ini akan memastikan bahawa hanya elemen dengan kelas "boleh dicetak" kekal kelihatan semasa pencetakan.
  2. Pendekatan Penyenaraian Hitam (bukan):

    • Gunakan "paparan: tiada" pada semua elemen dalam pertanyaan cetakan media.
    • Gunakan pemilih "bukan" untuk mengecualikan elemen dengan kelas "boleh dicetak" daripada peraturan "display: none".
    • Walaupun pendekatan ini kelihatan logik, pendekatan ini mungkin tidak berfungsi dalam semua penyemak imbas disebabkan oleh pengehadan dalam sokongan CSS.

Kod Contoh

Menggunakan pendekatan senarai putih:

@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
Salin selepas log masuk

Menyembunyikan Elemen Semasa Menyemak Imbas

Untuk menyembunyikan elemen tertentu semasa menyemak imbas tetapi memaparkannya semasa mencetak, anda boleh menggunakan kod berikut:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}
Salin selepas log masuk

Kod ini akan menyembunyikan elemen dengan "noPrint " kelas semasa menyemak imbas dan memaparkan elemen dengan kelas "onlyPrint" semasa mencetak.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Meningkatkan Kecekapan Pencetakan dengan Mengawal Gelagat Cetakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan