Hướng dẫn tổng quan về CSS Paged Media cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới đầy thú vị của CSS Paged Media. Đừng lo lắng nếu bạn chưa từng nghe đến nó trước đây - chúng ta sẽ bắt đầu từ những基础知识 và dần dần nâng cao. Cuối bài hướng dẫn này, bạn sẽ có thể tạo ra những bố cục in ấn tuyệt đẹp bằng CSS. Vậy, chúng ta cùng bắt đầu nào!

CSS Paged Media là gì?

CSS Paged Media là một tập hợp các tính năng của CSS cho phép bạn kiểm soát cách nội dung web của bạn trông như thế nào khi được in hoặc xem dưới dạng có trang (như PDF). Nó giống như việc bạn cho website của mình một diện mạo mới cho máy in!

Hãy tưởng tượng bạn đã tạo ra một website đẹp mắt, nhưng khi bạn cố gắng in nó, mọi thứ trông lộn xộn và không đúng vị trí. Đó là lúc CSS Paged Media ra vào cuộc giải cứu! Nó giúp bạn duy trì kiểm soát bố cục của mình, ngay cả khi nó không trên màn hình.

Các thuộc tính liên quan của CSS Paged Media

Hãy cùng nhìn vào một số thuộc tính quan trọng giúp CSS Paged Media thực hiện phép màu:

Thuộc tính	Mô tả	Ví dụ
@page	Định nghĩa kích thước và lề của một trang	@page { size: A4; margin: 2cm; }
size	Đặt kích thước của hộp trang	size: 8.5in 11in;
marks	Thêm dấu cắt và/hoặc dấu chéo vào tài liệu	marks: crop cross;
bleed	Chỉ định khu vực chảy máu cho nội dung in	bleed: 0.5cm;
page-break-before	Kiểm soát các断裂 trang trước một phần tử	page-break-before: always;
page-break-after	Kiểm soát các断裂 trang sau một phần tử	page-break-after: avoid;
page-break-inside	Kiểm soát các断裂 trang trong một phần tử	page-break-inside: avoid;

Hãy nhìn một số ví dụ về cách sử dụng chúng:

@page {
size: A4;
margin: 2cm;
@top-center {
content: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

Trong ví dụ này, chúng ta đang thiết lập một trang A4 với lề 2cm. Chúng ta thêm một tiêu đề ở giữa trên cùng của mỗi trang và số trang ở góc dưới phải. Chúng ta cũng đảm bảo rằng mỗi h1 bắt đầu trên một trang mới và các bảng không bị断裂 giữa các trang.

Các quy tắc at của CSS

Các quy tắc at của CSS là các câu lệnh hướng dẫn CSS cách hành xử. Chúng bắt đầu bằng một dấu at (@) tiếp theo là một标识符. Hãy cùng nhìn vào một số quy tắc at cụ thể cho Paged Media:

Quy tắc at	Mô tả	Ví dụ
@page	Định nghĩa một hộp trang cho phương tiện có trang	@page :first { margin-top: 10cm; }
@top-left	Định nghĩa nội dung cho góc trên bên trái của trang	@top-left { content: "Chapter 1"; }
@top-center	Định nghĩa nội dung cho giữa trên của trang	@top-center { content: "My Book"; }
@top-right	Định nghĩa nội dung cho góc trên bên phải của trang	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	Định nghĩa nội dung cho góc dưới bên trái của trang	@bottom-left { content: "Confidential"; }
@bottom-center	Định nghĩa nội dung cho giữa dưới của trang	@bottom-center { content: "Copyright 2023"; }
@bottom-right	Định nghĩa nội dung cho góc dưới bên phải của trang	@bottom-right { content: counter(page); }

Dưới đây là một ví dụ về cách bạn có thể sử dụng chúng:

@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

Trong ví dụ này, chúng ta thêm một tiêu đề cho mỗi trang với tựa sách và số trang ở góc dưới phải. Chúng ta cũng loại bỏ các phần tử này từ trang đầu tiên để có một trang tựa sạch sẽ hơn.

Các lớp伪 của CSS

Các lớp伪 được sử dụng để xác định một trạng thái đặc biệt của một phần tử. Trong ngữ cảnh của Paged Media, có một số lớp伪 hữu ích:

Lớp伪	Mô tả	Ví dụ
:first	Chọn trang đầu tiên	@page :first { margin-top: 10cm; }
:left	Chọn tất cả các trang bên trái	@page :left { margin-left: 4cm; }
:right	Chọn tất cả các trang bên phải	@page :right { margin-right: 4cm; }
:blank	Chọn tất cả các trang trắng	@page :blank { @top-center { content: none; } }

Hãy nhìn cách chúng ta có thể sử dụng chúng:

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alice's Adventures in Wonderland";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapter " counter(chapter);
}
}

Trong ví dụ này, chúng ta đang tạo một bố cục khác nhau cho trang đầu tiên, các trang bên trái và bên phải. Trang đầu tiên có lề trên lớn hơn và không có tiêu đề hoặc chân trang. Các trang bên trái có tựa sách ở góc trên bên trái, trong khi các trang bên phải có số chương ở góc trên bên phải.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới kỳ diệu của CSS Paged Media. Từ việc thiết lập kích thước trang và lề đến việc kiểm soát断裂 trang và thêm tiêu đề và chân trang, bạn bây giờ đã có công cụ để tạo ra những bố cục in ấn đẹp mắt với CSS.

Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ giỏi. Hãy thử nghiệm với các thuộc tính và quy tắc at trong các dự án của riêng bạn. Bạn có thể ngạc nhiên với mức độ kiểm soát mà bạn có thể có đối với các bố cục in ấn của mình!

Chúc các bạn may mắn và những bản in luôn sắc nét và đẹp mắt!

Credits: Image by storyset