我目前正在使用 CSS 中的媒体查询,之前我没有使用过媒体打印。在定义了@media print 的文件的按钮处,有没有一种方法可以去除所有格式而不必复制所有元素?为了简洁起见,我删除了大部分样式规则。
是的,这是为了作业,我的问题超出了类的范围,只是我个人的知识。
nav.sitenavigation {
color: yellow;
background-color: rgb(241,90,36);
text-align: center;
}
nav.sitenavigation p{
display: inline-block;
margin: .4em .6em;
font-size: 1.6em;
}
nav.sitenavigation a:link{
text-decoration: none;
color: yellow;
}
nav.sitenavigation a:visited {
color: white;
}
nav.sitenavigation a:hover {
color: yellow;
text-shadow: 1px -1px 0 black;
}
nav.sitenavigation a:focus {
color: yellow;
text-shadow: 1px -1px 0 black;
}
nav.sitenavigation a:active {
position: relative;
top: 1px;
left: 1px;
}
/* body and page container */
body {
font-family: Lato, Arial, Helvetica, sans-serif;
background-color: #faebbf;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #6ac238;
position: relative;
}
/* Skip Nav section */
p.skipnavigation {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: black;
background-color: white;
position: relative;
top: .4em;
left: auto;
right: .4em;
z-index: 2;
}
/* print styles */
@media print {
.container, h1, h2, header, header p, nav p, nav, div, article, p.sitenavigation, nav.sitenavigation, nav.sitenavigation a:visited , p.skipnavigation a:focus, nav.sitenavigation a:link {
color: black;
background-color: white;
}
}
@page {
margin: 1in;
}
最佳答案
我认为你不能用纯 css 来做。还有其他更简单的方法来制作 SCSS,代码更干净。
另一种方式,将特定文件上传到打印媒体,通过这种方式,您可以集中针对特定类型屏幕的所有样式,便于维护。
像这样:
<link rel="stylesheet" media="print" href="http://foo.com/mystyle.css" />
更多信息,look here .
我在某些方面提供了帮助。
关于html - 媒体打印 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40134727/