Gunakan jquery CSS untuk mengawal percetakan style_jquery

1. Tambahkan gaya cetakan

1. Sediakan fail css untuk paparan skrin dan cetakan, seperti yang ditunjukkan di bawah:
css untuk paparan skrin:
css untuk mencetak:

2. Kaedah Import:

3 Tulis terus gaya paparan skrin dan gaya cetakan dalam fail css:
@cetakan media {}{
h1 {
warna: hitam;
}
h2 {}{
warna: kelabu;
}
}
Kandungan dalam cetakan @media hanya sah untuk kandungan bercetak dan kandungan lain ialah gaya paparan skrin.

Lain-lain:
Selalunya berguna untuk membuat helaian gaya yang tidak menyatakan jenis media (atau menggunakan media="semua"). Apabila anda sudah bersedia untuk menentukan sesuatu yang istimewa
Apabila ia berkaitan dengan peraturan mencetak, anda hanya boleh membuat helaian gaya yang berasingan dan melumpuhkan mana-mana gaya yang tidak kelihatan baik apabila dicetak. Satu masalah dengan menggunakan pendekatan ini ialah anda perlu memastikan bahawa gaya pencetak benar-benar mengatasi helaian gaya utama. Ia sedia untuk digunakan! penting.

2. Nota tentang gaya cetakan:

1. Tidak disyorkan untuk menggunakan latar belakang dalam gaya cetakan, kerana penyemak imbas tidak boleh mencetak kandungan latar belakang dalam CSS secara lalai Ia hanya boleh digunakan apabila penyemak imbas adalah
Latar belakang boleh dicetak hanya apabila latar belakang boleh ditetapkan untuk dicetak (pilihan dalam pilihan lanjutan IE). Walaupun latar belakang dicetak, ia mungkin mengatasi sebarang teks yang ditindih padanya.
Ini adalah benar, terutamanya untuk teks yang sangat kontras pada monitor dengan latar belakang berwarna, tetapi digabungkan dengan latar belakang ini apabila dicetak pada pencetak hitam dan putih.
Latar belakang: tiada; alih keluar latar belakang
Gambar dan warna.

Anda boleh menggunakan atribut warna latar belakang untuk menetapkan warna latar belakang kepada putih, seperti ini: font-family: Arial-line-height: 26px;"> Anda juga boleh mendapatkan kesan yang sama dengan menggunakan pintasan latar belakang: latar belakang: putih. Oleh itu Suka latar belakang: putih;
Kenyataan sedemikian bukan sahaja menetapkan warna latar belakang kepada putih, tetapi juga menghapuskan semua imej latar belakang. Gunakan atribut pintasan latar belakang ini,
Anda mencapai dua perkara - tetapkan latar belakang putih dan hapuskan imej - dengan kod yang sangat sedikit.

2. Jika anda memerlukan gambar untuk dipaparkan dalam kandungan bercetak, sila tambahkannya dalam kod HTML.

3. Tetapan cetakan menggunakan unit fizikal, jadi sebaiknya jangan gunakan piksel (px) untuk saiz Anda boleh menggunakan pt atau cm

4. Sembunyikan kandungan yang tidak perlu atau sekunder. paparan: tiada;

5. Cuba jangan biarkan kandungan terapung Sesetengah penyemak imbas akan menyebabkan masalah apabila mencetak div terapung, yang memerlukan perhatian khusus.

Jangan gunakan blok terapung dalam helaian gaya bercetak, seperti ini: float: none;. Contohnya, pelayar berasaskan Gecko

(seperti Netscape 6), apabila pengguna menggunakannya untuk menyemak imbas halaman cetakan, ia akan memotong kandungan dalam elemen terapung.
Kandungan tidak akan dihantar ke pencetak, dan tidak akan ada kesan pada halaman seterusnya - ia akan hilang.

6. Cuba yang terbaik untuk mengutamakan kandungan penting dalam kod HTML, yang boleh menjimatkan banyak masalah dalam gaya pencetakan.

7. Mencetak adalah berbeza daripada halaman web Apabila mencetak, jidar putih mesti ditinggalkan, dan unit adalah inci (dalam).

8 Untuk memastikan semua teks pada halaman dicetak dalam warna hitam, gunakan pemilih kad bebas (lihat halaman 54) dan !penting untuk mencipta pembolehubah yang memisahkan setiap

Teg semuanya diformatkan dengan satu gaya teks hitam:

*{ warna: ##000# !penting }

9. Paparkan maklumat URL pautan dalam pencetakan: gunakan pemilih lanjutan: selepas dan sifat CSS lanjutan dipanggil kandungan,

Cetak teks yang tidak dipaparkan pada skrin pada penghujung elemen gaya.

Malangnya, helah :selepas pemilih dan atribut kandungan tidak berfungsi pada Internet Explorer 6 atau lebih awal
(Setakat penulisan ini, ia tidak berfungsi pada IE 7 sama ada). Tetapi ia berfungsi pada Firefox dan Safari, jadi anda sekurang-kurangnya mempunyai kejelasan
Terangkan URL supaya pelawat boleh menggunakan penyemak imbas mereka.

Untuk melakukan ini, tambahkan gaya pada helaian gaya cetakan yang mencetak URL selepas setiap pautan. Anda juga boleh menambah item teks tambahan

Gunakan kurungan untuk menjadikannya kelihatan lebih baik:

a:selepas {kandungan: " (" attr(href) ") ";}

Walau bagaimanapun, CSS ini tidak membezakan antara pautan luaran atau dalaman, jadi ia juga mencetak relatif tidak berguna
ke halaman lain di tapak web yang sama. Pautan dokumen: "Lawati halaman utama (../../index.html)." Dengan sedikit sihir CSS 3, anda boleh memaksa gaya ini untuk hanya menaip
Cetak URL mutlak (iaitu yang bermula dengan http://), seperti ini:
a[href^="http://"]:selepas {kandungan: " (" attr(href) ") ";}

10. Tambahkan pemisah halaman pada pencetakan: Dua atribut yang dikenali secara meluas ialah pemecah halaman sebelum dan selepas pemisah.
page-break-before memberitahu pelayar web untuk memasukkan pemisah halaman sebelum gaya tertentu. Gunakan page-break-sebelum
Harta ini menyebabkan imej dicetak pada halaman baharu dan muat pada keseluruhan halaman.
Untuk menjadikan elemen muncul sebagai item terakhir pada halaman bercetak, tambah page-break-after: sentiasa pada gaya elemen tersebut.

Buat dua gaya kelas, dinamakan seperti .break_after dan .break_before, seperti ini:
.break_before { page-break-before: sentiasa; .break_after { page-break-after: sentiasa;
Anda kemudiannya boleh menggunakan gaya ini secara terpilih pada elemen yang sepatutnya dicetak di bahagian atas atau bawah halaman.

3. Uji gaya cetakan

Biasanya, adalah mustahil untuk kami menggunakan pencetak untuk ujian Terdapat "Pratonton Cetak" dalam bar menu "Fail" pelayar IE, yang boleh digunakan

Cetak pratonton untuk menguji.