CSS 인쇄 스타일 시트 - 예

print.css를 효과적으로 사용하는 방법을 배우려고하므로 그래픽 및 탐색 요소가 인쇄 미리보기/인쇄에 표시되지 않습니다. html5 상용구의 일부 기사와 인쇄물 css를 읽으십시오. 그들이 인쇄하는 동안 모양을 변경하는 방식 상당히 인상적이었다 두 사이트는CSS 인쇄 스타일 시트 - 예

http://css-tricks.com/

http://bottlerocketcreative.com/

있습니다하지만 인쇄와 관련된 CSS를 볼 수 없습니다. 비슷한 변화를하는 법을 배우기 위해 사용하는 CSS를 지적 해 주시겠습니까?

출처

2012-10-07 bsr

HTTP : 특별히 인쇄 목적으로

@media print{ /*styles here*/ }

또는 스타일 시트에 링크 : 일반적으로 그러나

는, 인쇄 스타일은 하나 기존 스타일 시트에 미디어 태그를 사용하여 설정 // getfirebug .com/css –

감사합니다. Kevin, 저는 크롬 개발자 도구를 사용하여 인쇄물 및 관련 자료를 검색했습니다. 다시 시도 할 것입니다. – bsr

제 사과, (CSS 트릭) 인쇄 CSS를 찾는 데 어려움이 있습니다. –

내가 링크 된 사이트를 살펴본 결과, 관련된 인쇄 스타일이없는 것으로 나타났습니다. 나는 그들이 브라우저의 기본 인쇄 설정을 사용하고 있다고 생각한다. 따라서 큰 변화 중 하나는 배경 이미지가 숨겨진 기본값이된다는 것입니다. CSS 트릭의 경우 미디어 쿼리를 사용하기 때문에 모양이 너무 다르게 보일 수 있습니다. 따라서 브라우저를 800px 이하로 줄이면 게시물 목록이 문서를 인쇄 할 때와 마찬가지로 브라우저의 전체 너비까지 확장됩니다.

<!--These styles styles are only for screens as set by the media value--> 
<link rel="stylesheet" href="css/main.css" media="screen"> 

<!--These styles styles are only for print as set by the media value--> 
<link rel="stylesheet" href="css/print.css" media="print">

출처

2012-10-07 22:01:37 tw16

+1 화면을 축소하면 인쇄 레이아웃과 매우 비슷해집니다. 도움을 주셔서 감사합니다. 더 이상 답변을받지 않으면 받아 들일 것입니다. – bsr

CSS 인쇄 스타일 시트 - 예

답변

관련 문제