Xem trước bản in CSS

Trước tiên, chúng ta hãy xem cách xem trước và gỡ lỗi trang in. Chúng tôi không muốn liên tục nhấp chuột phải vào một trang và chọn In để xem trang của chúng tôi

Google Chrome

Khởi chạy chế độ kiểm tra bằng cách nhấp chuột phải vào trang và chọn 'Kiểm tra'. Ngoài ra, sử dụng CTRL + SHIFT + I cũng hoạt động tốt

Nhấp vào 3 dấu chấm ở trên cùng bên phải của bảng điều khiển Kiểm tra và làm theo các mục được đánh dấu và chọn 'Kết xuất'

Bạn sẽ thấy cửa sổ 'Kết xuất' xuất hiện trong cửa sổ kiểm tra. Cuộn xuống hết cỡ cho đến khi bạn thấy Emulate CSS media type. Thay đổi danh sách thả xuống thành print như hình bên dưới

Mozilla Firefox

Nó thậm chí còn dễ dàng hơn trong Firefox. Chuyển sang chế độ kiểm tra giống như Chrome

Khi ở chế độ kiểm tra, hãy làm theo hình ảnh bên dưới và nhấp vào biểu tượng giống trang tai chó để chuyển sang chế độ xem trước bản in

Giờ đây, chúng tôi có thể gỡ lỗi kiểu giống như cách chúng tôi gỡ lỗi bất kỳ trang web nào

Thiết lập một biểu định kiểu in

Giống như bất kỳ trang web nào, trước tiên hãy đính kèm biểu định kiểu in bằng cách tham chiếu nó trong tiêu đề. link rel="stylesheet" href="print.css"

trong bản in. css, gõ như sau

    
@media print {
    …
}
    

Mọi kiểu dáng trong thẻ sẽ chỉ áp dụng cho trang được in

Chúng tôi cũng có thể thêm kiểu dáng cụ thể của màn hình bằng cách sử dụng như sau

    
@media screen {
    …
}
    

Mẹo tạo kiểu in

Khi in một trang, hầu hết người dùng chỉ muốn nội dung của trang. Xóa đầu trang, điều hướng và chân trang. như một ví dụ

Bạn đã bao giờ thử in từ trình duyệt web của mình chưa?

Các sự cố phổ biến khi in từ web bao gồm các yếu tố bị dịch chuyển, thiếu hình ảnh, nội dung không vừa với trang, v.v.

Tôi sẽ chỉ cho bạn cách làm cho trang web của bạn được in giống như trên màn hình

Giúp đỡ. Trang in của tôi trông rất tệ

Bạn có một trang web trông tuyệt vời trên màn hình và bạn cần người dùng có thể in những gì họ nhìn thấy

Để kiểm tra những gì người dùng sẽ thấy khi họ in, hãy chọn Tệp > In từ Google Chrome (có bản xem trước bản in đẹp mắt). Thật không may, bản xem trước bản in trông không giống trang web đẹp đẽ của bạn

Bố cục bị mất hoàn toàn trong bản in… hay là vậy?

cách khắc phục nhanh

Nếu có một trang đơn giản, bạn có thể sửa đổi một thuộc tính HTML để cải thiện đáng kể kết quả in ra

To apply the fix, open your HTML file in a text editor and search for any  or