In css xóa ngày và tiêu đề

“Ai in các trang web?” . Tương đối ít trang sẽ được sao chép trên giấy. Nhưng xem xét

• in vé du lịch hoặc vé hòa nhạc
• sao chép hướng tuyến đường hoặc thời gian biểu
• lưu một bản sao để đọc ngoại tuyến
• truy cập thông tin trong một khu vực có kết nối kém
• sử dụng dữ liệu trong điều kiện nguy hiểm hoặc bẩn thỉu — ví dụ: nhà bếp hoặc nhà máy
• xuất nội dung nháp cho chú thích bằng văn bản
• in hóa đơn web cho mục đích kế toán
• cung cấp tài liệu cho những người khuyết tật gặp khó khăn khi sử dụng màn hình
• in một trang cho đồng nghiệp của bạn, người từ chối sử dụng t'internet vô nghĩa mới lạ này

Thật không may, các trang in có thể là một trải nghiệm khó chịu

• văn bản có thể quá nhỏ, quá lớn hoặc quá mờ
• cột có thể quá hẹp, quá rộng hoặc tràn lề trang
• các phần có thể bị cắt hoặc biến mất hoàn toàn
• mực bị lãng phí trên nền và hình ảnh có màu không cần thiết
• URL liên kết không thể được nhìn thấy
• các biểu tượng, menu và quảng cáo được in mà không bao giờ có thể nhấp vào được

Nhiều nhà phát triển ủng hộ khả năng truy cập web, nhưng ít người nhớ làm cho web in có thể truy cập được

Chuyển đổi phương tiện liên tục, đáp ứng thành giấy phân trang ở mọi kích thước và hướng có thể là một thách thức. Tuy nhiên, kiểm soát in CSS đã có thể thực hiện được trong nhiều năm và một biểu định kiểu cơ bản có thể được hoàn thành trong vòng vài giờ. Các phần sau đây mô tả các tùy chọn thiết thực và được hỗ trợ tốt để làm cho các trang của bạn thân thiện với máy in

In biểu định kiểu

CSS in có thể là

1. Áp dụng ngoài kiểu dáng màn hình. Lấy các kiểu màn hình của bạn làm cơ sở, các kiểu máy in sẽ ghi đè các giá trị mặc định đó khi cần thiết
2. Áp dụng như phong cách riêng biệt. Màn hình và kiểu in hoàn toàn riêng biệt;

Lựa chọn sẽ tùy thuộc vào trang web/ứng dụng của bạn. Cá nhân tôi hầu hết thời gian sử dụng các kiểu màn hình làm cơ sở in. Tuy nhiên, tôi đã sử dụng các biểu định kiểu riêng cho các ứng dụng có kết quả đầu ra hoàn toàn khác nhau — chẳng hạn như hệ thống đăng ký phiên họp hội nghị hiển thị lưới thời gian biểu trên màn hình nhưng lịch trình theo thứ tự thời gian trên giấy

Một biểu định kiểu in có thể được thêm vào HTML

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

6 sau biểu định kiểu tiêu chuẩn

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

Các kiểu

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

7 sẽ được áp dụng cùng với các kiểu màn hình khi trang được in

Để tách màn hình và phương tiện in,

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

8 chỉ nên nhắm mục tiêu vào màn hình

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

Ngoài ra, các kiểu in có thể được bao gồm trong tệp CSS hiện có bằng cách sử dụng quy tắc

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

9. Ví dụ

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

Bất kỳ số lượng quy tắc

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

0 nào cũng có thể được thêm vào, vì vậy điều này có thể hữu ích để giữ các kiểu được liên kết với nhau. Quy tắc màn hình và quy tắc in cũng có thể được tách ra nếu cần thiết

________số 8

Kiểm tra đầu ra máy in

Không cần phải chặt cây và sử dụng loại mực cực kỳ đắt tiền mỗi khi bạn muốn kiểm tra bố cục bản in của mình. Các tùy chọn sau sao chép các kiểu in trên màn hình

