Question

这是我的主要样式表代码。

body {
background-color : #fdf4d5;
font-family : "Times New Roman", Times, serif;
font-size : 100%;
line-height : 1.5;
text-align : left;
}
a {
text-decoration : none;
}
a:link, a:visited {
color : #C80000;
}
a:active {
background-color : #C80000;
color : #FFF;
}
.body {
clear : both;
margin : auto;
width : 70%;
}
.mainHeader img {
height : auto;
margin : 0 0;
width : 100%;
}
.mainHeader nav {
background-color : #faa01e;
border-radius : 5px;
height : 60px;
}
.mainHeader nav ul {
list-style : none;
margin : 0 auto;
}
.mainHeader nav ul li {
color : #FFF;
display : inline;
float : left;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color : #FFF;
display : inline-block;
height : 30px;
padding : 15px 80px;
}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a.visited {
background : #C80000;
color : #FFF;
text-shadow : none;
}
.mainHeader nav ul li a {
border-radius : 5px;
height : 60px;
}
.mainContent {
border-radius : 5px;
line-height : 25px;
}
.content {
border-radius : 5px;
float : left;
width : 70%;
}
.content img {
border-radius : 5px;
height : auto;
margin : 0 0;
width : 100%;
}
.bottomContent {
border-radius : 5px;
padding : 3% 0;
}
.content p:first-letter {
text-transform : uppercase;
}
.content p {
color : #000;
font-family : "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
font-size : 14pt;
font-variant : small-caps;
letter-spacing : 0.1em;
line-height : 145%;
margin : 40px auto;
text-align : left;
text-transform : lowercase;
}

.boxOne {
border-radius : 5px;
float : left;
width : 30%;
}
.boxTwo {
border-radius : 5px;
float : left;
width : 30%;
}
.boxOne img {
border-radius : 5px;
height : auto;
margin : 0 0;
width : 100%;
}
.boxTwo img {
border-radius : 5px;
height : auto;
margin : 0 0;
width : 100%;
}
.mainFooter {
background-color : #FAA01E;
border-radius : 5px;
float : left;
margin : 2% 0;
width : 100%;
}
.mainFooter p {
color : #FFF;
float : right;
margin : 2% auto;
width : 92%;
}

我付出了很大努力并将其转换为可打印格式（print.css）。这是我的print.css代码。

body {
background-color : #FFF;
font-family : "Times New Roman", Times, serif;
width:auto;
font-size : 100%;
line-height : 1.5;
text-align : left;
}
.body {
clear : both;
margin : auto;
width : auto;
}
.mainHeader img {
height : auto;
margin : 0 0;
width : auto;
}
.mainHeader nav {
display:none;
}
.mainHeader nav ul {

}
.mainHeader nav ul li {

}
.mainHeader nav a:link, .mainHeader nav a:visited {

}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a.visited {

}
.mainHeader nav ul li a {

}
.mainContent {
border-radius : 0.05in;
line-height : 0.26in;
width:auto;
}
.content {
border-radius : 0.05in;
float : left;
width : auto;
}
.content img {
border-radius : 0.05in;
height : auto;
margin : 0 0;
width : auto;
}
.bottomContent {
border:none;
width:auto;
}
.content p:first-letter {
text-transform : uppercase;
}
.content p {
color : #000;
font-family:"Times New Roman", Times, serif;
font-size : 14pt;
font-variant : small-caps;
letter-spacing : 0.1em;
line-height : 145%;
margin : 0.42in auto;
text-align : left;
text-transform : lowercase;
}
.boxOne {
display:none;

}
.boxTwo {
display:none;
}
.boxOne img {

}
.boxTwo img {

}
.mainFooter {
background-color : #FFF;
border-top: 0.02in solid #000000;
float : left;
margin : 2% 0;
width : 100%;
}
.mainFooter p {
color : #FFF;
float : right;
margin : 2% auto;
width : 92%;
}

我最好尝试了我的水平，但我不知道这是否正确。原因是我对这个概念没有一个清楚的认识。如果你能帮助我。

谢谢。

Answer 1

首先，确保将适当的样式表应用于适当的介质。您可以使用media元素上的link属性执行此操作：

<link rel="stylesheet" type="text/css" href="screen.css" media="screen">

这将确保您不会使用适用于浏览器的样式污染打印样式表。现在，使用您的浏览器执行Print Preview。如果您没有为打印介质应用任何样式，您应该看到一个非常平淡的页面。非常好。弄清楚你希望打印页面看起来如何，并构建一个打印样式表并链接到它：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

您可以添加到打印样式表并继续在浏览器中查看Print Preview，但我建议您调查Firefox和Web Developer插件（https://addons.mozilla.org/en-US/firefox/addon/web-developer/），以便从中应用不同的样式不同媒体就在您的浏览器中。

最后，我应该注意，如果您希望跨介质应用样式表（可能定义字体），则应该通过不应用media属性链接到该样式表，或者将all值应用于它：

<link rel="stylesheet" type="text/css" href="global.css" media="all">

将样式表转换为可打印格式

1 个答案: