@page 选择器

 

@page 选择器是CSS中的重要选择器之一，它用于设置页面打印时的样式。在网页开发中，有时会需要对页面进行打印，而打印时要求有不同的样式，这时就可以使用@page选择器来设置页面打印时的样式。

 

@page选择器的语法如下：

 

```css

@page {

/* 设置页面的属性 */

}

```

 

在@page选择器中，我们可以设置页面打印时的各种属性，如页面大小、边距、页眉、页脚等。下面我们来详细介绍@page选择器的各种属性。

 

1. 页面大小

@page选择器可以用来设置页面的大小，如A4、Letter等。在CSS中，我们可以使用以下属性来设置页面大小：

 

```css

@page {

size: A4; /* 设置页面大小为A4 */

}

```

 

另外，我们还可以自定义页面大小，如设置宽度和高度：

 

```css

@page {

size: 210mm 297mm; /* 设置页面大小为210mm*297mm */

}

```

 

2. 页面边距

@page选择器还可以用来设置页面的边距，包括上、下、左、右边距。我们可以使用以下属性来设置页面的边距：

 

```css

@page {

margin: 1cm; /* 设置页面上、下、左、右边距都为1cm */

}

```

 

如果想要分别设置上、下、左、右边距，可以使用如下属性：

 

```css

@page {

margin-top: 1cm; /* 设置页面上边距为1cm */

margin-bottom: 2cm; /* 设置页面下边距为2cm */

margin-left: 1cm; /* 设置页面左边距为1cm */

margin-right: 2cm; /* 设置页面右边距为2cm */

}

```

 

3. 页眉和页脚

@page选择器还可以用来设置页面的页眉和页脚，我们可以使用如下属性来设置页眉和页脚：

 

```css

@page {

margin-top: 1cm; /* 设置页面上边距为1cm */

margin-bottom: 2cm; /* 设置页面下边距为2cm */

}

 

@page :first { /* 设置*页的页眉和页脚 */

margin-top: 3cm; /* 设置*页的上边距为3cm */

margin-bottom: 4cm; /* 设置*页的下边距为4cm */

@top-center {

content: "页眉内容"; /* 设置页眉内容 */

}

@bottom-center {

content: "页脚内容"; /* 设置页脚内容 */

}

}

 

@page { /* 设置其他页的页眉和页脚 */

@top-center {

content: "页眉内容"; /* 设置页眉内容 */

}

@bottom-center {

content: "页脚内容"; /* 设置页脚内容 */

}

}

```

 

通过以上属性设置，我们可以对页面的打印样式进行灵活的调整，使页面在打印时呈现出更好的效果。

 

总结一下，@page选择器是CSS中用来设置页面打印时样式的重要选择器，通过@page选择器可以设置页面大小、边距、页眉和页脚等属性，从而控制页面在打印时的样式。在网页开发中，@page选择器是非常有用的，我们可以根据实际需求灵活运用@page选择器，为页面打印时的样式定制不同的效果。希望以上内容能够对大家有所帮助，谢谢阅读！