Rumah >hujung hadapan web >tutorial css >Cara membuat halaman mesra pencetak dengan CSS
Takeaways Key
Menukar responsif, media berterusan untuk kertas paged dari sebarang saiz dan orientasi boleh mencabar. Walau bagaimanapun, kawalan cetak CSS telah mungkin selama bertahun -tahun, dan lembaran gaya asas dapat diselesaikan dalam beberapa jam. Bahagian berikut menggambarkan pilihan yang disokong dengan baik dan praktikal untuk menjadikan halaman anda mesra pencetak.
cetak css boleh sama ada:
Pilihannya bergantung pada laman web/aplikasi anda. Secara peribadi, saya menggunakan gaya skrin sebagai asas cetak sepanjang masa. Walau bagaimanapun, saya telah menggunakan helaian gaya berasingan untuk aplikasi dengan output yang sangat berbeza-seperti sistem tempahan sesi persidangan yang memaparkan grid jadual di skrin tetapi jadual kronologi di atas kertas.
Lembaran gaya cetak boleh ditambah ke html selepas lembaran gaya standard:
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>Gaya Print.css akan digunakan sebagai tambahan kepada gaya skrin apabila halaman dicetak.
Untuk memisahkan skrin dan media cetak, main.css harus menargetkan skrin sahaja:
<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>Sebagai alternatif, gaya cetak boleh dimasukkan dalam fail CSS sedia ada menggunakan peraturan @media. Contohnya:
Sebarang bilangan peraturan cetak @media boleh ditambah, jadi ini mungkin praktikal untuk menjaga gaya yang berkaitan bersama -sama. Peraturan skrin dan cetak juga boleh dipisahkan jika perlu:
<span>/* main.css */ </span><span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span><span>} </span> <span>/* override styles when printing */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>
Menguji output pencetak
<span>/* main.css */ </span> <span>/* on-screen styles */ </span><span><span>@media screen</span> { </span> <span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span> <span>} </span> <span>} </span> <span>/* print styles */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>
Pratonton cetak
Sebagai alternatif, anda mungkin dapat menyimpan atau melihat halaman dengan mengeksport ke PDF.
Alat pemaju
cmd/ctrl shift i
Menganggap anda menggunakan tag
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>
Sekali lagi, ini tidak akan mendedahkan rehat halaman. Jangan lupa untuk memulihkan atribut ke media = "cetak" sebaik sahaja anda selesai ujian.
Sebelum melakukan apa -apa lagi, keluarkan dan runtuh kandungan berlebihan dengan paparan: tiada;. Bahagian yang tidak perlu di atas kertas boleh termasuk menu navigasi, imej wira, tajuk, footer, bentuk, sidebars, widget media sosial, dan blok pengiklanan (biasanya apa -apa dalam iframe):
<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>
Mungkin perlu menggunakan paparan: tidak ada! Penting; Jika fungsi CSS atau JavaScript menunjukkan unsur -unsur mengikut keadaan UI tertentu. Menggunakan! Penting tidak biasanya disyorkan, tetapi kami boleh membenarkan penggunaannya dalam set asas gaya pencetak yang menimpa lalai skrin.
Linearize susun aturStyling Pencetak
mengamalkan lajur CSS
Dalam contoh ini, lajur akan dibuat apabila terdapat sekurang -kurangnya 37em ruang mendatar. Tidak perlu menetapkan pertanyaan media; Lajur tambahan akan ditambah pada kertas yang lebih luas.
<span>/* main.css */ </span><span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span><span>} </span> <span>/* override styles when printing */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>
Gunakan sempadan bukannya warna latar belakang
simpan dakwat dengan mewakili unsur -unsur dengan sempadan:
Pengguna tidak mahu mencetak imej dan latar belakang hiasan dan tidak penting. Anda boleh mempertimbangkan lalai di mana semua imej tersembunyi kecuali mereka mempunyai kelas cetak:
<span>/* main.css */ </span> <span>/* on-screen styles */ </span><span><span>@media screen</span> { </span> <span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span> <span>} </span> <span>} </span> <span>/* print styles */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>
Penapis CSS boleh digunakan untuk membalikkan dan menyesuaikan warna dalam lembaran gaya cetak. Contohnya:
Hasilnya:
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>atau anda boleh menambah mesej cetak sahaja:
<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>Untuk situasi yang lebih kompleks, pertimbangkan untuk menggunakan kelas seperti cetak pada unsur -unsur yang hanya boleh dilihat apabila dicetak,. Contohnya:
CSS:
<span>/* main.css */ </span><span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span><span>} </span> <span>/* override styles when printing */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>
<span>/* main.css */ </span> <span>/* on-screen styles */ </span><span><span>@media screen</span> { </span> <span>body { </span> <span>margin: 2em; </span> <span>color: #fff; </span> <span>background-color: #000; </span> <span>} </span> <span>} </span> <span>/* print styles */ </span><span><span>@media print</span> { </span> <span>body { </span> <span>margin: 0; </span> <span>color: #000; </span> <span>background-color: #fff; </span> <span>} </span> <span>} </span>Nota: Kebanyakan penyemak imbas memaparkan URL dan tarikh/masa semasa pada header dan/atau footer halaman bercetak, jadi jarang ada keperluan untuk menghasilkan maklumat ini dalam kod.
Page Breaks
nilai-nilai rehat sebelum dan berehat boleh digunakan:
auto: lalai - rehat dibenarkan tetapi tidak dipaksa
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span> </span>NOTA: Berhati-hati dengan menggunakan pecahan halaman. Sebaik -baiknya, output pencetak harus menggunakan beberapa halaman yang mungkin.
Properti Break-Inside (dan Lama-Page-Break-Inside) Menentukan sama ada rehat halaman dibenarkan di dalam elemen. Nilai yang biasa disokong:
auto: lalai - rehat dibenarkan tetapi tidak dipaksa
Harta janda menentukan bilangan minimum baris dalam blok yang mesti ditunjukkan di bahagian atas halaman. Bayangkan satu blok dengan lima baris teks. Penyemak imbas ingin membuat rehat halaman selepas garis empat sehingga baris terakhir muncul di bahagian atas halaman seterusnya. Menetapkan janda: 3; pecah pada atau sebelum garis dua sehingga sekurang -kurangnya tiga baris dibawa ke halaman seterusnya.
<span>/* print.css */ </span><span>header<span>, footer, aside, nav, form, iframe, .menu, .hero, .adslot</span> { </span> <span>display: none; </span><span>} </span>
harta yatim sama dengan janda kecuali ia mengawal bilangan minimum baris untuk dipaparkan di bahagian bawah halaman.
Kawalan harta break kotak-kotak sempadan elemen di seluruh halaman. Apabila elemen dengan sempadan mempunyai rehat halaman dalaman:
Akhirnya, media paged CSS (@page) mempunyai sokongan penyemak imbas terhad tetapi menyediakan cara untuk menargetkan halaman tertentu supaya margin atau rehat alternatif dapat ditakrifkan:
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>
Properties Break Page CSS boleh diletakkan di dalam skrin atau gaya cetak anda kerana mereka hanya mempengaruhi percetakan, tetapi saya cadangkan menggunakannya dalam CSS cetak untuk kejelasan.
Ketahui bahawa kawalan Break Page adalah sedikit lebih daripada cadangan kepada penyemak imbas. Tidak ada jaminan rehat akan dipaksa atau dielakkan kerana susun atur adalah terhad kepada batasan kertas.
Kawalan ke atas percetakan media web akan sentiasa terhad, dan hasilnya boleh berbeza -beza di seluruh pelayar. Yang berkata:
Menambah beberapa pecahan halaman dan mengeluarkan bahagian yang tidak perlu akan menggembirakan pengguna dan meningkatkan tapak anda di atas pesaing. tambahkan ke senarai tugasan anda!
Untuk pengetahuan CSS yang lebih maju, baca buku kami CSS Master, edisi ke -3 .
Mewujudkan lembaran stylesheet cetak CSS adalah penting untuk mengawal penampilan laman web apabila mereka dicetak. Mari berakhir dengan menutup beberapa soalan yang sering ditanya mengenai cara membuat halaman mesra pencetak dengan CSS.
Adalah mungkin untuk mencetak laman web secara langsung dari penyemak imbas anda, tetapi laman web bercetak sering tidak akan kelihatan seperti halaman yang anda lihat di skrin. Halaman web digayakan dengan CSS, dan CSS juga boleh digunakan untuk menyediakan gaya untuk halaman bercetak. Walau bagaimanapun, gaya laman web biasanya tidak diterjemahkan dengan baik untuk dicetak, jadi penting untuk menulis gaya CSS khusus untuk halaman bercetak. CSS untuk Cetak adalah satu set gaya yang direka khusus untuk membantu pencetak memformat susun atur halaman bercetak.
laman web CSS secara automatik akan digunakan untuk versi bercetak halaman web, tetapi selalunya dengan hasil yang tidak dijangka atau tidak diingini. CSS untuk cetakan mengiktiraf kekangan unik halaman bercetak, berbeza dengan persekitaran penyemak imbas yang lebih fleksibel. Menetapkan gaya untuk cetak melibatkan pemikiran tentang bagaimana unsur -unsur paling baik akan diletakkan di halaman bercetak. Yang mungkin termasuk bersembunyi unsur -unsur yang tidak berkaitan dengan dicetak, seperti menu dan sejenisnya, pautan gaya dengan cara yang menjadikan URL dapat dilihat pada halaman yang dicetak, dan mengeluarkan imej latar belakang dan warna fon yang mungkin tidak relevan dengan dicetak versi laman web.
Terdapat dua cara asas untuk melayani gaya cetak dalam CSS: melalui lembaran gaya berasingan, atau melalui pertanyaan media. Gaya cetak CSS boleh disimpan dalam lembaran gaya berasingan yang dikaitkan dengan laman web di bahagian
dokumen: Kes penggunaan biasa untuk cetakan gaya cetak termasuk:
- menyesuaikan saiz fon dan gaya untuk dibaca semula di atas kertas. - Memastikan bahawa imej dan warna latar belakang tidak dicetak secara lalai.
- Menentukan Page Break untuk mengawal bagaimana kandungan dibahagikan kepada halaman.
bagaimana saya boleh menyembunyikan elemen tertentu dalam versi cetak?
bagaimana saya menentukan pecahan halaman dalam lembaran gaya cetak?
Anda boleh menentukan pecahan halaman menggunakan halaman-Break-sebelum dan Page-Break-selepas CSS Properties. Contohnya:
@media print {
}
}
Ya, anda boleh menukar margin halaman untuk dokumen bercetak menggunakan peraturan @Page dalam lembaran cetak anda. Contohnya:
@page {
margin: 1cm;
}
bagaimana saya dapat memastikan bahawa imej dan warna latar belakang tidak dicetak?
@media print {
paparan: none;
}
body {
Adakah mungkin untuk menukar gaya fon dan saiz untuk percetakan?
Ya, anda boleh menukar gaya fon dan saiz untuk mencetak dengan menentukan gaya yang berbeza dalam lembaran cetak anda. Contohnya:
@media print {
font-size: 12pt;
font-family: arial, sans-serif;
}
}
Atas ialah kandungan terperinci Cara membuat halaman mesra pencetak dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!