Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan pilihan cetakan penyemak imbas (pengepala, pengaki, margin) dari halaman menggunakan CSS?
Bagaimana untuk melumpuhkan pilihan cetakan penyemak imbas (pengepala, pengaki, margin) dari halaman menggunakan CSS?
- WBOYke hadapan
- 2023-08-30 14:01:02883semak imbas
Kami boleh mengawal pengepala, pengaki dan margin halaman pratonton cetakan melalui CSS, malah mencapai reka letak dan arah media halaman yang diingini. Kami akan menggunakan arahan @page untuk mencapai hasil kami.
Apabila melihat pratonton halaman bercetak dalam penyemak imbas, kita dapat melihat beberapa maklumat halaman tambahan, seperti tajuk halaman, tarikh dan masa pratonton halaman, dan nombor halaman dalam pratonton, yang dipaparkan dalam pengepala halaman dan halaman Dalam kaki. Kita juga boleh melihat beberapa margin tambahan digunakan pada media pratonton halaman.
tatabahasa
@media print {
@page {
/* Desired CSS */
}
}
Terjemahan bahasa Cina bagi Penjelasan
ialah:Explain
Dalam pendekatan ini, kami akan menggunakan @page at rule (atau arahan) dalam peraturan cetakan @media, yang disediakan oleh CSS dan membolehkan kami menggunakan pemformatan pada media bernombor, yang termasuk halaman yang boleh dilihat pada skrin , kertas , dsb.
Dengan arahan @page, kami boleh mengawal reka letak, reka bentuk, jidar, arah, dan juga reka bentuk halaman khusus untuk pencetakan. Arahan ini digunakan secara meluas untuk mereka bentuk media diskret (halaman muka surat).
Media bermuka surat berbeza daripada media berterusan biasa (seperti laman web) kerana dalam media bermuka surat, jika kandungan melimpah, ia akan dipecahkan kepada halaman yang berasingan. Kami masih boleh mengawal reka letak halaman melalui kelas pseudo arahan @page.
Terjemahan bahasa Cina bagiContoh 1
ialah:Contoh 1
Dalam contoh ini, kami akan mengalih keluar pengepala, pengaki dan jidar tambahan yang boleh dilihat dalam media bernombor dengan menetapkan jidar kepada "0" di dalam arahan @paged.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@page {
margin: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
Tekan arahan + p (dalam Mac) atau ctrl + p (dalam Windows, Linux) untuk melihat skrin pratonton cetakan
Contoh 2
Dalam contoh ini, kami akan mengalih keluar pilihan cetakan penyemak imbas daripada media bernombor tetapi menambah jidar pada elemen badan dalam skrin media bernombor.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
Tekan arahan + p (dalam Mac) atau ctrl + p (dalam Windows, Linux) untuk melihat skrin pratonton cetakan
KESIMPULAN
Dalam artikel ini, kami mempelajari tentang arahan CSS @paged dan cara anda boleh menggunakannya untuk mengalih keluar/melumpuhkan pilihan cetakan penyemak imbas daripada pratonton cetakan menggunakan CSS sahaja.
Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan pilihan cetakan penyemak imbas (pengepala, pengaki, margin) dari halaman menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!