CSS page print header
CSS page Print eyebrows
2. How to Implement Print Headers and Footers
1. CSS @media print Media Query
In CSS, we can use the @media print media query to set styles for printed pages. This media query allows us to set styles specifically for printed pages, including the display and style of the header and footer.
2. Setting Print Headers and Footers
To set headers and footers for printed pages, we can use the CSS @page rule. The @page rule allows us to set print styles for both the header and footer.
The specific implementation method is as follows:
@page {
@top-center {
content: "Header content";
}
@bottom-center {
content: "Footer content";
}
}
In the above code, we use the @page rule to set the style of the printed page. The header content is set in @top-center, and the footer content is set in @bottom-center. This allows customized header and footer content to be displayed on the printed page.
3. Sample Code
The following is a simple sample code that demonstrates how to use CSS to set the header and footer content of a printed page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Header and Footer</title>
<style>
@media print {
@page {
@top-center {
content: "Print Page Header";
}
@bottom-center {
content: "Page {page} of {pages}";
}
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a demo page for printing with a custom header and footer.</p>
</body>
</html>
In the example code above, we use the @media print media query and The @page rule is used to set the header and footer of the printed page. The customized header and footer content will be displayed on the printed page.
4. Run Result
When we save the above sample code as HTML When you open the print preview in a browser, you’ll see the following:
- “Print Page Header” will be displayed at the top center of each page;
- “Page {page} of {pages}” will be displayed at the bottom center of each page, indicating the current page number and the total number of pages.
With these settings, we can display customized header and footer content on printed pages, making it easier for users to view the printed content.
III. Summary
Through the above introduction, we’ve learned how to use CSS to control the header and footer content of printed pages. By using the @media print media query and the @page rule, we can customize the header and footer styles of printed pages and display customized information on the printed page.
In actual web development, to enhance the user experience of printed pages, we can customize the footer content based on actual needs. For example, we can add the print date, print title, author information, and adjust the footer’s position and style to make the printed page more aesthetically pleasing and easier to read.