Bạn sẽ học cách sử dụng CSS để làm cho việc in một trang web trở nên thuận tiện? cùng với các tính năng như thêm ngắt trang, ẩn phần cụ thể khỏi in và các tính năng khác, Làm cách nào để chặn người dùng in trang web? và trình diễn để làm rõ các ý tưởng liên quan

Bạn đang xem: cách in trong html

Tải sách này – & gt; Các vấn đề về mảng: Đối với các cuộc phỏng vấn và lập trình cạnh tranh

Thời gian đọc: 35 phút

Bạn có biết rằng chúng tôi có thể in và lưu (dưới dạng PDF) hầu hết các trang web không? miễn là in không bị chặn. Điều này có thể được kích hoạt bằng phím tắt CTRL + P trên Windows.

Mặc dù in một trang web là một tính năng rất hữu ích nhưng nó đi kèm với những thách thức riêng. Bạn cần CSS đặc biệt cho trang của mình để xử lý quá trình in nhằm đảm bảo rằng trang in trông đẹp theo sự kiểm soát của bạn. Chúng tôi sẽ hướng dẫn bạn và làm theo nó, bạn sẽ là người thành thạo trong việc tạo bất kỳ trang web HTML nào để in .

Trong bài viết này, bạn sẽ tìm hiểu:

  • Cách sử dụng CSS để giúp việc in trang web trở nên thuận tiện? cùng với các tính năng như thêm ngắt trang, ẩn phần cụ thể khỏi in và các tính năng khác
  • Làm cách nào để chặn người dùng in trang web?
  • Một minh chứng để làm rõ những ý tưởng có liên quan

Giới thiệu

Trong thời đại nhìn chằm chằm vào màn hình của chúng ta, ai là người in các trang web? Đây là một câu hỏi hợp lệ, nhưng hãy cân nhắc:

  1. In vé du lịch
  2. Lưu một tệp PDF để đọc ngoại tuyến
  3. In chỉ dẫn tuyến đường hoặc lịch trình
  4. In biên lai cho mục đích ghi sổ

Còn nhiều tình huống khác, nhưng việc in các trang web có thể gây khó chịu:

  1. Mực bị lãng phí trên hình nền và hình ảnh không gia công
  2. Quảng cáo được in
  3. Không thể nhìn thấy các URL liên kết
  4. Các phần bị cắt hoặc biến mất hoàn toàn

Hầu hết các nhà phát triển web không dành nhiều thời gian để làm cho trang web in có thể truy cập được. Việc chuyển đổi các trang web động, đáp ứng sang giấy được phân trang có thể là một thách thức, nhưng bạn có thể sử dụng tính năng kiểm soát in CSS để tạo một biểu định kiểu cơ bản sau vài giờ.

In CSS

@media có thể được sử dụng để chỉ định các kiểu khác nhau cho các phương tiện khác nhau, tức là người ta có thể xác định các quy tắc khác nhau cho màn hình và máy in.
Đoạn mã sau chỉ định các họ phông chữ khác nhau cho màn hình và bản in, nhưng cùng kích thước phông chữ cho cả hai:

  & lt; style type = "text / css" & gt;
màn hình @media
    {
p.bodyText {font-family: verdana, arial, sans-serif;}
}

màn hình @media
    {
p.bodyText {font-family: georgia, times, serif;}
}

@media screen, print
    {
p.bodyText {font-size: 10pt;}
}
& lt; / style & gt;
 

Chúng tôi cũng có thể sử dụng thuộc tính media khi liên kết với biểu định kiểu bên ngoài:

  & lt; link rel = "stylesheet" type = "text / css" media = "print" href = "print.css" & gt;
 

Cũng có thể giữ hai biểu định kiểu riêng biệt: một cho màn hình và một cho máy in. Biểu định kiểu cho màn hình có thể hoạt động như một cơ sở cho biểu định kiểu máy in. Để làm điều này:

  & lt; link rel = "stylesheet" type = "text / css" media = "screen" href = "main.css" & gt;
    & lt; link rel = "stylesheet" type = "text / css" media = "print" href = "print.css" & gt;
 

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

Xem Thêm  SQL Server CHỌN HÀNG ĐẦU theo các ví dụ thực tế - chọn top 10 trong sql

Làm cách nào để gỡ lỗi tính năng in trang?

  1. Có thể thực hiện bằng cách sử dụng Ctrl + P để xem trước bản in

  2. Công cụ dành cho nhà phát triển Chrome cung cấp các cách để mô phỏng bố cục in:

Công cụ dành cho nhà phát triển của Chrome – & gt; Công cụ khác – & gt; Kết xuất – & gt; Thay đổi mô phỏng kết xuất thành “in”

Demo để in trang

Chúng tôi sẽ trình bày những kiến ​​thức cơ bản về CSS in.
Bạn có thể chạy bản trình diễn này cục bộ trên máy của mình. Tải xuống mã từ đây.
Chúng tôi có một trang web đơn giản được thiết kế bằng HTML và CSS:

Nó hiện không có bất kỳ CSS in nào được thêm vào. Do đó, trang in trông giống như (ở mức thu phóng 50%):

Mặc dù không có CSS ​​in nào được thêm vào trang, một số kiểu HTML đã không được giữ lại như màu nền của trang. Điều này là do, theo mặc định, các trình duyệt không in màu nền. Ngoài ra, họ phông chữ của văn bản được thay đổi thành Times, theo mặc định.

Hãy thêm một biểu định kiểu riêng để in:

  & lt; link rel = "stylesheet" type = "text / css" media = "print" href = "print.css" & gt;
 

Làm cách nào để Xóa nội dung không cần thiết khỏi quá trình in?

Trước khi tiếp tục, chúng tôi khuyên bạn nên xóa và thu gọn nội dung tiêu chuẩn bằng display: none . Thông thường, các phần không quan trọng bao gồm đầu trang, chân trang, hình ảnh, quảng cáo, v.v.
Thêm đoạn mã sau để thực hiện tương tự:

  header, footer, sang một bên, điều hướng, biểu mẫu, iframe, .menu, .hero, .adslot {
    không trưng bày;
}
 

Trang bây giờ trông giống như:

Như bạn có thể thấy (hoặc không thấy: D), quảng cáo không còn hiển thị nữa.

Tạo kiểu cơ bản

Để định dạng trang in, hãy thêm mã sau vào print.css:

  body {
    lề: 0;
    màu: # 000;
    màu nền: #ffff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    chiều cao dòng: 100%;
    kích thước phông chữ: 15px;
}
 

Đoạn mã này sẽ ghi đè lên kiểu được định nghĩa bởi main.css. Trang in của chúng tôi bây giờ trông giống như:

Xem Thêm  Truy vấn SQL để tính tổng số ngày giữa hai ngày cụ thể - sql ngày giữa hai ngày

HTML cung cấp một cách tuyệt vời để thêm liên kết: thẻ & lt; a & gt; . Tuy nhiên, trong khi in, điều này dẫn đến một vấn đề: người ta không thể xem URL của liên kết, do đó làm cho nó trở nên vô dụng. Để khắc phục điều này, hãy thêm những thứ sau:

  a [href * = '//']: sau {
    nội dung: "(" attr (href) ")";
}
 

Điều này làm cho URL của liên kết có sẵn sau nó. Tương tự, dấu []: before có thể được sử dụng để tạo URL trước liên kết.

Làm thế nào để Đảo ngược và Điều chỉnh Hình ảnh?

Đôi khi, điều quan trọng là phải đưa hình ảnh vào trang in. Tuy nhiên, cố gắng không sử dụng hình ảnh có nền tối vì chúng gây lãng phí mực. Thay vào đó, hãy sử dụng thuộc tính filter của CSS để đảo ngược và điều chỉnh màu sắc của hình ảnh, như sau:

 . graph {
    bộ lọc: đảo ngược (100%) xoay màu (180deg) độ sáng (120%) độ tương phản (150%);
}
 

Bạn cũng có thể điều chỉnh kích thước hình ảnh thành chiều rộng tối đa để hình ảnh không bị chảy ra khỏi giấy:

 . img2 {
    chiều rộng tối đa: 500px;
}
 

Làm cách nào để thêm ngắt trang?

Bạn có thể muốn thêm dấu ngắt trang trước hoặc sau một phần tử cụ thể. Thêm mã sau để thêm ngắt trang sau một số phần tử:

 . list {
    page-break-after: luôn luôn;
}
 

Lưu ý: Để tránh ngắt trang giữa các phần tử nhất định, có thể thêm mã sau:

  p {
  page-break-inside: tránh;
}
 

Làm cách nào để chặn việc in trang?

Đôi khi, bạn có thể không muốn cho phép người dùng in trang web của mình. Trong trường hợp này, thật đơn giản để chặn in. Chỉ cần thêm mã sau vào print.css của bạn và xóa mọi thứ khác:

  body {display: none; }
 

Điều này chỉ dẫn đến một trang trống khi in.
Tuy nhiên, điều này có thể khiến người dùng thất vọng, khiến họ băn khoăn không biết máy tính của mình có bị hỏng hóc gì không. Để tránh những trường hợp như vậy, bạn có thể thêm một thông báo đặc biệt cho người dùng như sau:
Thêm tất cả mã của bạn vào một phần tử div noprint .
Sau khi đóng div này, hãy tạo một phần tử div khác như sau:

  & lt; div id = "print" & gt;
 & lt; p & gt; Trang này dùng để xem trực tuyến và có thể không được in. & lt; / p & gt;
 & lt; / div & gt;
 

Thêm phần sau vào print.css

của bạn

  # noprint {display: none; }
#print {display: block; }
 

Thêm phần sau vào main.css

của bạn

  # noprint {display: block; }
#print {display: none; }
 

Bây giờ trang in của bạn sẽ giống như sau:

Xem Thêm  Mệnh đề WHERE trong MySQL: VÀ, HOẶC, IN, KHÔNG TRONG Ví dụ về truy vấn - hoặc trong mệnh đề where sql


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để in trong html

Form nhập dữ liệu trong HTML

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2020-10-02
  • Đánh giá: 4 ⭐ ( 7102 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cảm ơn các bạn đã theo dõi video. Hãy đăng ký kênh để xem video mới nhất nhé.
    Nhớ like và share ủng hộ mình nhé. Thank you!!!

    html css nguyenthithuylien

Làm cách nào để tôi in đậm văn bản trong HTML?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7372 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] sử dụng hoặc gắn thẻ Ngoài ra, bạn có thể thử với css text

Các hành vi bị cấm trong hoạt động đấu thầu

  • Tác giả: baoxaydung.com.vn
  • Đánh giá: 5 ⭐ ( 5212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: (Xây dựng) – Đưa, nhận, môi giới hối lộ; lợi dụng chức vụ quyền hạn để can thiệp bất hợp pháp vào hoạt động đấu thầu… Được xem là các hành vi bị cấm t

JavaScript là gì? Có nên học JavaScript hay không?

  • Tác giả: final-blade.com
  • Đánh giá: 4 ⭐ ( 4418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JAVASCRIPT LÀ GÌ? ỨNG DỤNG CỦA NGÔN NGỮ JAVASCRIPT

  • Tác giả: www.greenacademy.edu.vn
  • Đánh giá: 3 ⭐ ( 5384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một trong những ngôn ngữ lập trình web phổ biến nhất hiện nay. Cùng với HTML và CSS, đây là bộ ba ngôn ngữ cơ bản dành cho những lập trình viên mới bắt đầu với việc lập trình website. Hãy cùng Green Academy tìm hiểu về ngôn ngữ lập trình này một cách rõ hơn bạn nhé!

Thay đổi tư duy như thế nào để tạo nguồn lực thúc đẩy phát triển du lịch tại Hải Phòng?

  • Tác giả: thuonghieucongluan.com.vn
  • Đánh giá: 5 ⭐ ( 1425 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hải Phòng có nhiều điều kiện để phát triển ngành du lịch, là vùng đất lâu đời với nhiều truyền thống văn hóa, lịch sử, lễ h

Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 5671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, in đậm trong HTML, in nghiêng trong HTML, gạch chân trong HTML, gạch ngang trong HTML, chỉ số trên trong HTML, chỉ số dưới trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php