資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 CSS 停用瀏覽器列印選項（頁首、頁尾、頁邊距）？
我們可以僅透過 CSS 來控制列印預覽頁面的頁首、頁尾和頁邊距，甚至可以實現分頁媒體的所需佈局和方向。我們將使用 `@page` 指令來實現我們的目標。
在瀏覽器中預覽列印頁面時，我們會看到一些額外的頁面資訊，例如頁面標題、頁面預覽日期和時間以及預覽中的頁碼，這些都位於頁面的頁首和頁尾中。我們還會看到應用於頁面預覽媒體的一些額外頁邊距。
語法
@media print {
@page {
/* Desired CSS */
}
}
解釋
在這種方法中，我們將在 `@media print` 規則內使用 `@page` at-rule（或指令），CSS 提供的該規則允許我們對分頁媒體應用格式，其中包括螢幕、紙張等上可見的頁面。
藉助 `@page` 指令，我們可以控制列印頁面的佈局、設計、頁邊距、方向，甚至特定頁面的設計。該指令廣泛用於設計離散（分頁）媒體。
分頁媒體與通常的連續媒體（如網站）的不同之處在於，在分頁媒體中，如果內容溢位，它將被分成單獨的頁面。我們仍然可以藉助 `@page` 指令的偽類來控制頁面的佈局。
示例 1
在這個示例中，我們將透過在 `@page` 指令內將頁邊距設定為“0”來刪除分頁媒體中可見的頁首、頁尾和額外頁邊距。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@page {
margin: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
按 command + p（在 Mac 上）或 ctrl + p（在 Windows、Linux 上）檢視列印預覽螢幕
示例 2
在這個示例中，我們將從分頁媒體中刪除瀏覽器列印選項，但將在分頁媒體螢幕中向 body 元素新增頁邊距。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
按 command + p（在 Mac 上）或 ctrl + p（在 Windows、Linux 上）檢視列印預覽螢幕
結論
在本文中，我們學習了 `@page` CSS 指令，以及如何使用此指令僅使用 CSS 來刪除/停用列印預覽中的瀏覽器列印選項。
更新於：2023年2月22日
3K+ 次瀏覽
廣告