CSS打印样式表
虽然我们很少从网络上打印内容,但打印样式表不容忽视。它们可以用来确保您的网站内容以易读和适合打印的方式呈现。以下是一个简单的、主观的打印样式表,您可以将其用作自己的基础:
@media print {
@page {
size: A4;
}
body {
margin: 0;
padding: 0;
}
body, p, h1, h2, h3, h4, h5, h6, li {
font-family: Helvetica, Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-bottom: 0.5em;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 18pt;
}
h3 {
font-size: 14pt;
}
a:any-link {
color: #0000FF;
text-decoration: none;
}
```css
a:any-link::after {
content: " [" attr(href) "] ";
}
img {
width: 100%;
}
header, footer, nav, aside, form, iframe, script {
display: none;
}
@media print {
@page {
size: auto;
}
body {
margin: 0;
padding: 0;
}
body, p, h1, h2, h3, h4, h5, h6, li {
font-family: "宋体", sans-serif;
font-size: 12pt;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-bottom: 10pt;
}
h1, h2, h3 {
font-size: 14pt;
}
a:any-link {
color: #000;
text-decoration: none;
}
a:any-link::after {
content: " [" attr(href) "] ";
}
img {
width: 100%;
}
header, footer, nav, aside, form, iframe, script {
display: none;
}
}
@media print
- 打印媒体查询,用于在打印页面时应用样式。@page
:size
- 指定页面大小。body
:margin
- 移除默认的边距。padding
- 移除默认的内边距。body, p, h1, h2, h3, h4, h5, h6, li
:font-family
- 使用适合打印的字体。font-size
- 使用易读的字体大小。font-weight
- 重置字体粗细。h1, h2, h3, h4, h5, h6
:font-weight
- 使标题加粗。margin-bottom
- 在标题和下方内容之间添加一些间距。h1
-h3
:font-size
- 使用较大的字体大小。a:any-link
:color
- 使用适合打印的颜色。text-decoration
- 移除链接的下划线。a:any-link::after
:content
- 在链接后添加链接的URL。img
:width
- 使图片填满页面宽度。header, footer, nav, aside, form, iframe, script
:display
- 从页面中移除不必要的元素。