CSS Web打印页眉页脚|极客教程

CSS Web打印页眉页脚

在网页打印时，我们经常需要在打印页面的页眉和页脚中添加一些信息，比如公司名称、页码等。通过CSS，我们可以很方便地控制网页打印时的页眉和页脚样式。本文将详细介绍如何使用CSS来实现网页打印时的页眉和页脚效果。

1. 使用@page规则定义页眉和页脚

在CSS中，我们可以使用@page规则来定义打印页面的样式，包括页眉和页脚。下面是一个简单的示例代码，演示如何定义打印页面的页眉和页脚：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
  }
}

在上面的代码中，我们使用@page规则定义了打印页面的大小为A4，页边距为1cm。@top-center表示页眉位于页面的中间位置，内容为”页眉 – geek-docs.com”；@bottom-center表示页脚位于页面的中间位置，内容为”页脚 – 第X页”，其中X为当前页数。

2. 控制页眉和页脚的位置

除了使用@top-center和@bottom-center来定义页眉和页脚的位置外，我们还可以使用其他关键词来控制页眉和页脚的位置。下面是一个示例代码，演示如何将页眉和页脚分别放在页面的左上角和右下角：

@page {
  size: A4;
  margin: 1cm;
  @top-left {
    content: "左上角页眉 - geek-docs.com";
  }
  @bottom-right {
    content: "右下角页脚 - 第" counter(page) "页";
  }
}

在上面的代码中，我们使用@top-left和@bottom-right来分别定义页眉和页脚的位置，内容分别为”左上角页眉 – geek-docs.com”和”右下角页脚 – 第X页”。

3. 控制页眉和页脚的样式

除了定义页眉和页脚的位置外，我们还可以通过CSS来控制页眉和页脚的样式，比如字体、颜色、边框等。下面是一个示例代码，演示如何设置页眉和页脚的样式：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
    font-family: Arial, sans-serif;
    color: #333;
    border-bottom: 1px solid #333;
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
    font-family: Arial, sans-serif;
    color: #333;
    border-top: 1px solid #333;
  }
}

在上面的代码中，我们使用font-family来设置页眉和页脚的字体为Arial，color来设置字体颜色为#333，border-bottom和border-top来设置页眉和页脚的边框样式。

4. 控制页眉和页脚的显示与隐藏

有时候我们可能需要在打印页面中隐藏页眉和页脚，可以通过CSS的display属性来实现。下面是一个示例代码，演示如何在打印页面中隐藏页眉和页脚：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: none;
  }
  @bottom-center {
    content: none;
  }
}

在上面的代码中，我们使用content: none来隐藏页眉和页脚。

5. 控制页眉和页脚的内容

除了固定的文本内容外，我们还可以在页眉和页脚中插入动态内容，比如当前日期、打印时间等。下面是一个示例代码，演示如何在页脚中显示当前日期：

@page {
  size: A4;
  margin: 1cm;
  @bottom-center {
    content: "打印日期：" attr(data-date);
  }
}

在上面的代码中，我们使用attr(data-date)来获取元素的data-date属性值，从而显示当前日期。

6. 控制页眉和页脚的页码

在打印页面中，我们经常需要显示页码，可以通过CSS的counter()函数来实现。下面是一个示例代码，演示如何在页脚中显示页码：

@page {
  size: A4;
  margin: 1cm;
  @bottom-center {
    content: "页码：" counter(page);
  }
}

在上面的代码中，我们使用counter(page)来显示当前页数。

7. 控制页眉和页脚的对齐方式

除了位置和样式外，我们还可以通过text-align属性来控制页眉和页脚的对齐方式。下面是一个示例代码，演示如何将页眉和页脚居中对齐：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
    text-align: center;
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
    text-align: center;
  }
}

在上面的代码中，我们使用text-align: center来将页眉和页脚居中对齐。

8. 控制页眉和页脚的高度

有时候我们可能需要控制页眉和页脚的高度，可以通过CSS的height属性来实现。下面是一个示例代码，演示如何设置页眉和页脚的高度为30px：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
    height: 30px;
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
    height: 30px;
  }
}

在上面的代码中，我们使用height: 30px来设置页眉和页脚的高度为30px。

9. 控制页眉和页脚的背景色

除了字体和边框样式外，我们还可以通过background-color属性来设置页眉和页脚的背景色。下面是一个示例代码，演示如何设置页眉和页脚的背景色为#f0f0f0：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
    background-color: #f0f0f0;
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
    background-color: #f0f0f0;
  }
}

在上面的代码中，我们使用background-color: #f0f0f0来设置页眉和页脚的背景色为灰色。

10. 控制页眉和页脚的透明度

除了背景色外，我们还可以通过opacity属性来设置页眉和页脚的透明度。下面是一个示例代码，演示如何将页眉和页脚的透明度设置为0.5：

@page {
  size: A4;
  margin: 1cm;
  @top-center {
    content: "页眉 - geek-docs.com";
    opacity: 0.5;
  }
  @bottom-center {
    content: "页脚 - 第" counter(page) "页";
    opacity: 0.5;
  }
}

在上面的代码中，我们使用opacity: 0.5来将页眉和页脚的透明度设置为50%。