Xem thử bản in

Tùy chọn đáng tin cậy nhất là tùy chọn xem trước bản in trong trình duyệt của bạn. Điều này cho thấy cách ngắt trang sẽ được xử lý bằng khổ giấy mặc định của bạn

Ngoài ra, bạn có thể lưu hoặc xem trước trang bằng cách xuất thành PDF

Những công cụ phát triển

DevTools (F12 hoặc Cmd/Ctrl + Shift + I) có thể mô phỏng các kiểu in, mặc dù ngắt trang sẽ không được hiển thị

Trong Chrome, hãy 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 đó

Trong Firefox, hãy mở Công cụ dành cho nhà phát triển và nhấp vào biểu tượng Chuyển đổi mô phỏng phương tiện in trên ngăn kiểu của tab Trình kiểm tra

Hack thuộc tính phương tiện của bạn

Giả sử bạn đang sử dụng thẻ

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

1 để tải CSS máy in, bạn có thể tạm thời thay đổi thuộc tính

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

2 thành

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

3

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

2

Một lần nữa, điều này sẽ không tiết lộ ngắt trang. Đừng quên khôi phục thuộc tính thành

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

4 sau khi bạn kiểm tra xong

Xóa các phần không cần thiết

Trước khi làm bất cứ điều gì khác, hãy xóa và thu gọn nội dung dư thừa bằng

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

5. Các phần điển hình không cần thiết trên giấy có thể bao gồm menu điều hướng, hình ảnh chính, tiêu đề, chân trang, biểu mẫu, thanh bên, tiện ích mạng xã hội và khối quảng cáo (thường là bất kỳ thứ gì trong

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6)

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

6

Có thể cần sử dụng

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

7 nếu chức năng CSS hoặc JavaScript đang hiển thị các thành phần theo trạng thái giao diện người dùng cụ thể. Việc sử dụng

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

8 thường không được khuyến nghị, nhưng chúng tôi có thể biện minh cho việc sử dụng nó trong một bộ kiểu máy in cơ bản sẽ ghi đè các giá trị mặc định của màn hình

Tuyến tính hóa bố cục

Tôi rất tiếc khi phải nói điều này, nhưng Flexbox và Grid hiếm khi hoạt động tốt với bố cục máy in trong bất kỳ trình duyệt nào. Nếu bạn gặp sự cố, hãy cân nhắc sử dụng

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

9 hoặc tương tự trên các hộp bố cục và điều chỉnh kích thước nếu cần. Ví dụ: đặt

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

0 để mở rộng toàn bộ chiều rộng trang

Kiểu máy in

Giờ đây, kiểu dáng thân thiện với máy in có thể được áp dụng. khuyến nghị

• đảm bảo bạn sử dụng văn bản tối trên nền trắng
• cân nhắc sử dụng phông chữ serif, phông chữ này có thể dễ đọc hơn
• điều chỉnh kích thước văn bản thành

  /* main.css */
  
  /* on-screen styles */
  @media screen {
  
    body {
      margin: 2em;
      color: #fff;
      background-color: #000;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      margin: 0;
      color: #000;
      background-color: #fff;
    }
  
  }
  

  1 hoặc cao hơn
• sửa đổi phần đệm và lề khi cần thiết. Các đơn vị

  /* main.css */
  
  /* on-screen styles */
  @media screen {
  
    body {
      margin: 2em;
      color: #fff;
      background-color: #000;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      margin: 0;
      color: #000;
      background-color: #fff;
    }
  
  }
  

  2,

  /* main.css */
  
  /* on-screen styles */
  @media screen {
  
    body {
      margin: 2em;
      color: #fff;
      background-color: #000;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      margin: 0;
      color: #000;
      background-color: #fff;
    }
  
  }
  

  3 hoặc

  /* main.css */
  
  /* on-screen styles */
  @media screen {
  
    body {
      margin: 2em;
      color: #fff;
      background-color: #000;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      margin: 0;
      color: #000;
      background-color: #fff;
    }
  
  }
  

  4 tiêu chuẩn có thể thực tế hơn

