Làm cách nào để thêm trang in trong css?

Mẹo. Các thuộc tính. ngắt trang trước, ngắt trang sau và ngắt trang bên trong giúp xác định cách tài liệu sẽ hoạt động khi được in

Ghi chú. Bạn không thể sử dụng thuộc tính này khi trống

hoặc trên các phần tử được định vị tuyệt đối

Giá trị mặc định. tự động kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. mục tiêu. Phong cách. pageBreakAfter="luôn luôn"

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Thuộc tính Ngắt trang sau 1. 04. 01. 01. 27. 0

Ghi chú. Không có trình duyệt nào hỗ trợ "tránh"

Ghi chú. Các trình duyệt có thể hiểu "trái" và "phải" là "luôn luôn"

Cú pháp CSS

ngắt trang sau. Tự động. luôn. tránh xa. bên trái. đúng. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảautoDefault. Luôn ngắt trang tự độngLuôn chèn ngắt trang sau phần tửtránhTránh ngắt trang sau phần tử (nếu có thể)tráiChèn ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên tráiChèn ngắt trang sau phần tử sao cho . Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

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 nguyên liệu để 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ố chỉ dẫn đường đi 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ì

• hàng tấn quảng cáo được đưa vào trang và mực bị lãng phí trên nền và hình ảnh có màu không cần thiết
• văn bản có thể có kích thước khác nhau, có thể quá nhỏ hoặc quá lớn
• cột có thể quá hẹp hoặc tràn lề trang
• các phần của các phần bị cắt nhỏ hoặc hoàn toàn không hiển thị

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

• Vùng trang chứa tất cả các vùng chứa trang
• Vùng lề áp dụng cho hộp trang và có thể có các thuộc tính. lề trái, lề phải, lề dưới, lề trên

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 trang

Thuộ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à

• tự động — Hộp trang sẽ được đặt theo kích thước và hướng của trang mục tiêu
• ngang — Hộp trang có cùng kích thước với mục tiêu, nhưng các cạnh rộng hơn nằm ngang
• dọc — Hộp trang có cùng kích thước với mục tiêu, nhưng các cạnh ngắn hơn nằm ngang
• chiều dài — Các giá trị độ dài cho thuộc tính 'size' tạo ra một hộp trang tuyệt đối và nếu chỉ có một hộp được chỉ định, thì hộp trang sẽ là hình vuông vì cả hai hộp trang sẽ có cùng kích thước

@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à

• ngắt trang trước — thêm dấu ngắt trang trước phần tử được chỉ định
• ngắt trang sau — thêm dấu ngắt trang sau phần tử được chỉ định
• ngắt trang bên trong — đặt trường hợp nên tránh ngắt trang bên trong một phần tử được chỉ định

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ết

Khi 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

Đô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

Làm cách nào để in trang bằng CSS?

Làm cách nào để viết CSS để in?

Tôi có thể sử dụng @media print không?

Tệp CSS in là gì?