Rumah >hujung hadapan web >tutorial css >Bagaimana anda menggunakan CSS untuk membuat stylesheet cetak untuk percetakan yang lebih baik?
Untuk membuat stylesheet cetak menggunakan CSS untuk percetakan yang lebih baik, anda perlu menentukan gaya tertentu yang dioptimumkan untuk halaman bercetak dan bukannya skrin. Inilah panduan langkah demi langkah mengenai cara melakukan ini:
print.css
. Fail ini akan mengandungi semua gaya yang khusus untuk mencetak. Pautan lembaran styleshe lembaran ke HTML anda : Dalam fail HTML anda, pautan lembaran stylesheet cetak menggunakan atribut media
dalam tag <link>
. Contohnya:
<code class="html"><link rel="stylesheet" type="text/css" media="print" href="print.css"></code>
Tentukan Gaya Spesifik Cetak : Dalam fail print.css
anda, anda boleh mengatasi gaya dari lembaran gaya skrin anda. Pelarasan biasa termasuk:
Gunakan @media print
Rule : Sebagai alternatif, anda boleh memasukkan gaya khusus cetak secara langsung dalam fail CSS utama anda menggunakan peraturan @media print
. Ini berguna jika anda ingin menyimpan semua gaya anda dalam satu fail. Contohnya:
<code class="css">@media print { body { font-size: 12pt; } nav, .sidebar { display: none; } }</code>
Dengan mengikuti langkah -langkah ini, anda boleh membuat lembaran gaya cetak yang meningkatkan kualiti cetak dan kebolehgunaan laman web anda.
Apabila mengoptimumkan kandungan untuk mencetak, beberapa sifat CSS amat berguna. Berikut adalah senarai sifat utama dan bagaimana mereka boleh digunakan:
Saiz fon : Laraskan saiz fon untuk kebolehbacaan yang lebih baik pada halaman bercetak. Contohnya:
<code class="css">body { font-size: 12pt; }</code>
Ketinggian garis : Meningkatkan ketinggian garis untuk meningkatkan keterbacaan dan menjadikan teks lebih mudah dibaca. Contohnya:
<code class="css">p { line-height: 1.5; }</code>
Warna : Gunakan warna yang mesra cetak. Pastikan teks dan warna latar belakang berbeza tinggi untuk percetakan hitam dan putih. Contohnya:
<code class="css">body { color: #000000; background-color: #ffffff; }</code>
Paparan : Sembunyikan unsur -unsur yang tidak diperlukan dalam versi cetak, seperti menu navigasi atau sidebars. Contohnya:
<code class="css">nav, .sidebar { display: none; }</code>
Page-Break-sebelum dan Page-Break-selepas : Kawalan di mana pecahan halaman berlaku untuk menyimpan kandungan bersama-sama. Contohnya:
<code class="css">h1 { page-break-before: always; } .section { page-break-after: avoid; }</code>
Janda dan anak -anak yatim : Cegah satu baris teks dari ditinggalkan di bahagian atas atau bawah halaman. Contohnya:
<code class="css">p { widows: 2; orphans: 2; }</code>
Dengan berhati -hati memilih dan menggunakan sifat CSS ini, anda dapat meningkatkan kualiti cetak kandungan web anda dengan ketara.
Memastikan imej dan susun atur diformat dengan betul apabila dicetak memerlukan perhatian khusus terhadap perincian. Berikut adalah beberapa strategi untuk mencapai ini:
Saiz dan Resolusi Imej : Gunakan harta max-width
untuk memastikan imej sesuai dalam margin cetak, dan pertimbangkan untuk menggunakan resolution
untuk imej berkualiti tinggi. Contohnya:
<code class="css">img { max-width: 100%; } @media print { img { resolution: 300dpi; } }</code>
Kedudukan Imej : Pastikan imej diletakkan di mana mereka paling berkesan. Gunakan sifat float
atau clear
untuk menguruskan aliran kandungan di sekitar imej. Contohnya:
<code class="css">.article-image { float: left; margin: 0 15px 15px 0; }</code>
Pelarasan Layout : Laraskan susun atur untuk menampung format cetak. Gunakan display: none
yang menyembunyikan unsur -unsur yang tidak diperlukan dalam cetak dan menyesuaikan lebar agar sesuai dengan kawasan cetak. Contohnya:
<code class="css">.sidebar { display: none; } .main-content { width: 100%; }</code>
Page Breaks : Gunakan page-break-before
dan page-break-after
untuk mengawal di mana pecahan halaman berlaku, memastikan bahawa imej dan kandungan penting tetap bersama-sama. Contohnya:
<code class="css">.figure { page-break-inside: avoid; }</code>
Imej Latar Belakang dan Warna : Ingatlah bahawa kebanyakan pencetak tidak mencetak imej atau warna latar belakang. Gunakan harta background
untuk memastikan kandungan penting tidak hilang. Contohnya:
<code class="css">.important-section { background: none; }</code>
Dengan melaksanakan teknik-teknik ini, anda dapat memastikan bahawa kedua-dua imej dan susun atur sesuai untuk dicetak.
Menguruskan halaman pecah dengan berkesan dalam stylesheets cetak adalah penting untuk mengekalkan aliran dan koheren kandungan bercetak. Berikut adalah beberapa amalan terbaik:
Mencegah rehat yang tidak diingini : Gunakan page-break-inside: avoid
untuk menyimpan kandungan yang berkaitan bersama-sama, seperti angka atau jadual. Contohnya:
<code class="css">table, figure { page-break-inside: avoid; }</code>
Mengawal Page Breaks Sebelum dan Selepas Elemen : Gunakan page-break-before
dan page-break-after
untuk memaksa rehat halaman sebelum atau selepas unsur-unsur tertentu. Sebagai contoh, untuk memulakan halaman baru sebelum setiap H1:
<code class="css">h1 { page-break-before: always; }</code>
Mengelakkan anak -anak yatim dan janda : Gunakan widows
dan orphans
untuk mengelakkan satu baris teks daripada ditinggalkan pada awal atau akhir halaman. Contohnya:
<code class="css">p { widows: 2; orphans: 2; }</code>
Mengendalikan Kandungan Panjang : Untuk kandungan yang panjang, gunakan page-break-after: avoid
untuk mengelakkan pecah dalam bahagian. Contohnya:
<code class="css">.section { page-break-after: avoid; }</code>
Menggunakan rehat logik : Pastikan rehat logik dengan mengumpulkan kandungan berkaitan bersama -sama. Sebagai contoh, teruskan tajuk dengan perenggan berikut:
<code class="css">h2 p { page-break-before: avoid; }</code>
Dengan mengikuti amalan terbaik ini, anda boleh membuat stylesheets cetak yang menguruskan pecahan halaman dengan berkesan, memastikan dokumen bercetak yang bersatu padu dan profesional.
Atas ialah kandungan terperinci Bagaimana anda menggunakan CSS untuk membuat stylesheet cetak untuk percetakan yang lebih baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!