媒体打印CSS

我目前在CSS中使用媒体查询，我之前没有使用媒体打印。在定义了@media print的文件的按钮处，是否可以删除所有格式而不必复制所有元素？为了简洁，我删除了大部分样式规则。媒体打印CSS

是的，这是一个任务，我的问题超出了班级的范围，只是形成我个人的知识。

nav.sitenavigation { 
 
\t color: yellow; 
 
\t background-color: rgb(241,90,36); 
 
\t text-align: center; 
 
} 
 
nav.sitenavigation p{ 
 
\t display: inline-block; 
 
\t margin: .4em .6em; 
 
\t font-size: 1.6em; 
 
} 
 
nav.sitenavigation a:link{ 
 
\t text-decoration: none; 
 
\t color: yellow; 
 
\t 
 
} 
 
nav.sitenavigation a:visited { 
 
\t color: white; 
 
} 
 
nav.sitenavigation a:hover { 
 
\t color: yellow; 
 
\t text-shadow: 1px -1px 0 black; 
 
} 
 
nav.sitenavigation a:focus { 
 
\t color: yellow; 
 
\t text-shadow: 1px -1px 0 black; 
 
} 
 
nav.sitenavigation a:active { 
 
\t position: relative; 
 
\t top: 1px; 
 
\t 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 { 
 
\t position: absolute; 
 
\t left: -10000px; 
 
} 
 
p.skipnavigation a:focus { 
 
\t color: black; 
 
\t background-color: white; 
 
\t position: relative; 
 
\t top: .4em; 
 
\t left: auto; 
 
\t right: .4em; 
 
\t 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; 
 
}

来源

2016-10-19 William

剥离所有格式可能不是你想要的东西 - 尝试，但相信它会看起来很奇怪。对于初学者，你可能更适合剥离特定的风格，如* { background: none transparent; color: #000; }。 *选择器将针对所有内容，因此请谨慎使用。

如果你真的要删除各种风格，有* { all: unset }或* { all: initial } - 这些都略有不同的行为，但要知道，browser support for all isn't perfect。

你也可以看看那里的各种css重置，这些重置会去除或标准化大多数样式。

来源

2016-10-19 14:53:55 jack

当我有空时，我将不得不更详细地了解这一点。乍一看这可能会更有用，我确实看到Safari和IE不支持。 – William

我认为你不能这样做纯粹的CSS。还有其他更简单的方法来制作SCSS，代码更干净。

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

事情是这样的：

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

欲了解更多信息，look here。

我以某种方式提供了帮助。

来源

2016-10-19 15:06:06

我想我没有指定我的意图，我正在看它将它发送到打印机。 HTML格式化的方式在打印时不会有用。 – William

媒体打印CSS

回答

相关问题