Question

我目前正在使用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;
}

Answer 1

我认为你不能用纯css做到这一点。还有其他更简单的方法来制作SCSS，代码更清晰。

另一种方法是，您是否可以将特定文件上传到打印介质，这样，您可以集中管理特定类型屏幕的所有样式，从而提高可维护性。

这样的事情：

<link rel="stylesheet" media="print" href="http://foo.com/mystyle.css" />

有关更多信息，look here。

我以某种方式帮助过。

Answer 2

剥离所有格式可能不是你想要的 - 尝试一下，但相信它看起来很奇怪。对于初学者来说，最好不要剥离特定样式，例如* { background: none transparent; color: #000; }。 *选择器将定位所有内容，因此请谨慎使用。

如果确实想要删除所有样式，那么* { all: unset }或* { all: initial } - 这些行为略有不同，但要注意browser support for all isn't perfect。

您还可以查看各种css重置，它可以去除或标准化大多数样式。

媒体打印CSS

2 个答案: