Tetapkan percetakan css

Tetapkan CSS pencetakan

Dengan kemunculan era Internet, dokumen kertas secara beransur-ansur telah digantikan dengan dokumen elektronik Walau bagaimanapun, dalam beberapa situasi tertentu, seperti peperiksaan sekolah, kelulusan dokumen rasmi, dsb., kertas dokumen Dokumentasi masih memainkan peranan penting. Dalam kes ini, kita perlu mempertimbangkan cara untuk mempersembahkan kandungan web dengan anggun pada dokumen kertas, dan proses ini perlu mengikut peraturan tertentu, iaitu mencetak helaian gaya CSS.

Apa yang dipanggil helaian gaya CSS ialah koleksi peraturan yang digunakan untuk mentakrifkan rupa, kedudukan dan gelagat elemen HTML dalam keadaan berbeza, termasuk helaian gaya skrin dan helaian gaya cetakan. Helaian gaya cetakan ialah helaian gaya yang direka khas untuk mencetak. Ia membolehkan kami mengawal saiz, kedudukan dan susunan elemen pada halaman yang dicetak dengan lebih baik, supaya dokumen kertas boleh dipersembahkan dengan lebih baik.

Jadi bagaimana untuk menyediakan cetakan helaian gaya CSS? Di bawah saya akan memperkenalkannya dari tiga aspek berikut:

1 Tetapan asas

Apabila menyediakan pencetakan CSS, kita perlu mempertimbangkan perkara berikut:

1. Lembaran Gaya Cetak hendaklah ditakrifkan dalam fail HTML.
2. Lembaran gaya cetakan hendaklah ditakrifkan selepas helaian gaya skrin.
3. Lembaran gaya cetakan hendaklah ditakrifkan menggunakan cetakan @media.

Templat asas adalah seperti berikut:

@cetakan media {

/ Tentukan gaya cetakan di sini /

}

Jika terdapat berbilang keperluan gaya cetakan, anda boleh menggunakan peraturan @page untuk mentakrifkannya. Contohnya, jika anda perlu menetapkan pengepala halaman kepada nama syarikat, anda boleh menggunakan kod berikut:

@halaman {

@atas {

kandungan : "Nama Syarikat";

}

}

2. Susun atur elemen halaman

Untuk dokumen kertas, susun atur elemen halaman adalah sangat penting. . Kita perlu memastikan kebolehbacaan dan estetika dokumen kertas. Untuk helaian gaya CSS untuk pencetakan, perkara berikut perlu diberi perhatian:

1. Campuran Cina dan Inggeris perlu diproses

Dalam hal pencampuran Cina dan Inggeris, Kita perlu memberi perhatian kepada masalah saiz fon yang berbeza dalam bahasa Cina dan Inggeris Biasanya, menetapkan fon Inggeris kepada separuh daripada fon Cina boleh menjadikan halaman lebih bersih.

badan {

fon-famili: Arial, Helvetica, sans-serif;

}

body.zh {

font -keluarga: "宋体", Arial, Helvetica, sans-serif;

}

body.zh p {

garis-tinggi: 1.6em;

}

body.en {

saiz fon: 12px;

}

body.en p {

baris -ketinggian: 1.2em;

}

2. Lebar halaman hendaklah mengambil kira saiz kertas

Untuk mencetak, kita perlu melaraskan halaman lebar untuk muat Kertas, biasanya kertas A4, mempunyai lebar 210mm, jadi menetapkan lebar halaman kepada sekitar 200mm adalah pilihan terbaik.

3. Cuba elakkan pemangkasan teks

Apabila mencetak, jika baris teks terlalu panjang, ia akan dipotong Untuk mengelakkan ini, kita boleh menggunakan pemecahan perkataan Sifat untuk melaksanakan pembalut baris automatik teks.

p {

patah kata: pecahkan semua;

}

3. Menyembunyikan dan memaparkan elemen

pada halaman web Kami biasanya menggunakan atribut paparan untuk menetapkan mod paparan elemen, tetapi untuk mencetak, paparan beberapa elemen memerlukan pemprosesan khas. Elemen berikut perlu disembunyikan atau dipaparkan:

1. Sembunyikan bar navigasi halaman dan pernyataan hak cipta di bahagian bawah halaman

@cetakan media {

.navbar ,

.navbar-default,

.navbar-kanan,

.footer {

paparan: tiada;

}

}

2. Tunjukkan pautan teks

Dalam halaman web, kami biasanya menggunakan ikon untuk mewakili pautan, tetapi apabila mencetak, ikon ini tidak mudah dilihat , jadi a::after boleh digunakan untuk penggantian teks.

a[href]:selepas {

kandungan: "(" attr(href) ")";

}

3. Tunjukkan sari kata

Apabila mencetak, sari kata artikel biasanya dipaparkan di bawah tajuk utama.

h2 {

paparan: blok;

kedudukan: statik;

pemecah halaman-selepas: sentiasa;

}

Ringkasnya, tetapan mencetak helaian gaya CSS bukan sahaja menyumbang kepada keindahan dan kebolehbacaan dokumen kertas, tetapi juga merupakan ungkapan yang bergaya. Untuk pembangun bahagian hadapan, kemahiran dalam menyediakan cetakan helaian gaya CSS adalah kemahiran yang sangat diperlukan. Saya harap artikel ini memberi inspirasi kepada anda.

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