Bagaimanakah saya boleh menggunakan CSS untuk mengawal elemen yang dipaparkan semasa mencetak halaman web?

Memaparkan Kandungan Terpilih Apabila Mencetak dengan CSS

Banyak halaman web mengandungi data, reka letak dan kandungan yang luas. Untuk mengoptimumkan percetakan, anda mungkin mahu memaparkan elemen tertentu sahaja. Walaupun mencipta halaman yang berasingan untuk mencetak boleh menjadi penyelesaian, CSS menyediakan alternatif yang hebat dengan ciri "@media print"nya.

Sokongan Penyemak Imbas untuk "@media print"

Ciri "@media print" disokong secara meluas oleh penyemak imbas moden. Ia membolehkan anda menggunakan peraturan CSS secara khusus apabila halaman sedang dicetak. Pelayar yang menyokong "@media print" termasuk:

• Chrome
• Firefox
• Safari
• Edge

Elemen Penyasaran untuk Mencetak

Untuk menyembunyikan semua elemen kecuali yang ingin anda cetak, anda boleh menggunakan sifat "display:none". Kemudian, tambahkan kelas "boleh dicetak" pada elemen yang anda mahu paparkan semasa mencetak dan gunakan "display:block" pada elemen ini dalam blok "@media print".

CSS:

@media print {
    * {
        display: none;
    }
    .printable,
    .printable > * {
        display: block;
    }
}

Walau bagaimanapun, jika anda ingin memaparkan elemen hanya semasa mencetak dan menyembunyikannya dalam penyemak imbas, pertimbangkan untuk menggunakan pendekatan songsang:

CSS:

@media print {
    body *:not(.printable *) {
        display: none;
    }
}

Teknik ini akan menyembunyikan segala-galanya kecuali elemen dengan kelas "boleh dicetak" semasa mencetak.

Pertimbangan Tambahan

• Untuk mengelak daripada memaparkan kandungan terpaut apabila mencetak, tambahkan kelas "noPrint" pada elemen atau pautan yang sesuai.
• Untuk memaparkan logo, kepala surat atau elemen lain yang sepatutnya hanya muncul semasa mencetak, buat bahagian dengan kelas "onlyPrint".

CSS:

@media print {
    .noPrint {
        display: none;
    }
}
@media screen {
    .onlyPrint {
        display: none;
    }
}

HTML:

<div class="noPrint">

Dengan mengikuti kaedah ini, anda boleh mengawal keterlihatan dengan mudah elemen tertentu semasa mencetak halaman web, mengurangkan kekusutan dan mengoptimumkan kecekapan pencetakan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan CSS untuk mengawal elemen yang dipaparkan semasa mencetak halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!