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

대부분의 웹 디자이너는 인쇄 컨트롤을 처음 접하고 프린터보다 픽셀에 더 매료되는 경우가 많습니다. 현실 세계에서는 많은 사람들이 참조를 위해 웹사이트에서 웹 페이지를 인쇄하는 데 의존합니다. 디지털 시대에도 여전히 많은 사람들이 특별한 경우에 손에 종이를 들고 있습니다. 프린터와 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"과 같은 별칭을 통해 용지 크기를 제어할 수도 있습니다.

@page {
  size: 5.5in 8.5in;
}

인쇄 방향을 제어할 수도 있습니다. 세로: 세로로, 가로: 가로

@page {
  size: A4;
}

　　PAGE 모델　페이지 모델

페이지가 매겨진 미디어 형식 모델에서는 문서가 하나 이상의 페이지 상자로 이동됩니다. 페이지 프레임은 직사각형 평면에 매핑됩니다. 이는 CSS 상자 모델과 거의 유사합니다.

참고* 지원되는 브라우저는 거의 없습니다

아아아아

PAGE 마진 모델 페이지-마진 박스

더 나아가기 전에 페이지의 상자 모델을 이해해야 합니다. 페이지의 동작이 화면에서 작동하는 방식과 다소 다르기 때문입니다.

페이지 모델은 페이지 영역을 정의한 다음 이를 16개의 주변 가장자리 상자로 나눕니다. 페이지 영역의 크기와 페이지 영역 가장자리와 페이지 자체의 끝 사이의 여백 크기를 제어할 수 있습니다.

왼쪽 및 오른쪽 여백

@page {
  size: A4 landscape;
}

다음 CSS는 왼쪽 하단에 제목, 오른쪽 하단에 페이지 카운터, 오른쪽 상단에 장 제목을 표시합니다.

아아아아

표시 효과는 다음과 같습니다.

참고* 이 기사는 인쇄 스타일 시트에 대한 팁과 요령 및 CSS 및 CSS3 페이지 사양을 사용하여 인쇄하기 위한 디자인

에서 편집되었습니다.

위 내용은 인쇄를 제어하도록 특별히 설계된 CSS 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!