CSS in 打印: Dành cho Người Mới Bắt Đầu
Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS in ấn. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được dẫn bạn đi trên hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta hãy bắt đầu!
CSS in ấn - Sử dụngBien Print Style Sheet
Bạn có từng thử in một trang web và nhận thấy rằng nó trông khác hẳn so với những gì bạn thấy trên màn hình? Đó là lúc các bảng样式 in bước vào cuộc giải cứu! Chúng giống như những lời nguyền kỳ diệu giúp biến nội dung web của bạn thành các định dạng in ấn friendly.
Hãy bắt đầu với một ví dụ đơn giản:
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Trong đoạn mã này, chúng ta đang告诉 trình duyệt sử dụng các bảng样式 khác nhau cho màn hình và in ấn. Thuộc tính media là vũ khí bí mật của chúng ta. Khi bạn xem trang trên màn hình, nó sử dụng screen.css. Nhưng khi bạn nhấn nút in, và voilà! print.css lên ngôi.
CSS in ấn - Sử dụng Media Queries và @page At-Rule
Bây giờ, hãy nâng cao trò chơi của chúng ta với media queries và quy tắc @page. Đây giống như cặp đôi động lực của CSS in ấn!
@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}
@page {
margin: 1in;
}
}Mã này nói, "Hey trình duyệt, khi bạn đang in, hãy làm cho văn bản có kích thước 12pt, đen trên trắng, và cho tôi 1 inch lề xung quanh." Phần @media print là media query của chúng ta, và @page thiết lập bố cục trang.
CSS in ấn - Phát hiện Yêu cầu In
Sẽ không tuyệt vời nếu trang web của bạn có thể biết khi ai đó đang cố gắng in nó? Well, nó có thể! Dưới đây là cách làm:
window.addEventListener('beforeprint', function() {
console.log('Đang in...');
});
window.addEventListener('afterprint', function() {
console.log('Hoàn thành in');
});Đoạn mã JavaScript này giống như một tin tặc nhỏ bé whispering cho chúng ta biết khi bắt đầu và kết thúc in. Rất hữu ích cho những điều chỉnh cuối cùng!
CSS in ấn - Sử dụng @page at-rule
Quy tắc @page giống như một cây c这支 cho phép kiểm soát trang in của bạn. Hãy nhìn nó trong hành động:
@page {
size: A4;
margin: 0;
}
@page :first {
margin-top: 2cm;
}Tại đây, chúng ta đang thiết lập tất cả các trang để có kích thước A4 không có lề, nhưng cấp cho trang đầu tiên một lề trên đặc biệt là 2cm. Nó giống như trải thảm đỏ cho nội dung của bạn!
CSS in ấn - Sử dụng @media Query
Chúng ta đã thấy @media trước đây, nhưng hãy đi sâu hơn:
@media print {
.no-print {
display: none;
}
a[href^="http"]:after {
content: " (" attr(href) ")";
}
}Đoạn mã này ẩn các phần tử có lớp no-print và thêm URL sau bất kỳ liên kết ngoài nào. Nó giống như có một trợ lý cá nhân dọn dẹp trang web của bạn cho in ấn!
CSS in ấn - Sử dụng sự kiện afterprint
Nhớ lại tin tặc JavaScript nhỏ bé của chúng ta từ trước? Hãy để nó làm việc:
window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('Hy vọng bạn đã thưởng thức bản in của mình!');
});Mã này thay đổi màu nền thành xanh dương sau khi in và hiển thị một thông báo thân thiện. Nó giống như để lại một lời cảm ơn nhỏ cho người dùng của bạn!
CSS in ấn - Liên kết đến một Bảng样式 Ngoại bộ
Cuối cùng, hãy tóm tắt cách liên kết một bảng样式 in ấn ngoại bộ:
<link rel="stylesheet" type="text/css" href="print.css" media="print">Dòng này là vé vàng của bạn để có các trang web in ấn friendly. Chỉ cần tạo một tệp có tên print.css, thêm các样式 in ấn của bạn, và bạn đã sẵn sàng!
| Phương pháp | Mô tả | Ví dụ |
|---|---|---|
| Print Style Sheet | Tệp CSS riêng cho phương tiện in ấn | <link rel="stylesheet" type="text/css" href="print.css" media="print"> |
| Media Queries | Các quy tắc CSS chỉ áp dụng khi in ấn | @media print { body { font-size: 12pt; } } |
| @page At-Rule | Điều khiển các thuộc tính cụ thể của trang | @page { margin: 1in; } |
| Phát hiện Yêu cầu In | JavaScript để phát hiện các lần thử in | window.addEventListener('beforeprint', function() { ... }); |
| Sự kiện afterprint | JavaScript để chạy mã sau khi in | window.addEventListener('afterprint', function() { ... }); |
Và thế là bạn đã có nó, các bạn! Bạn vừa bước vào thế giới của CSS in ấn. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm. Ai biết được? Bạn có thể trở thànhPicasso của các bảng样式 in ấn! Hẹn gặp lại các bạn, chúc các bạn viết mã vui vẻ!
Credits: Image by storyset