Menyiapkan Print Stylesheet CSS Untuk Situs Web [2018]
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.