Menyiapkan Print Stylesheet CSS Untuk Situs Web [2018]

Belajar untuk jadikan situs web Anda Printer-friendly dengan CSS. Karena sangat penting untuk memiliki CSS khusus untuk dicetak untuk situs mana pun jika pembaca ingin mencetak artikel untuk dibaca nanti secara offline. Biasanya menjadi opsi sekunder untuk semua webmaster dan blogger terlalu memikirkan itu, yang benar-benar mengambil cetakan offline dari artikel yang diterbitkan online. Tapi, mereka lupa berpikir bahwa pembaca juga dapat menyimpan halaman Anda dalam format .pdf juga. Cara Mengatur Lembar Cetak Gaya Untuk Situs Web 2018 – Memilih tema SEO-Friendly terlaris tidak cukup, Anda juga perlu mempertimbangkan faktor print stylesheet sementara memilih templat terbaik untuk bisnis Anda. Ini adalah panduan utama bagi semua pemilik situs untuk membangun lembar gaya cetak untuk situs mereka. Dan CSS stylesheet cetak ini juga berfungsi dengan baik dengan blogger. Anda dapat membuat lembar gaya CSS yang sepenuhnya terpisah untuk tujuan pencetakan, mulai dari awal, atau Anda dapat mengembangkan sendiri gaya 'target layar' modern. Semua metode ini terkandung dalam CSS dengan mendefinisikan gaya khusus cetak oleh @media Rule. Mengapa stylesheet ini diperlukan? Karena kode stylesheet CSS digunakan untuk mencetak halaman web, ketika pengunjung ingin mencetak halaman web untuk referensi. Pelajari cara menyiapkan lembar gaya cetak, cara membuat situs web Anda Ramah-printer dengan CSS dan membuat gaya cetak menggunakan kueri CSS3 @ media. Ikuti semua langkah untuk membuat lembar gaya cetak yang disesuaikan dalam hitungan menit.

Cetak Stylesheet CSS: Kiat Blogging

Juga periksa: 5 Cara Bagaimana Teknologi Yang Dapat Dipakai Akan Meningkatkan Kehidupan Sehari-Hari Kita

Apa itu print style sheet atau print.css?

Ini adalah CSS khusus yang ditentukan untuk situs web dengan menggunakan pembaca dapat mencetak halaman web tertentu dengan sangat jelas tanpa melebihi lebih banyak kertas & tinta.

Keuntungan :

• Tingkatkan kegunaan & aksesibilitas: Seorang pembaca / siswa dapat mencetaknya dan menggunakannya untuk referensi di kemudian hari.
• Kurangi pemuatan halaman: Masih ada banyak pengunjung yang menggunakan koneksi internet dial-up lambat, yang segera mencari versi yang dapat dicetak sehingga mereka memiliki informasi yang relevan lebih cepat karena koneksi internet yang lambat menyebabkan pemuatan halaman yang sangat lambat untuk meninjau secara online.

Kerugian:

Ini meningkatkan ukuran halaman untuk memuat setelah menambahkan CSS baru ini atau jika Anda menambahkan hyper-link maka satu permintaan lagi akan menambah Anda memuat halaman.

Cara melihat & men-debug lembar gaya cetak

Sebelum Anda pergi, periksa pratinjau cetak halaman posting blog Anda saat ini. Dan juga periksa pratinjau cetak halaman ini.

• Untuk Firefox: Bilah Menu >> File >> Print Preview
• Untuk Chrome: Klik kanan pada halaman >> Periksa elemen >> temukan tombol pengaturan di sudut kanan bawah >> centang – Emulasi media CSS.

Cara membangun: print.css

Ini sangat sederhana seperti halnya kami membuat CSS untuk templat seluler. Anda hanya perlu tahu bagian mana yang harus dicetak dan bagian mana yang TIDAK boleh dicetak.

Ayo mulai

Untuk memulai pembuatan cetak CSS, tag-CSS khusus @ media cetak digunakan untuk memberi tahu browser bahwa halaman saat ini akan dicetak.

@ media cetak {
… … …
… tag lain yang ditetapkan pengguna …
… … …
}

Sekarang daftarkan bagian-bagian halaman Anda yang tidak ingin Anda cetak seperti menu, navigasi, bilah sisi dll dan letakkan di tag yang disebutkan di atas seperti

@ media cetak {
#menu, #nav, #sidebar, # sidebar-wrapper {display: none}
}

Buat konten pembungkus utama sepenuhnya:

# main-wrapper {width: 100%; margin: 0; float: none;}

Hapus latar belakang:

body {background: white; }
#container {background: transparent;}

Setel gaya dan ukuran font

tubuh {font: normal 14px Georgia, "Times New Roman", Times, serif; garis-tinggi: 1.5em; warna: # 222; }

Bedakan tautan dan teks

a: tautan {font-weight: bold; teks-dekorasi: garis bawah; warna: # 000; }

Cetak URL setelah tautan

a: tautan: after {content: "(" attr (href) ")"; }

Tampilkan pesan Terima Kasih untuk pembaca

tubuh: setelah {display: blok; konten: "Terima kasih telah mencetak konten kami."; margin-top: 30px; ukuran font: 11pt; warna: # 555; border-top: 1px putus-putus # 555; }

Tentukan margin halaman

@ halaman {margin: 0,5 cm; }

Final stylesheet CSS cetak

@ media cetak {
#menu, #nav, #sidebar, # sidebar-wrapper {display: none}
# main-wrapper {width: 100%; margin: 0; mengapung: tidak ada; }
body {background: white; }
tubuh {font: normal 14px Georgia, "Times New Roman", Times, serif; garis-tinggi: 1.5em; warna: # 222; }
#container {background: transparent;}
@ halaman {margin: 0,5 cm; }
a: tautan {font-weight: bold; teks-dekorasi: garis bawah; warna: # 000; }
a: tautan: after {content: "(" attr (href) ")"; }
tubuh: setelah {display: blok; konten: "Terima kasih telah mencetak konten kami."; margin-top: 30px; ukuran font: 11pt; warna: # 555; border-top: 1px putus-putus # 555; }
.noprint { display: tidak ada }
}

Sampel di atas hanya untuk tujuan belajar. Untuk setiap blogger ada style sheet yang berbeda untuk masing-masing.

Hindari barang-barang ekstra untuk dicetak

Dalam contoh di atas jika Anda amati, Anda akan melihat kode CSS .noprint. Sementara saya sedang mengerjakan ini, saya perhatikan beberapa widget masih bisa dicetak dan itu benar-benar tidak diinginkan dan mengganggu di atas kertas. Jadi kelas CSS khusus didefinisikan untuk menghindari hal-hal ekstra dari kertas. Yang perlu Anda lakukan hanyalah memasukkan kode html yang tidak diinginkan sebagai;

… barang tambahan yang tidak diinginkan …

Dan mendefinisikan kelas itu lakukan display: tidak ada dalam stylesheet CSS.
Sekarang mulailah membangun stylesheet Anda sendiri untuk situs weblog Anda yang indah dan membuatnya lebih mudah dibaca, diakses, dapat digunakan secara online dan juga offline.