tetapan cetakan css

Dengan pembangunan berterusan dan kemajuan pembangunan bahagian hadapan, CSS3 secara beransur-ansur telah menjadi bahagian yang amat diperlukan dalam pembangunan web moden. Walau bagaimanapun, CSS3 bukan sahaja sesuai untuk pemaparan penyemak imbas di Web, tetapi juga boleh digunakan dalam senario bukan Web seperti percetakan dan PDF. Oleh itu, dalam artikel ini, kami akan memberi tumpuan kepada menerangkan tetapan cetakan CSS supaya ia boleh digunakan dengan lebih baik dalam kerja harian.

Sebelum kita mula membincangkan tetapan cetakan CSS, kita perlu terlebih dahulu memahami istilah - "pertanyaan media". Pertanyaan media ialah modul penting dalam CSS3 Ia boleh menyesuaikan diri dengan gaya yang berbeza mengikut ciri skrin peranti atau peranti output untuk mencapai reka bentuk responsif. Dalam istilah orang awam, pertanyaan media memberitahu kami jenis kandungan yang sedang dikeluarkan oleh penyemak imbas. Dan maklumat ini juga sangat penting untuk percetakan kami.

Seterusnya, kami akan membahagikannya kepada tiga bahagian untuk menghuraikan pengetahuan berkaitan tetapan cetakan CSS.

1. Cara menentukan gaya cetakan

Dalam CSS3, kita boleh menggunakan cetakan @media untuk menentukan set gaya cetakan tertentu. Dalam pertanyaan media ini, kita boleh menggunakan semua sifat CSS untuk menentukan gaya dokumen yang dikehendaki apabila ia dicetak.

Kaedah penggunaan khusus adalah seperti berikut:

@cetakan media {
/ Gaya cetakan /
}

Anda juga boleh gunakan teg pautan dalam Muatkan helaian gaya cetakan yang ditentukan di kepala dokumen:

4e66a2fba9e52406a281c94aa59db4da

Perhatikan bahawa apabila menetapkan gaya cetakan untuk dokumen, anda tidak seharusnya menggunakan atribut display:none di dalamnya, kerana ini akan menyebabkan elemen tidak dipaparkan semasa mencetak. Kita harus menggunakan visibility:hidden untuk menyembunyikan elemen, supaya ia tidak menjejaskan pemformatan dan halaman dokumen.

2. Gambaran keseluruhan tetapan cetakan biasa

Sesetengah kandungan web tidak sesuai untuk dikeluarkan secara terus ke kertas semasa mencetak pada masa ini, kami memerlukan tetapan cetakan biasa ini.

2.1 Pemisah halaman

Menggunakan CSS untuk melaksanakan pemisah halaman membolehkan kami mengawal dengan lebih baik di mana halaman dipecahkan. CSS menyediakan dua sifat, page-break-before dan page-break-after Nilai kedua-dua sifat ini boleh menjadi auto, sentiasa, elak atau diwarisi.

2.2 Pencetakan mendatar

Kadangkala kita perlu mencetak jadual atau carta yang lebih luas secara mendatar. Atribut putar boleh memutarkan elemen dengan sudut tertentu di sekeliling titik tengah, dan nilai negatif boleh digunakan untuk mencapai percetakan mendatar.

@cetakan media {
badan {

transform:rotate(-90deg);
transform-origin:top left;

}
}

2.3 Laraskan saiz halaman

Saiz halaman lalai HTML dan CSS Datang dalam saiz A4, tetapi pada sesetengah pencetak saiz halaman yang lebih kecil atau lebih besar mungkin diperlukan. Dalam kes ini, kita boleh menggunakan atribut halaman dalam CSS3:

@media print {
@page {

size: A5 landscape;

}
}

di sini, kami tetapkan saiz halaman kepada kertas A5 dalam orientasi landskap.

3. Teknik pengoptimuman pencetakan

Dalam proses pembangunan sebenar, untuk menjadikan kesan cetakan lebih baik, anda boleh menggunakan beberapa teknik pengoptimuman pencetakan:

3.1 Gunakan teks

Apabila mencetak, kita boleh menggunakan beberapa teks untuk menggantikan ikon atau elemen imej lain. Walaupun teks jenis ini tidak seintuitif ikon, ia boleh menjadikan pencetakan lebih baik dalam hitam dan putih.

3.2 Padamkan elemen berlebihan

Biasanya terdapat beberapa elemen yang tidak diperlukan di bahagian kepala atau hujung dokumen, seperti menu navigasi, pengaki, dsb. Unsur-unsur ini berkemungkinan memberi kesan negatif terhadap estetika gaya halaman apabila dicetak. Oleh itu, apabila mencetak, kita harus mengeluarkan unsur-unsur berlebihan ini.

3.3 Zum Halaman

Kadangkala kita perlu mengecilkan halaman supaya kita boleh meletakkan lebih banyak maklumat pada satu halaman. Dalam operasi sebenar, kami boleh menggunakan CSS untuk mencapai penskalaan halaman.

@cetakan media {
badan {

zoom: 0.8;

}
}

Dengan menetapkan nilai atribut zum, halaman boleh dizum.

Di sini kami hanya menyenaraikan beberapa tetapan pencetakan CSS dan teknik pengoptimuman yang biasa digunakan Dalam pembangunan sebenar, kami juga perlu menjalankan satu siri percubaan dan amalan mengikut keperluan. Secara umumnya, menguasai kaedah tetapan cetakan CSS boleh menjadikan kita lebih selesa dalam pembangunan web dan lebih menyesuaikan diri dengan keperluan pengguna yang sentiasa berubah.

Atas ialah kandungan terperinci tetapan cetakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!