인쇄를 제어하도록 특별히 설계된 CSS 스타일-CSS 튜토리얼-php.cn

인쇄를 제어하도록 특별히 설계된 CSS 스타일

巴扎黑

풀어 주다： 2017-05-01 14:40:36

원래의

2489명이 탐색했습니다.

대부분의 웹 디자이너는 인쇄 컨트롤을 처음 접하고 프린터보다 픽셀에 더 매료되는 경우가 많습니다. 현실 세계에서는 많은 사람들이 참조를 위해 웹사이트에서 웹 페이지를 인쇄하는 데 의존합니다. 디지털 시대에도 여전히 많은 사람들이 특별한 경우에 손에 종이를 들고 있습니다. 프린터와 LCD 화면 사이의 격차를 해소하기 위해 웹 개발자가 할 수 있는 몇 가지 작업이 있습니다.

화면보다는 프린터용으로 디자인된 스타일

아아아아

참고* 별도의 CSS 파일에서 링크의 media="print" 속성을 설정하여 이 스타일이 인쇄 전용임을 지정할 수도 있습니다

/* 样式将只应用于打印 */
@media print {


}

로그인 후 복사

사이트의 전체 CSS를 재구성할 필요는 없습니다. 기본 스타일은 다양한 요구 사항에 맞게만 상속됩니다. 인쇄할 때 토너를 절약하기 위해 대부분의 브라우저는 자동으로 색상을 반전합니다. 최상의 결과를 얻으려면 색상 변화가 눈에 띄어야 합니다.

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

로그인 후 복사

우리는 전체 웹페이지의 스크린샷을 만드는 것이 아니라 단지 잘 디자인되고 읽기 쉬운 웹사이트를 보여주기 위해 작성하는 것입니다:

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

로그인 후 복사

프린터의 효율성을 높이기 위해서는 주요 내용만 표시하고 머리글 및 바닥글 탐색 표시줄을 제거해야 합니다

/*去除背景图片, 节约笔黑 */

h1 {
   color: #fff;
   background: url(banner.jpg);
}


@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }
}

로그인 후 복사

링크 처리

프린터에서 링크를 볼 수 없습니다.

@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }


   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }


   @page {
      margin: 2cm;
   }
}

로그인 후 복사

하이퍼링크를 펼쳐야 합니다. 디스플레이 효과는 이렇겠네요

인쇄 설정 옵션 제어

@page 규칙을 사용하면 페이지의 다양한 측면을 지정할 수 있습니다. 예를 들어, 페이지의 크기를 지정하려고 합니다. 페이지 여백, 머리글, 바닥글은 모두 매우 중요합니다. [이미 많은 브라우저에서 지원됨]

@PAGE 규칙 용지 크기 설정

다음 CSS를 통해 용지 크기를 가로 5.5인치, 세로 8.5인치로 설정할 수 있습니다.

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }


   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

로그인 후 복사

"A4" 또는 "legal"과 같은 별칭을 통해 용지 크기를 제어할 수도 있습니다.