Skip to main content

Cara Menghalang Laman Web Daripada Percetakan Dengan CSS

Cara Menyimpan Halaman Web untuk Dibaca Secara Offline di Mozilla Firefox (Jun 2026)

Cara Menyimpan Halaman Web untuk Dibaca Secara Offline di Mozilla Firefox (Jun 2026)
Anonim

Halaman web bertujuan untuk dilihat pada skrin. Walaupun terdapat pelbagai jenis peranti yang boleh digunakan untuk melihat tapak (komputer meja, komputer riba, tablet, telefon, wearables, TV, dan lain-lain), mereka semua termasuk skrin beberapa jenis. Terdapat cara lain seseorang boleh melihat laman web anda, cara yang tidak termasuk skrin. Kami merujuk kepada cetakan fizikal laman web anda.

Beberapa tahun yang lalu, anda akan mendapati bahawa laman web percetakan orang adalah senario yang sangat biasa. Kami masih ingat dengan banyak pelanggan yang baru di web dan merasa lebih selesa meninjau halaman bercetak di laman web ini. Mereka kemudian memberi kami maklum balas dan pengeditan pada kertas tersebut dan bukannya melihat skrin untuk membincangkan laman web tersebut. Oleh kerana orang telah menjadi lebih selesa dengan skrin dalam kehidupan mereka, dan kerana skrin telah berlipat ganda banyak kali, kita telah melihat lebih sedikit dan lebih sedikit orang yang mencuba untuk mencetak halaman web ke kertas, tetapi ia masih berlaku. Anda mungkin ingin mempertimbangkan fenomena ini apabila anda merancang laman web anda. Adakah anda mahu orang mencetak halaman web anda? Mungkin awak tidak. Jika demikian, anda mempunyai beberapa pilihan.

Cara Menghalang Laman Web Daripada Percetakan Dengan CSS

Sangat mudah menggunakan CSS untuk menghalang orang daripada mencetak halaman web anda. Anda hanya perlu membuat garis gaya 1 baris bernama "print.css" yang merangkumi barisan CSS berikut.

body {display: none; }

Gaya satu ini akan menjadikan elemen "badan" halaman anda menjadi tidak dipaparkan - dan kerana segala-galanya di halaman anda adalah kanak-kanak unsur tubuh, ini bermakna bahawa keseluruhan laman / halaman tidak akan dipaparkan.

Sebaik sahaja anda mempunyai lembaran gaya "print.css", anda akan memuatkannya ke dalam HTML anda sebagai lembaran gaya cetak. Berikut adalah cara anda melakukannya - hanya tambah baris berikut ke elemen "kepala" dalam halaman HTML anda.

Maklumat ini memberitahu penyemak imbas bahawa jika halaman web ini ditetapkan untuk dicetak, menggunakan lembaran gaya ini dan bukannya apa-apa lembaran gaya lalai yang digunakan halaman untuk paparan pada skrin. Apabila halaman beralih ke lembaran "print.css" ini, gaya yang menjadikan keseluruhan halaman tidak dipaparkan akan menendang dan semua yang akan dicetak akan menjadi halaman kosong.

Sekat Satu Halaman pada satu Masa

Jika anda tidak perlu menghalang banyak halaman di laman web anda, anda boleh menyekat percetakan pada halaman demi halaman dengan gaya berikut disisipkan ke kepala HTML anda.

Gaya dalam halaman ini akan mempunyai kekhususan yang lebih tinggi daripada mana-mana gaya di dalam helaian gaya luaran anda, yang bermaksud bahawa halaman tidak akan mencetak sama sekali, sementara halaman lain tanpa baris ini masih akan mencetak secara normal.

Dapatkan Fancier Dengan Laman Anda yang Sekat

Bagaimana jika anda mahu menyekat percetakan, tetapi tidak mahu pelanggan anda kecewa? Jika mereka melihat percetakan halaman kosong, mereka mungkin kecewa dan fikirkan pencetak atau komputer mereka rosak dan tidak menyedari bahawa anda mempunyai percetakan yang tidak aktif!

Untuk mengelakkan kekecewaan pengunjung, anda boleh mendapatkan sedikit lebih menarik dan memasukkan mesej yang hanya akan dipaparkan apabila pembaca anda mencetak halaman - menggantikan kandungan lain. Untuk melakukan ini, buat laman web standard anda, dan di bahagian atas halaman, sejurus selepas tag tubuh, letakkan:

Dan tutup teg itu setelah semua kandungan anda ditulis, di bahagian paling bawah halaman:

Kemudian, selepas anda menutup div "noprint", buka div lain dengan mesej yang anda mahu paparkan apabila dokumen dicetak:

Halaman ini bertujuan untuk dilihat dalam talian dan mungkin tidak dicetak. Sila lihat halaman ini di http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Sertakan pautan ke cetakan dokumen cetak anda yang bernama print.css:

Dan dalam dokumen itu, gaya-gaya berikut:

#noprint {display: none; } #print {display: block; }

Akhir sekali, dalam lembaran gaya standard anda (atau dalam gaya dalaman di kepala dokumen anda), tulis:

#print {display: none; } #noprint {display: block; }

Ini akan memastikan bahawa mesej cetak hanya muncul pada halaman bercetak, sementara laman web hanya muncul di halaman dalam talian.

Pertimbangkan Pengalaman Pengguna

Percetakan laman web pada umumnya merupakan pengalaman yang lemah sejak laman web hari ini sering tidak diterjemahkan dengan baik ke halaman yang dicetak. Sekiranya anda tidak ingin membuat helaian gaya yang sama sepenuhnya untuk menentukan gaya cetakan, anda boleh mempertimbangkan menggunakan langkah-langkah dari artikel ini untuk "mematikan" percetakan pada halaman. Berhati-hati dengan impak yang mungkin ada pada pengguna yang bergantung pada laman web pencetakan (mungkin kerana mereka mempunyai penglihatan miskin dan perjuangan membaca teks pada skrin) dan membuat keputusan yang akan berfungsi untuk penonton tapak anda.

Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard.