CSS in trang

Nếu bạn đã từng in vé đặt phòng hoặc chỉ đường đến khách sạn từ trang web, có lẽ bạn sẽ không mấy ấn tượng với kết quả. Do đó, bạn có thể không biết rằng các tài liệu in có thể được tạo kiểu theo cách tương tự như trên màn hình, bằng cách sử dụng Biểu định kiểu xếp tầng (CSS)

Tách mối quan tâm

Lợi ích chính của CSS là tách nội dung khỏi bản trình bày. Nói một cách đơn giản nhất, điều này có nghĩa là thay vì đánh dấu kiểu dáng rất lỗi thời, chẳng hạn như

 <font size="7"><b>Headingb>font>
 

Chúng tôi sử dụng đánh dấu ngữ nghĩa

 <h1>Headingh1>
 

Điều này không chỉ sạch hơn nhiều mà còn có nghĩa là bản trình bày của chúng tôi được tách biệt khỏi nội dung của chúng tôi. Các trình duyệt hiển thị các phần tử h1 dưới dạng văn bản lớn, in đậm theo mặc định, nhưng chúng ta có thể thay đổi kiểu đó bất kỳ lúc nào bằng biểu định kiểu

 h1 { font-weight: normal; }
 

Bằng cách tập hợp các khai báo kiểu đó trong một tệp riêng biệt và tham chiếu tệp đó từ tài liệu HTML của chúng tôi, chúng tôi có thể sử dụng phân tách tốt hơn nữa. Biểu định kiểu có thể được sử dụng lại và chúng tôi có thể thay đổi tệp đơn lẻ đó bất kỳ lúc nào để cập nhật định dạng trong mọi tài liệu sử dụng nó

Bao gồm một Print Style Sheet

Theo cách tương tự như bao gồm biểu định kiểu màn hình, chúng ta có thể chỉ định biểu định kiểu để in. Một biểu định kiểu màn hình thường được bao gồm như vậy

 <link href="base.css" rel="stylesheet" />
 

Tuy nhiên, một thuộc tính bổ sung, phương tiện, cho phép nhắm mục tiêu dựa trên ngữ cảnh mà tài liệu được hiển thị. Theo mặc định, phần tử trước đó tương đương với

 <link href="base.css" rel="stylesheet" media="all" />
 

Điều này có nghĩa là biểu định kiểu sẽ được áp dụng cho bất kỳ phương tiện nào mà tài liệu được hiển thị trong đó. Tuy nhiên, thuộc tính media cũng có thể nhận các giá trị của print và screen

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

Trong ví dụ này, bản in. biểu định kiểu css sẽ chỉ được sử dụng khi tài liệu được in ra. Đây là một cơ chế rất hữu ích. Chúng tôi có thể tập hợp tất cả các kiểu phổ biến (có thể là họ phông chữ hoặc khoảng cách dòng) trong một biểu định kiểu áp dụng cho tất cả các phương tiện và định dạng dành riêng cho phương tiện trong các biểu định kiểu riêng lẻ. Một lần nữa, đây là một cách sử dụng khác của việc phân tách các mối quan tâm

Một số khai báo kiểu ví dụ

Một Nền Sạch

Bạn gần như chắc chắn không muốn lãng phí mực in ra một nền đầy màu sắc hoặc một hình ảnh nền. Bắt đầu bằng cách đặt lại bất kỳ giá trị mặc định nào cho các giá trị này có thể đã được đặt trong tài liệu của bạn

 body {
  background: white;
  color: black;
}
 

Bạn cũng có thể muốn ngăn không cho in bất kỳ hình nền nào—những hình nền này phải mang tính chất trang trí và do đó, không phải là một phần bắt buộc trong nội dung của bạn

 * {
  background-image: none !important;
}
 

Có liên quan. Cách đặt hình nền trong CSS

kiểm soát lợi nhuận

Một điểm rõ ràng khác cần xem xét về bản in là lề trang. Mặc dù CSS cung cấp phương tiện để đặt kích thước lề, nhưng bạn nên nhớ rằng trình duyệt và máy in của bạn cũng có thể ảnh hưởng đến chính cài đặt lề

Ví dụ: trong hộp thoại in của Chrome, có một cài đặt lề có các giá trị bao gồm không và tùy chỉnh sẽ ghi đè bất kỳ thứ gì được chỉ định qua CSS

Vì lý do này, bạn nên để người đọc quyết định ký quỹ trên các trang web công cộng. Tuy nhiên, đối với mục đích sử dụng cá nhân hoặc để tạo bố cục mặc định, việc đặt lề in qua CSS có thể phù hợp. Quy tắc @page cho phép đặt lề và nên được sử dụng như sau

CSS cũng có khả năng dành cho các bố cục in phức tạp hơn, chẳng hạn như thay đổi lề tùy theo trang được đánh số lẻ (phải), đánh số chẵn (trái) hay trang bìa

Thật không may, điều này được hỗ trợ kém—đặc biệt là tùy chọn trang bìa—nhưng nó có thể được sử dụng ở mức độ tối thiểu. Các kiểu sau đây tạo ra các trang có lề dưới lớn hơn một chút so với lề trên và lớn hơn một chút ở mép ngoài của trang so với gáy sách

 @page {
  margin-left: 20mm;
  margin-right: 20mm;
  margin-top: 40mm;
  margin-bottom: 50mm;
}

@page :left {
  margin-left: 30mm;
}

@page :right {
  margin-right: 30mm;
}
 

Ẩn nội dung không liên quan

Không phải tất cả nội dung sẽ phù hợp với phiên bản in của tài liệu của bạn. Ví dụ: nếu trang của bạn bao gồm điều hướng biểu ngữ, quảng cáo hoặc thanh bên, bạn có thể muốn ngăn các chi tiết đó xuất hiện trong phiên bản in

 <h1>Headingh1>
 

sửa chữa các liên kết

Các siêu liên kết rõ ràng là không liên quan đến tài liệu in, vì vậy bạn có thể muốn xóa bất kỳ kiểu nào phân biệt chúng với văn bản xung quanh

 <h1>Headingh1>
 

Tuy nhiên, bạn vẫn có thể muốn người đọc có quyền truy cập vào các URL gốc và giải pháp đơn giản là tự động chèn chúng vào sau văn bản được liên kết

 <h1>Headingh1>
 

CSS này cho kết quả như sau

một[href]. sau khi nhắm mục tiêu cụ thể vị trí sau (. sau) mỗi phần tử liên kết (a) thực sự có một URL ([href]). Phần khai báo nội dung ở đây sẽ chèn giá trị của thuộc tính href vào giữa các dấu ngoặc. Lưu ý rằng các quy tắc kiểu khác có thể được áp dụng để kiểm soát việc hiển thị nội dung được tạo

Xử lý ngắt trang

Để tránh ngắt trang để lại nội dung bị cô lập hoặc ngắt trang ở giữa một cách vụng về, hãy sử dụng các thuộc tính ngắt trang. ngắt trang trước, ngắt trang sau và ngắt trang bên trong. Ví dụ

 <h1>Headingh1>
 

Điều này sẽ giúp giữ cho các bảng không trải rộng trên nhiều trang, miễn là không có bảng nào cao hơn một trang. Tương tự

 <h1>Headingh1>
 

Điều này có nghĩa là các tiêu đề như vậy luôn bắt đầu một trang mới. Tuy nhiên, nó có thể gây ra sự cố nếu bạn ngay lập tức theo dõi h1 của trang bằng h2, vì h1 sẽ tự kết thúc trên một trang. Để tránh điều này, chỉ cần hủy ngắt trang bằng cách sử dụng bộ chọn nhắm mục tiêu vào trường hợp cụ thể đó, chẳng hạn

 <h1>Headingh1>
 

Xem kiểu in

Trong mọi trường hợp, trình duyệt và hệ điều hành của bạn phải cung cấp tính năng xem trước bản in, thường là một phần của hộp thoại in tiêu chuẩn

Trình duyệt Chrome giúp việc kiểm tra và thậm chí gỡ lỗi các kiểu in của bạn thông qua Công cụ dành cho nhà phát triển trở nên thuận tiện hơn, như minh họa trong ví dụ này hiển thị CV có biểu định kiểu in. Trước tiên, hãy mở menu chính và chọn Công cụ khác, sau đó là tùy chọn Công cụ dành cho nhà phát triển

Từ bảng điều khiển mới xuất hiện, hãy chọn Trình đơn, sau đó chọn Công cụ khác, tiếp theo là Kết xuất

Sau đó cuộn xuống phần cài đặt Mô phỏng loại phương tiện CSS. Trình đơn thả xuống cho phép bạn chuyển đổi giữa chế độ in và chế độ xem màn hình của tài liệu của bạn

Khi mô phỏng biểu định kiểu in, trình duyệt Kiểu tiêu chuẩn có sẵn để kiểm tra và sửa đổi các quy tắc kiểu trực tiếp. Hãy nhớ rằng mô phỏng đầu ra in trên màn hình vẫn không chính xác 100%. Trình duyệt không biết gì về khổ giấy và không thể mô phỏng quy tắc @page

In sang PDF

Một tính năng tiện dụng của các hệ điều hành hiện đại là khả năng in thành tệp PDF. Trên thực tế, bất kỳ thứ gì bạn có thể in đều có thể được gửi tới tệp PDF—không có gì thực sự ngạc nhiên vì xét cho cùng thì tệp PDF được cho là đại diện cho một tài liệu in

Điều này làm cho HTML, kết hợp với biểu định kiểu in, trở thành một phương tiện tuyệt vời để tạo tài liệu chất lượng cao có thể được gửi dưới dạng tệp đính kèm cũng như được in.

In nhiều loại tài liệu

Bạn có thể sử dụng biểu định kiểu in để tạo tài liệu chất lượng, bao gồm mọi thứ từ CV đến công thức nấu ăn hoặc thông báo sự kiện. Các trang web thường trông xấu xí và chứa các chi tiết không mong muốn khi được in, nhưng một số chỉnh sửa kiểu nhỏ có thể cải thiện đáng kể kết quả in. Lưu kết quả cuối cùng dưới dạng PDF là một cách nhanh chóng để tạo các tài liệu chuyên nghiệp, hấp dẫn

Chúng tôi có thể áp dụng CSS cho trang để in không?

Làm cách nào để đặt kích thước trang trong CSS?