Home > Article > Web Front-end > CSS to change screen design and style when printing (code example)

CSS to change screen design and style when printing (code example)

不言Original: 2018-11-12 10:48:212024browse

In this article we will introduce the code to use CSS to change the screen design and style during the printing process. To change the style during printing, you can specify the media attribute in the link tag of the style sheet link in the file, or in the CSS file Use media queries in .

When specifying media attributes using link tags

Code

This is the code for specifying media attributes using link tags.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 
  </head>
  <body>
   <div class="MenuFrame">
    菜单1<br />
    菜单2<br />
    菜单3<br />
    菜单4<br />
    菜单5<br />
    菜单6<br />
  </div>
  <div class="ContentsFrame">
    <h2>题记</h2>
    <p>内容</p>
    <p>
     竹外桃花，纷纷飘落。卿舞霓裳，君弹曲。高山流水，绕指尖幽幽荡漾。执一叶扁舟，在岁月的河流上，演绎一场不离散的笙歌，可好……——题记
     犹记曾经，君袭一屡白衣，从陌上花开的小径款款而来，桃花灼灼，惊起了我的一帘幽梦。从此，诗词歌赋，烟雨桃花，都失去了色彩，只有君的身影，丝丝抨击着心海。
     </p>
    <h2>第一段</h2>
    <p>内容</p>
    <p>
    不再叹天若有情，不再盼三寸天堂。只因这素洁的红尘有了你的陪伴，相思惹起了无边的牵盼。情到深处无怨尤，不想，与君共享人世繁华，只愿，流年今夕，共看云卷云舒，花开花落。
　　初相见，惊素心。你来时，陌上花开，纷繁的花瓣，灿烂了我的眼眸。纵使，东风恶，人情薄，烟花不堪剪。</p>
    <h2>第二段</h2>
    <p>内容</p>
    <p>
      仍愿为你，尝尽这无边的相思之苦。也许，我就是你千百年前放走的白狐，今生，只为你醉，只为你舞。君可知，那天空飘落的雪花呀，就是我对你深深的思念。那日，你说。凡尘寂寥，不能遗忘远方的梦想。山一程，水一程，你离开了这个令我百转千回的相思地。
　　一年一度秋风近，风儿翩翩吹起来。此时，桥边的芍药，正生的红艳，梨花艳艳地开着。熟悉的地方，陌生的氛围，却没有了你的踪影。日日思君不见君，即使花艳又如何。</p>
    </div>
  <div class="ClearLeft"></div>
  </body>
  </html>

screen.css

.MenuFrame{
  width:200px;  
  float:left;  
  background-color:#fff8aa;  
  color:#ff6a00;}
.ContentsFrame {
  float:left;  
  width:600px;  
  background-color:#ededed;  
  color:#535353;
  }
.ClearLeft{ 
 clear:left;
 }

print.css

.MenuFrame{
  display:none;
}
.ContentsFrame {
  width:100%;
}
.ClearLeft{
  clear:left;
}

Description:

In Web browsing When displayed normally in the browser, the style sheet of style.css is applied. When printing, apply print.css with media="print". In print.css, the MenuFrame on the left is hidden and it becomes level 1 display. Additionally, the width of the ContentsFrame is assumed to be 100% and will be laid out based on the width of the paper. Also, by making the color of the character ambiguous, we set it to a white background with black letters.

Execution results:

Use a web browser to display the above HTML file. The effect shown below will be displayed.

CSS to change screen design and style when printing (code example)

Show print preview from web browser. In the print preview, you can see that the menu on the left is not shown and the colors are changed to black and white.

CSS to change screen design and style when printing (code example)

Let’s look at the processing of a single style

The code is as follows:

index2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
  <div class="MenuFrame">
    菜单1<br />
    菜单2<br />
    菜单3<br />
    菜单4<br />
    菜单5<br />
    菜单6<br />
  </div>
  <div class="ContentsFrame">
    <h2>题记</h2>
    <p>内容</p>
    <p>
     竹外桃花，纷纷飘落。卿舞霓裳，君弹曲。高山流水，绕指尖幽幽荡漾。执一叶扁舟，在岁月的河流上，演绎一场不离散的笙歌，可好……——题记
     犹记曾经，君袭一屡白衣，从陌上花开的小径款款而来，桃花灼灼，惊起了我的一帘幽梦。从此，诗词歌赋，烟雨桃花，都失去了色彩，只有君的身影，丝丝抨击着心海。
     </p>
    <h2>第一段</h2>
    <p>内容</p>
    <p>
    不再叹天若有情，不再盼三寸天堂。只因这素洁的红尘有了你的陪伴，相思惹起了无边的牵盼。情到深处无怨尤，不想，与君共享人世繁华，只愿，流年今夕，共看云卷云舒，花开花落。
　　初相见，惊素心。你来时，陌上花开，纷繁的花瓣，灿烂了我的眼眸。纵使，东风恶，人情薄，烟花不堪剪。</p>
    <h2>第二段</h2>
    <p>内容</p>
    <p>
      仍愿为你，尝尽这无边的相思之苦。也许，我就是你千百年前放走的白狐，今生，只为你醉，只为你舞。君可知，那天空飘落的雪花呀，就是我对你深深的思念。那日，你说。凡尘寂寥，不能遗忘远方的梦想。山一程，水一程，你离开了这个令我百转千回的相思地。
　　一年一度秋风近，风儿翩翩吹起来。此时，桥边的芍药，正生的红艳，梨花艳艳地开着。熟悉的地方，陌生的氛围，却没有了你的踪影。日日思君不见君，即使花艳又如何。</p>
    </div>
  <div class="ClearLeft"></div>
</body>
</html>

style2 .css

.MenuFrame{
  width:200px;  
  float:left;  
  background-color:#fff8aa;  
  color:#ff6a00;
}
.ContentsFrame {
  float:left;  
  width:600px;  
  background-color:#ededed;  
  color:#535353;
}
@media print {
  .MenuFrame{
      display:none;
  }  
  .ContentsFrame {
      width:100%;    
      background-color:#FFFFFF;    
      color:#000000;
  }
}
.ClearLeft{
  clear:left;
}

Description:

Apply the content of the style sheet when it is displayed normally in the web browser. When printing, styles in @media print {} blocks also apply. In the @media print {} block, the MenuFrame on the left is hidden and it becomes displayed within a block. Additionally, the width of the ContentsFrame is assumed to be 100% and will be laid out based on the width of the paper. Additionally, the text color is also specified as black (#000000), which sets the background color to also be white (#FFFFFF).

The execution effect is the same as above.

The above is the detailed content of CSS to change screen design and style when printing (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the indentation of the first lineNext article：How to set the indentation of the first line

See more

CSS to change screen design and style when printing (code example)

Related articles