Các đề xuất khác bao gồm…

Áp dụng các cột CSS

Giấy A4 và US Letter tiêu chuẩn có thể dẫn đến các dòng văn bản dài hơn và khó đọc hơn. Cân nhắc sử dụng các cột CSS trong bố cục in. Ví dụ

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

5

Trong ví dụ này, các cột sẽ được tạo khi có ít nhất 85 khoảng cách theo chiều ngang. Không cần đặt truy vấn phương tiện;

Sử dụng đường viền thay vì màu nền

Mẫu của bạn có thể có các phần hoặc hộp gọi ra được biểu thị bằng cách phối màu tối hơn hoặc ngược lại

Tiết kiệm mực bằng cách biểu thị các phần tử đó bằng đường viền

Xóa hoặc đảo ngược hình ảnh

Người dùng sẽ không muốn in hình ảnh và hình nền trang trí và không cần thiết. Bạn có thể xem xét một mặc định trong đó tất cả các hình ảnh được ẩn trừ khi chúng có lớp

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6

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

8

Tốt nhất, hình ảnh in nên sử dụng màu tối trên nền sáng. Có thể thay đổi màu SVG nhúng HTML trong CSS, nhưng sẽ có trường hợp bạn có ảnh bitmap tối hơn

Bộ lọc CSS có thể được sử dụng để đảo ngược và điều chỉnh màu sắc trong biểu định kiểu in. Ví dụ

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

9

Kết quả

Thêm nội dung bổ sung

Phương tiện in thường yêu cầu thông tin bổ sung không cần thiết trên màn hình. Thuộc tính CSS

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

7 có thể được sử dụng để nối thêm văn bản vào các phần tử giả

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

8 và

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

9. Ví dụ: hiển thị URL của liên kết trong ngoặc sau văn bản

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

3

Hoặc bạn có thể thêm tin nhắn chỉ in

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

0

Đối với các tình huống phức tạp hơn, hãy cân nhắc sử dụng một lớp chẳng hạn như

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6 trên các phần tử chỉ hiển thị khi được in,. Ví dụ

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

1

CSS

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

2

Ghi chú. hầu hết các trình duyệt hiển thị URL và ngày/giờ hiện tại trên đầu trang và/hoặc chân trang của trang in, do đó hiếm khi cần tạo thông tin này bằng mã

ngắt trang

Các thuộc tính CSS3

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

21 và

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

22 cho phép bạn kiểm soát cách hoạt động của các ngắt trang, cột hoặc vùng trước và sau một phần tử. Hỗ trợ là tuyệt vời, nhưng các trình duyệt cũ hơn có thể sử dụng các thuộc tính

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

23 và

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

24 tương tự

Có thể sử dụng các giá trị

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

21 và

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

22 sau đây

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

  27. mặc định - được phép nghỉ nhưng không bắt buộc

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

  28. tránh ngắt trang, cột hoặc vùng

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

  29. tránh ngắt trang

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

  60. buộc ngắt trang

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

  61. bí danh của

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

  60

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

  63. buộc ngắt trang để trang tiếp theo là trang bên trái

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

  64. buộc ngắt trang để tiếp theo là trang bên phải

Thí dụ. buộc ngắt trang ngay trước bất kỳ tiêu đề

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

65 nào

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

3

Ghi chú. cảnh giác với việc sử dụng quá nhiều ngắt trang. Tốt nhất, đầu ra của máy in nên sử dụng càng ít trang càng tốt

Thuộc tính

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

66 (và

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

67 cũ hơn) chỉ định xem có cho phép ngắt trang bên trong một phần tử hay không. Các giá trị thường được hỗ trợ

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

  27. mặc định - được phép nghỉ nhưng không bắt buộc

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

  28. tránh một sự phá vỡ bên trong nếu có thể

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

  29. tránh ngắt trang bên trong nếu có thể

