CSS @page rule xác định kích thước trang sẽ được in. Có một vài điều quan trọng bạn cần kiểm soát khi in trang web.
Những điều này bao gồm:
- Kích thước trang, hướng, lề, đường viền và phần đệm.
- Ngắt trang.
- Tiêu đề đầu trang và cuối trang.
- Bộ đếm trang.
- Hàng mồ côi.
Bạn có thể kiểm soát tất cả những điều trên khi tuân theo @page rule.
Cú pháp:
@page [:left | :right | :first] {
/* print-specific rules */
}
Page Descriptor: Có ba Descriptors trong @page rule như sau:
- size: Chỉ định kích thước của vùng chứa trang.
@page {
size: A4;
}
- marks: Giúp cắt trang bạn muốn in.
@page {
marks: crop cross;
}
- bleed: Mở rộng vùng bleed của hộp.
@page {
bleed: 7pt;
}
Ví dụ:
html<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS @page rule</title>
<style type="text/css">
/* default for all pages */
@page {
margin: 2in;
}
/* margin on left page */
@page :left {
margin: 1in;
}
/* margin on right page */
@page :right {
margin: 3in;
}
/* top margin on first page */
@page :first {
margin-top: 5in;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>CSS Page At-rule</h2>
<p>
If you open output in a new window and print the page
the margin around the text content appears differently
than it appears on the screen.
</p>
</center>
</body>
</html>
Output: Khi bạn chọn in màn hình đầu ra của đoạn mã trên.
Supported Browsers: Các trình duyệt được hỗ trợ bởi CSS @page rule được liệt kê dưới đây:
- Google Chrome 2.0
- Internet Explorer 8.0
- Safari 5.1
- Opera 6.0