In HTML
|
Ngày nay, vì thực tế mọi người đều có quyền truy cập vào một thiết bị kỹ thuật số, có vẻ như việc in các trang web gần như đã lỗi thời. Tuy nhiên, có một số trường hợp bạn vẫn có thể cần in một trang, chẳng hạn như in vé xem hòa nhạc hoặc vé du lịch, in công thức cho danh sách các thành phần để sử dụng làm danh sách mua sắm, hóa đơn để lưu giữ tài khoản hoặc một số hướng dẫn tuyến đường hoặc . Nhưng đôi khi, việc in một trang web có thể là một trải nghiệm rất khó chịu vì Show
Tuy nhiên, các nhà phát triển có thể làm cho web in có thể truy cập được bằng cách sử dụng điều khiển in CSS và đặt mức độ phản hồi của trang web — kích thước, định dạng, bố cục hoặc lề của trang. Một phương pháp tốt để bao gồm các kiểu in là sử dụng cú pháp CSS3 @media, đây là một kỹ thuật hợp lý để mang một biểu định kiểu phù hợp (thiết kế web đáp ứng) cho máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động. Quy tắc @media chỉ định rằng một số kiểu chỉ dành cho tài liệu in hoặc cho trình đọc màn hình (loại phương tiện. in, màn hình hoặc lời nói) @media print {
...
}Tất cả các cài đặt CSS nằm giữa dấu ngoặc mở và đóng. Tiếp theo, chúng ta cần đặt các thuộc tính của trang, chẳng hạn như kích thước, lề, đường viền và cỡ chữ. Hộp trang là một vùng hình chữ nhật chứa hai vùng được nhúng
Một ví dụ đơn giản về đặt lề trái và phải của trang @page {
margin-left: 1.2 cm;
margin-right: 2.1 cm;
}Kích thước trangThuộc tính size chỉ định kích thước và hướng của hộp trang. Bốn giá trị có thể được sử dụng cho kích thước trang là
@media print
{
@page
{
size: A4;
size: portrait;
}
}Ví dụ bên dưới đặt kích thước trang thành tự động, nghĩa là hộp trang sẽ được căn chỉnh theo mục tiêu và 5% của lề thể hiện tỷ lệ phần trăm so với trang (nếu trang có 25 cm với 15 cm thì lề sẽ là @media print
{
@page {
size: auto;
margin: 10%;
}
}Một bước quan trọng khác khi in trang CSS là sử dụng dấu ngắt trang để đặt chính xác điểm mà trang sẽ bị ngắt. Ba thuộc tính CSS được sử dụng cho việc này là
Các giá trị có thể được đặt cho ba thuộc tính này là tự động đại diện cho ngắt trang tự động, luôn luôn (không khả dụng cho ngắt trang bên trong) đặt dấu ngắt mỗi lần, tránh ngắt ngắt, trái và phải (không khả dụng cho ngắt trang . Các giá trị được sử dụng để tiếp tục các trang được định dạng trái hoặc phải, tương ứng, ban đầu đặt thuộc tính này thành giá trị mặc định, kế thừa giá trị từ cha của nó. một số ví dụ về việc sử dụng các thuộc tính này được liệt kê dưới đây //Using the page breaks on different sections of the webpage
@media print {
footer {page-break-after: always;}
a {page-break-inside: avoid;}
h1, h2, h3, h4, h5 {page-break-before: always;}
table, figure { page-break-inside: avoid;}
}Như bạn có thể đã gặp phải trong quá trình in một trang web, nhiều phần tử không mong muốn xuất hiện trên trang in của bạn, vì vậy, đây là một bước quan trọng để loại bỏ chúng vì rất lãng phí mực. Đối với điều này, chúng ta cần ẩn tất cả các khu vực không quan trọng. Chủ yếu, các phần thường xuyên bị loại bỏ nhất là logo, tiêu đề trang, thanh bên, đầu trang, chân trang, danh mục, nhận xét và một số nút hoặc hình ảnh, v.v. //Hiding various unwanted sections of the webpage
#header-widgets, nav, .sidebar, .content-ads, .make-comment, .author-bio, .heading, .related-posts, #footer,
.site-title img, .logo
{
display: none;
}Đôi khi, bạn có thể muốn in nhiều trang và có lẽ bạn cần đánh số chúng. Bạn có thể làm điều đó trong CSS bằng cách sử dụng bộ đếm. Trang. quy tắc đầu tiên đặt lại bộ đếm cho trang đầu tiên thành giá trị 5, điều này có nghĩa là bộ đếm sẽ bắt đầu từ trang 5, v.v. @page { counter-increment: page }
@page:first { counter-reset: page 4 }Làm nổi bật các liên kếtKhi cố gắng in nội dung có chứa liên kết, bạn sẽ nhận thấy rằng các liên kết không được phân biệt với phần còn lại của văn bản, vì vậy các liên kết phải được đánh dấu để gây chú ý. Điều này có thể được thực hiện bằng cách sử dụng các thuộc tính sau // Displaying link color and link behaviour
a:link, a:visited {
background-color: DarkSalmon ;
border: none;
color: #0000ff;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 20px;
text-align: center;
display: inline-block;
}Ẩn video và các iframe khác là một bước quan trọng khác trong việc tạo trang CSS thân thiện với in ấn. Đoạn mã sau cho phép bạn ẩn hoàn toàn iframe, cũng như video ________số 8_______Đôi khi, việc thêm thông báo trước và sau nội dung chính được in có thể rất hữu ích. Bạn có thể liệt kê một thông báo bản quyền hoặc một thông báo cụ thể gửi đến người đọc và bạn cần tìm một vị trí hoàn hảo để đưa thông báo đó vào mã của mình Mã HTML để in là gì?Phương thức in cửa sổ()
. Phương thức print() mở Hộp thoại In, cho phép người dùng chọn các tùy chọn in ưa thích.
Làm cách nào để in bằng HTML CSS?Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó Kết xuất từ menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó .
Tôi có thể buộc ngắt trang khi in HTML không?Chúng tôi có thể thêm thẻ ngắt trang với kiểu "ngắt trang sau. luôn luôn" tại điểm mà chúng tôi muốn giới thiệu ngắt trang trong trang html .
Làm cách nào để in trang HTML bằng JavaScript?JavaScript không có bất kỳ đối tượng in hoặc phương thức in nào. Bạn không thể truy cập các thiết bị đầu ra từ JavaScript. Ngoại lệ duy nhất là bạn có thể gọi cửa sổ. print() trong trình duyệt để in nội dung của cửa sổ hiện tại . |