Điều này có thể thích hợp hơn để chỉ định ngắt trang, vì bạn có thể sử dụng ít giấy nhất có thể trong khi tránh ngắt trang trong dữ liệu được nhóm như bảng hoặc hình ảnh

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

4

Thuộc tính

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

51 chỉ định số dòng tối thiểu trong một khối phải được hiển thị ở đầu trang. Hãy tưởng tượng một khối với năm dòng văn bản. Trình duyệt muốn ngắt trang sau dòng thứ tư để dòng cuối cùng xuất hiện ở đầu trang tiếp theo. Đặt

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

52 ngắt trên hoặc trước dòng hai để ít nhất ba dòng chuyển sang trang tiếp theo

Thuộc tính

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

53 tương tự như

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

51 ngoại trừ nó kiểm soát số lượng dòng tối thiểu để hiển thị ở cuối trang

Thuộc tính

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

55 kiểm soát đường viền phần tử trên các trang. Khi một phần tử có đường viền có ngắt trang bên trong

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

  56. mặc định, chia nhỏ bố cục. Đường viền trên cùng được hiển thị trên trang đầu tiên và đường viền dưới cùng được hiển thị trên trang thứ hai

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

  57. sao chép lề, phần đệm và đường viền. Tất cả bốn đường viền được hiển thị trên cả hai trang

Cuối cùng, CSS Paged Media (

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

58) có hỗ trợ trình duyệt hạn chế nhưng cung cấp cách nhắm mục tiêu các trang cụ thể để có thể xác định lề hoặc ngắt thay thế

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

5

Các thuộc tính ngắt trang CSS có thể được đặt trong các kiểu

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

3 hoặc

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6 của bạn vì chúng chỉ ảnh hưởng đến việc in, nhưng tôi khuyên bạn nên sử dụng chúng trong CSS in cho rõ ràng

Xin lưu ý rằng kiểm soát ngắt trang không chỉ là một gợi ý cho trình duyệt. Không có gì đảm bảo việc ngắt quãng sẽ bị ép buộc hoặc tránh được vì bố cục bị giới hạn trong giới hạn của tờ giấy

Nỗi đau in ấn

Kiểm soát phương tiện web in sẽ luôn bị hạn chế và kết quả có thể khác nhau giữa các trình duyệt. Mà nói

• các biểu định kiểu thân thiện với máy in có thể được trang bị theo phong cách retro cho bất kỳ trang web nào
• hầu hết các kiểu máy in sẽ hoạt động trong phần lớn các trình duyệt
• kiểu in sẽ không ảnh hưởng hoặc phá vỡ chức năng hiện có
• chi phí phát triển là tối thiểu

Thêm một vài ngắt trang và loại bỏ các phần không cần thiết sẽ làm hài lòng người dùng và nâng trang web của bạn lên trên đối thủ cạnh tranh. Thêm nó vào danh sách việc cần làm của bạn

Để có thêm kiến ​​thức CSS nâng cao, hãy đọc cuốn sách của chúng tôi, CSS Master, Phiên bản 2

Chia sẻ bài viết này

Craig Buckler

Craig là một nhà tư vấn web tự do ở Vương quốc Anh, người đã xây dựng trang đầu tiên của mình cho IE2. 0 vào năm 1995. Kể từ thời điểm đó, anh ấy đã ủng hộ các tiêu chuẩn, khả năng truy cập và các kỹ thuật HTML5 thực hành tốt nhất. Anh ấy đã tạo các thông số kỹ thuật doanh nghiệp, trang web và ứng dụng trực tuyến cho các công ty và tổ chức bao gồm Nghị viện Vương quốc Anh, Nghị viện Châu Âu, Bộ Năng lượng & Biến đổi Khí hậu, Microsoft, v.v. Anh ấy đã viết hơn 1.000 bài báo cho SitePoint và bạn có thể tìm thấy anh ấy @craigbuckler