Bài viết này sẽ giới thiệu chi tiết về CSS trong câu lệnh truy vấn phương tiện in @mediaprint, bao gồm cú pháp cơ bản, các tình huống sử dụng phổ biến và ví dụ mã, như ẩn các yếu tố không cần thiết, điều chỉnh phông chữ và màu sắc, xử lý hiển thị URL của liên kết, kiểm soát phân trang, điều chỉnh lề và nền, v.v. Bài viết cũng cung cấp phương pháp kiểm tra và những lưu ý quan trọng, chia sẻ các kỹ thuật nâng cao. Mời các bạn cùng tham khảo!
@media print là câu lệnh truy vấn phương tiện in trong CSS, dùng để định nghĩa các quy tắc kiểu chỉ có hiệu lực khi in tài liệu. Với câu lệnh này, bạn có thể tối ưu hóa hiệu quả in trang web, ví dụ như ẩn các yếu tố không cần thiết, điều chỉnh bố cục, thay đổi màu sắc phông chữ, v.v. Dưới đây, tôi sẽ giải thích chi tiết qua các ví dụ mã.
I. Cú Pháp Cơ Bản
@media print {
/* Viết các quy tắc CSS áp dụng khi in tại đây */
selector {
property: value;
}
}
II. Các Tình Huống Sử Dụng Phổ Biến & Ví Dụ Mã
1. Ẩn các yếu tố không cần thiết
Khi in, bạn thường cần ẩn thanh điều hướng, quảng cáo, nút bấm và các nội dung không liên quan.
@media print {
.navbar, .ad-banner, .print-button {
display: none !important;
}
}
2. Điều chỉnh phông chữ và màu sắc
Khi in, nên sử dụng phông chữ màu tối (tránh màu sáng không rõ ràng) và ưu tiên sử dụng đơn vị pt.
@media print {
body {
font-family: “Times New Roman”, serif;
font-size: 12pt;
color: #000 !important; /* Buộc in màu đen */
}
}
3. Xử lý hiển thị URL của liên kết
Khi in, hiển thị đầy đủ URL của các liên kết (mặc định không hiển thị).
@media print {
a::after {
content: ” (” attr(href) “)”;
font-size: 0.8em;
color: #666;
}
}
4. Kiểm soát phân trang
Tránh nội dung bị cắt đứt, kiểm soát vị trí phân trang.
IV. Những Lưu Ý Quan Trọng
Phương pháp kiểm tra:
Không cần phải in thật, chỉ cần sử dụng chức năng “Xem trước khi in” trên trình duyệt (phím tắt Ctrl/Cmd + P) để kiểm tra.
Lựa chọn đơn vị:
Khuyến khích sử dụng pt (point), cm/mm (đơn vị vật lý) thay vì px, vì nó phù hợp hơn với kích thước giấy.
Vượt qua kiểu dáng mặc định:
Các kiểu dáng in có thể cần phải sử dụng !important để ghi đè lên các kiểu dáng ban đầu (nhưng nên dùng ít).
Xử lý màu nền:
Trình duyệt mặc định không in màu nền, nếu cần hiển thị, bạn cần thiết lập bắt buộc:
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
V. Kỹ Thuật Nâng Cao
Tùy chỉnh đầu trang và chân trang:
Sử dụng quy tắc @page để định nghĩa:
@page {
margin: 2cm;
@top-center {
content: “Hồ sơ cá nhân của tôi”;
}
}
(Lưu ý: Trình duyệt hỗ trợ hạn chế, hiệu quả có thể khác nhau giữa các trình duyệt).
Nhiều kiểu dáng cho các trang khác nhau:
Sử dụng trang tên:
.cover-page {
page: cover; /* Chỉ định tên trang */
}
@page cover {
margin: 5cm;
}
.cover-page {
page: cover; /* Chỉ định tên trang */
}
@page cover {
margin: 5cm;
}
Đến đây là bài viết chi tiết về CSS @media print. Hy vọng các bạn sẽ tiếp tục ủng hộ trong tương lai!
📌 Bài viết này được đóng góp bởi người dùng và bản quyền thuộc về người dùng đã xây dựng bài viết. Bản quyền thuộc về tác giả gốc và chỉ dùng cho mục đích học tập và giao tiếp. Nếu có bất kỳ vi phạm nào, vui lòng liên hệ với chúng tôi để xóa nó.