인쇄 CSS 설정

인쇄 CSS 설정

인터넷 시대의 도래와 함께 종이 문서는 점차 전자 문서로 대체되었습니다. 그러나 학교 시험, 공문서 승인 등 일부 특정 상황에서는 여전히 종이 문서가 중요한 위치를 차지합니다. . 이 경우 웹 콘텐츠를 종이 문서에 우아하게 표현하는 방법을 고려해야 하며 이 프로세스는 CSS 스타일 시트를 인쇄하는 특정 규칙을 따라야 합니다.

소위 CSS 스타일 시트는 화면 스타일 시트 및 인쇄 스타일 시트를 포함하여 다양한 상태의 HTML 요소의 모양, 위치 및 동작을 정의하는 데 사용되는 규칙 집합입니다. 인쇄 스타일 시트는 인쇄용으로 특별히 설계된 스타일 시트로, 인쇄된 페이지의 요소 크기, 위치 및 배열을 더 잘 제어할 수 있으므로 종이 문서가 더 잘 표시될 수 있습니다.

그렇다면 CSS 스타일 시트 인쇄를 설정하는 방법은 무엇일까요? 아래에서는 세 가지 측면에서 소개하겠습니다.

1. 기본 설정

인쇄 CSS를 설정할 때 다음 사항을 고려해야 합니다.

1. 인쇄 스타일 시트는 HTML 파일에 정의되어야 합니다.
2. 인쇄 스타일 시트는 화면 스타일 시트 다음에 정의해야 합니다.
3. 인쇄 스타일 시트는 @media print로 정의해야 합니다.

기본 템플릿은 다음과 같습니다.

@media print {

/ 여기에서 인쇄 스타일을 정의하세요. /

}

인쇄 스타일 요구 사항이 여러 개인 경우 @page 규칙을 사용하여 정의할 수 있습니다. 예를 들어 페이지 헤더를 회사 이름으로 설정해야 하는 경우 다음 코드를 사용할 수 있습니다.

@page {

@top {

content: "Company Name";

}

}

2. 페이지 요소 서식

종이 문서의 경우 페이지 요소의 서식이 매우 중요합니다. 종이문서의 가독성과 심미성을 보장해야 합니다. 인쇄용 CSS 스타일 시트의 경우 다음 사항에 유의해야 합니다.

1. 중국어와 영어 혼합 레이아웃을 처리해야 합니다.

중국어와 영어가 혼합된 경우 글꼴이 다른 문제에 주의해야 합니다. 일반적으로 영어 글꼴을 중국어 글꼴의 절반으로 설정하면 페이지가 더 깔끔해집니다.

body {

font-family: Arial, Helvetica, sans-serif;

}

body.zh {

font-family: "宋体", Arial, Helvetica, sans-serif;

}

body.zh p {

줄 높이: 1.6em;

}

body.en {

글꼴 크기: 12px;

}

body.en p {

줄 높이: 1.2em;

}

2. 페이지 너비는 용지 크기를 고려해야 합니다

인쇄의 경우 용지에 맞게 페이지 너비를 조정해야 하며 일반적으로 너비가 210mm인 A4 용지이므로 페이지 너비를 약 으로 설정합니다. 200mm가 최선의 선택입니다.

3. 텍스트 잘림을 피하세요

인쇄할 때 텍스트 줄이 너무 길면 잘립니다. 이러한 상황을 피하기 위해 word-break 속성을 사용하여 텍스트 자동 줄 바꿈을 실현할 수 있습니다. .

p {

word-break: break-all;

}

3. 요소 숨기기 및 표시

웹 페이지에서는 일반적으로 요소의 표시 모드를 설정하기 위해 표시 속성을 사용하지만 인쇄할 경우에는 특정 일부 요소를 표시하려면 특별한 처리가 필요합니다. 다음 요소를 숨기거나 표시해야 합니다.

1. 페이지 탐색 표시줄과 페이지 하단의 저작권 표시를 숨깁니다

@media print {

.navbar,

.navbar-default,

. navbar-right,

.footer {

display: none;

}

}

2. 텍스트 링크 표시

웹 페이지에서는 일반적으로 아이콘을 사용하여 링크를 나타내지만 인쇄할 때는 이러한 아이콘이 그렇지 않습니다. 보기가 편리하므로 텍스트 교체를 위해 a::after를 사용할 수 있습니다.

a[href]:after {

content: "(" attr(href) ")";

}

3. Show subtitle

인쇄 시 기사 부제목은 일반적으로 기본 제목 아래에 표시됩니다.

h2 {

display: block;

position: static;

page-break-after: Always;

}

요약하자면 CSS 스타일 시트 인쇄 설정은 인쇄에만 도움이 되는 것이 아닙니다. 종이 문서 아름답고 읽기 쉬우며 세련된 표현이기도 합니다. 프런트엔드 개발자에게 인쇄 CSS 스타일 시트 설정에 능숙한 것은 매우 필요한 기술입니다. 이 기사가 당신에게 영감을 주었기를 바랍니다.

위 내용은 인쇄 CSS 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!