Home-theater-designers
Sekiranya anda pernah mencetak tempahan tiket atau arahan ke hotel dari web, anda mungkin kurang terkesan dengan hasilnya. Oleh itu, Anda mungkin tidak menyedari bahawa dokumen yang dicetak dapat digayakan dengan cara yang sama seperti yang mereka dapat di layar, menggunakan Cascading Style Sheets (CSS).
Pemisahan Kebimbangan
Manfaat utama CSS adalah pemisahan kandungan dari persembahan. Dalam istilah yang paling mudah, ini bermaksud sebagai pengganti gaya lama yang sangat kuno seperti:
Heading
Kami menggunakan penanda semantik:
Bukan hanya jauh lebih bersih, ia juga bermaksud persembahan kami terpisah dari kandungan kami. Penyemak imbas membuat h1 elemen sebagai teks besar dan tebal secara lalai, tetapi kami dapat mengubah gaya itu pada bila-bila masa dengan helaian gaya:
h1 { font-weight: normal; }
Dengan mengumpulkan deklarasi gaya tersebut dalam fail yang terpisah, dan merujuk file tersebut dari dokumen HTML kami, kami dapat menggunakan pemisahan yang lebih baik lagi. Lembaran gaya dapat digunakan kembali, dan kita dapat mengubah satu file tersebut setiap saat untuk memperbarui format dalam setiap dokumen yang menggunakannya.
Termasuk Lembaran Gaya Cetakan
Dengan cara yang serupa dengan memasukkan helaian gaya skrin, kita dapat menentukan helaian gaya untuk dicetak. Lembaran gaya skrin biasanya disertakan seperti:
Walau bagaimanapun, atribut tambahan, separuh , membolehkan penargetan berdasarkan konteks di mana dokumen tersebut diberikan. Secara lalai, elemen sebelumnya bersamaan dengan:
Ini berarti lembaran gaya akan diterapkan untuk media apa saja dokumen diberikan. Namun, atribut media juga dapat mengambil nilai cetak dan layar:
Dalam contoh ini, cetak.css helaian gaya hanya akan digunakan semasa dokumen dicetak. Ini adalah mekanisme yang sangat berguna. Kami dapat mengumpulkan semua gaya umum (mungkin keluarga font atau jarak garis) dalam lembaran gaya yang berlaku untuk semua media, dan pemformatan khusus media dalam setiap gaya gaya. Sekali lagi, ini adalah satu lagi penggunaan pemisahan kebimbangan.
Beberapa Contoh Deklarasi Gaya
Latar Belakang yang Bersih
Anda pasti tidak mahu membuang cetakan dakwat dengan latar belakang berwarna atau gambar latar. Mulakan dengan menetapkan semula lalai untuk nilai-nilai ini yang mungkin telah ditetapkan dalam dokumen anda:
body {
background: white;
color: black;
}
Anda juga mungkin ingin mengelakkan sebarang gambar latar dicetak - ini mestilah hiasan dan, oleh itu, bukan bahagian yang diperlukan dari kandungan anda:
* {
background-image: none !important;
}
Berkaitan: Cara Menetapkan Gambar Latar di CSS
cara menyambung fm terakhir untuk spotify
Mengawal Margin
Titik lain yang perlu dipertimbangkan mengenai cetakan adalah margin halaman. Walaupun CSS menyediakan cara untuk menetapkan ukuran margin, anda harus ingat bahawa penyemak imbas dan pencetak anda juga dapat mempengaruhi tetapan margin itu sendiri.
Sebagai contoh, dalam dialog cetak Chrome, terdapat tetapan margin yang mempunyai nilai termasuk tiada dan adat yang akan mengatasi apa sahaja yang ditentukan melalui CSS:
Atas sebab ini, disarankan untuk meninggalkan keputusan margin kepada pembaca di laman web awam. Namun, untuk penggunaan peribadi, atau untuk membuat susun atur lalai, menetapkan margin cetak melalui CSS mungkin sesuai. The @ halaman peraturan membenarkan margin ditetapkan, dan harus digunakan seperti berikut:
@page {
margin: 2cm;
}
CSS juga memiliki kapasitas untuk tata letak cetakan yang lebih canggih, seperti mengubah margin sesuai dengan apakah halaman itu bernombor ganjil (kanan), bernombor genap (kiri), atau halaman sampul.
filem percuma tanpa membuat akaun
Sayangnya, ini tidak disokong dengan baik - terutamanya pilihan halaman depan - tetapi ia dapat digunakan pada tahap minimum. Gaya berikut menghasilkan halaman dengan margin bawah yang sedikit lebih besar daripada margin atas dan sedikit lebih besar di tepi halaman luar daripada tulang belakang:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Menyembunyikan Kandungan Tidak Berkaitan
Tidak semua kandungan sesuai untuk versi cetak dokumen anda. Sekiranya halaman anda merangkumi navigasi sepanduk, iklan, atau bar sisi, anda mungkin ingin mengelakkan perincian tersebut muncul dalam versi cetak, misalnya:
#contents, div.ad { display: none; }
Memperbaiki pautan
Hyperlink jelas tidak relevan dalam bahan bercetak, jadi anda mungkin ingin membuang gaya yang membezakannya dengan teks sekitar:
a { text-decoration: none; color: inherit; }
Walau bagaimanapun, anda mungkin mahu pembaca mempunyai akses ke URL asal, dan penyelesaian langsung adalah memasukkannya secara automatik selepas teks yang dipautkan:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
CSS ini memberikan hasil seperti berikut:
a [href]: selepas secara khusus menyasarkan kedudukan selepas ( : selepas setiap elemen pautan ( ke ) yang sebenarnya mempunyai URL ( [href] ). The kandungan pengisytiharan di sini memasukkan nilai href atribut antara tanda kurung. Perhatikan bahawa peraturan gaya lain dapat diterapkan untuk mengendalikan paparan konten yang dihasilkan.
Mengendalikan Kerosakan Halaman
Untuk mengelakkan jeda halaman meninggalkan kandungan terpencil, atau memecahnya dengan canggung di tengah, gunakan sifat pemecahan halaman: halaman-break-sebelum , halaman-rehat-selepas dan halaman-pecah-masuk . Sebagai contoh:
table { page-break-inside: avoid; }
Ini akan membantu mengelakkan jadual merangkumi beberapa halaman, dengan syarat tidak ada yang lebih tinggi daripada satu halaman. Begitu juga:
h1, h2 { page-break-before: always; }
Ini bermaksud bahawa tajuk seperti itu selalu memulakan halaman baru. Ia mungkin menimbulkan masalah jika anda segera mengikuti h1 halaman anda dengan h2, kerana h1 akan berakhir di halaman sendiri. Untuk mengelakkan ini, batalkan jeda halaman menggunakan pemilih yang menargetkan contoh tertentu, misalnya:
berapa banyak notis pelanggaran hak cipta yang dapat saya dapatkan
h1 + h2 { page-break-before: avoid; }
Melihat Gaya Cetakan
Dalam semua keadaan, penyemak imbas dan sistem operasi anda harus menyediakan ciri pratonton cetak, selalunya sebagai sebahagian daripada dialog cetak standard.
Penyemak imbas Chrome menjadikannya lebih mudah untuk memeriksa dan bahkan men-debug gaya cetakan anda melalui Alat Pembangun, seperti yang ditunjukkan oleh contoh ini menunjukkan CV dengan helaian gaya cetakan. Pertama, buka menu utama dan pilih Lebih Banyak Alat diikuti oleh Alat Pembangun pilihan:
Dari panel baru yang muncul, pilih Menu , kemudian Lebih banyak alat , diikuti oleh Rendering :
Kemudian tatal ke bawah ke Meniru jenis media CSS tetapan. Lungsur turun membolehkan anda beralih antara paparan cetak dan skrin dokumen anda:
Semasa meniru lembaran gaya cetakan, standard Penyemak imbas gaya tersedia untuk memeriksa dan mengubah peraturan gaya hidup. Ingatlah bahawa mencontohi output cetak pada skrin masih tidak 100% tepat. Penyemak imbas tidak mengetahui apa-apa tentang ukuran kertas, dan @ halaman peraturan tidak boleh dicontohi.
Mencetak ke PDF
Ciri berguna sistem operasi moden ialah kemampuan mencetak ke fail PDF. Sebenarnya, apa sahaja yang anda boleh cetak boleh, sebaliknya, dihantar ke fail PDF — tidak ada kejutan kerana fail PDF semestinya mewakili dokumen yang dicetak.
Ini menjadikan HTML, dikombinasikan dengan lembaran gaya cetak, cara yang sangat baik untuk membuat dokumen berkualiti tinggi yang dapat dikirim sebagai lampiran, dan juga dicetak.
Cetak Pelbagai Dokumen
Anda boleh menggunakan lembaran gaya cetak untuk membuat dokumen berkualiti, termasuk apa-apa dari CV anda hingga resipi atau pengumuman acara. Halaman web biasanya kelihatan jelek dan mengandungi perincian yang tidak diingini ketika dicetak, tetapi sebilangan kecil tweak gaya dapat meningkatkan hasil cetak secara dramatis. Menyimpan hasil akhir sebagai PDF adalah cara cepat untuk membuat dokumen profesional yang menarik.
Berkongsi Berkongsi Tweet E-mel Cara Mencetak Halaman Web ke PDF Dengan Microsoft EdgeAdakah anda pernah menemui artikel menarik yang ingin anda simpan kemudian? Anda boleh menyimpan sebagai PDF dengan Edge dalam tiga langkah mudah.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Percetakan
- CSS
Bobby adalah peminat teknologi yang bekerja sebagai pembangun perisian selama hampir dua dekad. Dia meminati permainan, bekerja sebagai Editor Ulasan di Switch Player Magazine, dan terlibat dalam semua aspek penerbitan dalam talian & pembangunan web.
Lagi Dari Bobby JackLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan