Home-theater-designers
Nếu bạn đã từng in thông tin đặt vé hoặc chỉ đường đến khách sạn từ web, bạn có thể 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 giống như cách chúng có thể hiển thị trên màn hình, bằng cách sử dụng Trang tính kiểu xếp tầng (CSS).
Tách các 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 theo phong cách rất cổ điển như:
Heading
Chúng tôi sử dụng đánh dấu ngữ nghĩa:
Điều này không chỉ gọn gàng hơn nhiều mà còn có nghĩa là bản trình bày của chúng ta được tách biệt khỏi nội dung của chúng ta. Các trình duyệt hiển thị h1 các phần tử dưới dạng văn bản in đậm, lớn theo mặc định, nhưng chúng tôi 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 tốt hơn việc phân tách. 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 đó 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 tờ kiểu in
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ư sau:
Tuy nhiên, một thuộc tính bổ sung, một nửa , 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:
Đ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ị. Tuy nhiên, thuộc tính media cũng có thể nhận các giá trị của print và screen:
Trong ví dụ này, print.css biểu định kiểu 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 ta có thể tập hợp tất cả các kiểu chung (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 mẫu
Một nền sạch
Bạn gần như chắc chắn không muốn tốn mực in ra một hình nền hoặc hình nền đầy màu sắc. Bắt đầu bằng cách đặt lại mọi giá trị mặc định 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 ảnh này phải mang tính 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
sự khác biệt giữa Samsung Pay và Android Pay
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. Trong khi CSS cung cấp phương tiện thiết lập kích thước lề, 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 ai và tập quán sẽ ghi đè bất kỳ thứ gì được chỉ định qua CSS:
Vì lý do này, bạn nên để lại quyết định ký quỹ cho người đọc 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. Các @trang quy tắc cho phép đặt lề và nên được sử dụng như sau:
@page {
margin: 2cm;
}
CSS cũng có khả năng 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ẻ (bên phải), số chẵn (bên trái) hay trang bìa.
làm thế nào để tìm thấy tất cả các tài khoản email trong tên của tôi
Thật không may, điều này được hỗ trợ kém — đặc biệt là tuỳ 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 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 trang so với gáy:
@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 đều phù hợp với phiên bản in của tài liệu của bạn. 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 những chi tiết đó xuất hiện trong phiên bản in, ví dụ:
#contents, div.ad { display: none; }
Sửa các liên kết
Các siêu liên kết rõ ràng không có liên quan trong 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:
a { text-decoration: none; color: inherit; }
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à một 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:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
CSS này cho kết quả như sau:
a [href]: sau nhắm mục tiêu cụ thể đến vị trí sau ( :sau ) mỗi phần tử liên kết ( đến ) thực sự có một URL ( [href] ). Các Nội dung khai báo ở đây sẽ chèn giá trị của href thuộc tính giữa 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 đã 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 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à trang-break-inside . Ví dụ:
table { page-break-inside: avoid; }
Điều này sẽ giúp giữ cho các bảng không kéo dài nhiều trang, miễn là không có bảng nào cao hơn một trang. Tương tự:
h1, h2 { page-break-before: always; }
Đ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 theo dõi ngay 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 một bộ chọn nhắm mục tiêu phiên bản cụ thể đó, ví dụ:
cách xóa dữ liệu khác trên iphone
h1 + h2 { page-break-before: avoid; }
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 kiểm tra và thậm chí gỡ lỗi các kiểu in của bạn thuận tiện hơn thông qua Công cụ dành cho nhà phát triển, như được minh họa bằng ví dụ này hiển thị CV với biểu định kiểu in. Đầu tiên, mở menu chính và chọn Thêm công cụ tiếp theo là Những công cụ phát triển Lựa chọn:
Từ bảng điều khiển mới xuất hiện, hãy chọn Thực đơn , sau đó Thêm công cụ , theo dõi bởi Kết xuất :
Sau đó, cuộn xuống Mô phỏng loại phương tiện CSS thiết lập. Trình đơn thả xuống cho phép bạn chuyển đổi giữa chế độ xem in và màn hình của tài liệu của bạn:
Khi mô phỏng biểu định kiểu in, tiêu chuẩn Trình duyệt kiểu dáng 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à @trang quy tắc không thể được mô phỏng.
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 ra tệp PDF. Trên thực tế, bất kỳ thứ gì bạn có thể in đều có thể được gửi đến tệp PDF — không có gì ngạc nhiên thực sự vì tệp PDF được coi 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, 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ư 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 các tài liệu chất lượng, bao gồm bất kỳ thứ gì 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 in ra, nhưng một số chỉnh sửa nhỏ về kiểu dáng 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.
Đăng lại Đăng lại tiếng riu ríu E-mail Cách in trang web sang PDF bằng Microsoft EdgeBạn đã bao giờ bắt gặp một bài báo thú vị mà bạn muốn lưu lại sau này chưa? Bạn có thể lưu dưới dạng PDF bằng Edge trong ba bước đơn giản.
Đọc tiếp Chủ đề liên quan- Lập trình
- In ấn
- CSS
Bobby là một người đam mê công nghệ, người đã làm việc như một nhà phát triển phần mềm trong gần hai thập kỷ. Anh ấy đam mê chơi game, làm Biên tập viên đánh giá tại Tạp chí Switch Player và đắm mình trong tất cả các khía cạnh của xuất bản trực tuyến và phát triển web.
Xem thêm từ Bobby JackTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký