Bảng in css

Question

Theo mặc định, hầu hết các trình duyệt đều sử dụng thuật toán bố cục bảng tự động. Độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung

Nội dung chính Show

kiểu dáng đơn giản
Phông chữ phù hợp
Nội dung không cần thiết
Liên kết HTML
Các từ viết tắt
ngắt trang
Bảng HTML
Liên kết một biểu định kiểu in với một trang
Nhận tạo

table-layout = 
  auto   |
  fixed

6

Chiều rộng của bảng và cột được đặt theo chiều rộng của các phần tử

table-layout = 
  auto   |
  fixed

7 và

table-layout = 
  auto   |
  fixed

8 hoặc theo chiều rộng của hàng ô đầu tiên. Các ô ở các hàng tiếp theo không ảnh hưởng đến độ rộng của cột

Theo phương pháp bố cục "cố định", toàn bộ bảng có thể được hiển thị sau khi hàng đầu tiên của bảng được tải xuống và phân tích. Điều này có thể tăng tốc thời gian kết xuất so với phương pháp bố cục "tự động", nhưng nội dung ô tiếp theo có thể không vừa với độ rộng cột được cung cấp. Các ô sử dụng thuộc tính

table-layout = 
  auto   |
  fixed

0 để xác định xem có cắt bất kỳ nội dung tràn nào hay không, nhưng chỉ khi bảng có chiều rộng đã biết;

Giá trị ban đầu

table-layout = 
  auto   |
  fixed

9Áp dụng cho các phần tử

table-layout = 
  auto   |
  fixed

7 và

table-layout = 
  auto   |
  fixed

3Kế thừakhông có Giá trị tính toánnhư đã chỉ địnhLoại hoạt ảnhrời rạc

table-layout = 
  auto   |
  fixed

Ví dụ này sử dụng bố cục bảng cố định, kết hợp với thuộc tính

table-layout = 
  auto   |
  fixed

4, để hạn chế chiều rộng của bảng. Thuộc tính

table-layout = 
  auto   |
  fixed

5 được sử dụng để áp dụng dấu chấm lửng cho những từ quá dài để phù hợp. Nếu cách bố trí bảng là

table-layout = 
  auto   |
  fixed

9, thì bảng sẽ phát triển để phù hợp với nội dung của nó, mặc dù đã chỉ định

table-layout = 
  auto   |
  fixed

4

Các tác giả web thường sử dụng CSS để làm cho trang web của họ trông ấn tượng trên màn hình, nhưng lại quên tạo biểu định kiểu cho các loại phương tiện phổ biến khác—máy in, âm thanh và thiết bị cầm tay màn hình nhỏ. Phương tiện in ấn là một trong những loại thực sự không nên bỏ qua, bởi vì nếu mọi người thích trang web của bạn, họ có thể muốn in nó ra và bạn nên làm cho bản in hấp dẫn và dễ đọc.

Bài viết này đề cập đến một số kỹ thuật hữu ích để tạo biểu định kiểu cho phương tiện được phân trang. Nó sẽ giúp bạn làm cho trang web của mình trông đẹp mắt trên giấy và sẽ tránh được nhu cầu tạo các phiên bản “thân thiện với máy in” riêng biệt cho các trang của bạn

kiểu dáng đơn giản

Khi thiết kế để in, tốt nhất là tránh tạo bố cục phức tạp. Đặc biệt, bạn nên tránh sử dụng phao và định vị cố định. Nếu bạn đang sử dụng đánh dấu ngữ nghĩa (có thể là như vậy nếu bạn đang sử dụng CSS), thì nhìn chung, bạn không cần phải làm gì nhiều để tạo kiểu cho đánh dấu của mình để in—hầu hết sẽ là tối ưu hóa và giải pháp thay thế cho những thứ không thể

Bạn cũng nên tránh nền có màu hoặc hình nền (dù sao trình duyệt web cũng có xu hướng tránh in những thứ này) và sử dụng các phương pháp trình bày thân thiện với mực hơn như đường viền và lề

Phông chữ phù hợp

Việc chọn một phông chữ tùy thuộc vào sở thích cá nhân, nhưng việc in ấn thường được thực hiện bằng phông chữ serif có kích thước điểm là 12

body
{
  font-family: "Nimbus Roman No9 L", "Times New Roman", serif;
  font-size: 12pt;
}

p
{
  text-align: justify;
}

Đối với phương tiện màn hình, bạn thường không khuyến khích sử dụng kích thước điểm cho phông chữ do có nhiều biến thể về kích thước và độ phân giải màn hình. Đối với bản in, sẽ hợp lý nếu cho rằng nó sẽ được thực hiện trên giấy A4, vì vậy sử dụng kích thước điểm là cách tốt nhất để đảm bảo tính nhất quán

Nội dung không cần thiết

Bạn có thể xóa bất kỳ nội dung nào không cần thiết khỏi phiên bản in bằng cách đặt thuộc tính hiển thị của nó thành “không”. Nội dung không cần thiết thường sẽ bao gồm các thành phần tương tác không có ý nghĩa gì trên giấy, chẳng hạn như menu điều hướng và biểu mẫu HTML

#navigation, form
{
  display: none;
}

Điều này sẽ ngăn phần tử có id là “navigation” và bất kỳ biểu mẫu HTML nào được hiển thị. Lưu ý rằng điều này khác với việc đặt chế độ hiển thị thành "ẩn", bởi vì các phần tử ẩn vẫn chiếm dung lượng trên trang

Liên kết HTML

Việc có các liên kết HTML trên giấy không đặc biệt hữu ích, vì vậy bạn có thể không muốn có bất kỳ định dạng nào trên chúng. Vì hầu hết các tác nhân người dùng hiển thị các liên kết được tô màu và gạch chân, bạn sẽ cần hoàn tác thao tác này

________số 8

Từ một trang in, không thể biết liên kết trỏ đến đâu. Với sự trợ giúp của một số bộ chọn CSS 3, có thể thêm thông tin vào trang in

a[href^="http://"]:after, a[href^="ftp://"]:after
{
  content: " (" attr(href) ")";
  font-size: 10pt;
}

Quy tắc này quy định rằng các neo có thuộc tính href bắt đầu bằng “http. //” hoặc “ftp. //” (bạn cũng có thể muốn bao gồm các sơ đồ URI khác), phải được theo sau bởi URL trong ngoặc đơn. Bạn cũng có thể muốn đặt phông chữ nhỏ hơn một chút, như tôi đã làm trong ví dụ này

Các từ viết tắt

Một số tác nhân người dùng hiển thị các phần tử “

#navigation, form
{
  display: none;
}

0” và “

#navigation, form
{
  display: none;
}

1” có đường viền bên dưới nếu chúng có thuộc tính “tiêu đề”. Bạn có thể muốn xóa đường viền này, đồng thời hiển thị nội dung của thuộc tính “tiêu đề” trên trang in. Điều này được thực hiện theo cách tương tự như ví dụ neo HTML

table-layout = 
  auto   |
  fixed

2

ngắt trang

Nó thường hữu ích trên phương tiện in để chỉ định vị trí nên và không nên ngắt trang. CSS cung cấp ba thuộc tính hữu ích để chỉ định hành vi ngắt trang—“ngắt trang trước”, “ngắt trang sau” và “ngắt trang bên trong”. Mặc dù hỗ trợ trình duyệt cho các thuộc tính này không tốt (Opera là ngoại lệ), bạn vẫn nên sử dụng chúng

table-layout = 
  auto   |
  fixed

3

Hãy nhớ cẩn thận khi đặt thuộc tính ngắt trang thành “luôn luôn”, bởi vì bạn không muốn lãng phí giấy của khách truy cập bằng cách in nhiều trang với rất ít dòng văn bản trên đó

Thuộc tính “ngắt trang sau” có thể được đặt thành “tránh” trên các tiêu đề để ngăn không cho chúng tự xuất hiện ở cuối trang. Sau đó, tiêu đề sẽ xuất hiện ở đầu trang tiếp theo, nơi có lẽ sẽ được theo sau bởi một số nội dung liên quan đến tiêu đề đó

Tránh ngắt trang bên trong các phần tử rất hữu ích để ngăn chặn các phần tử chặn ngắt trên một trang. Nếu một phần tử quá dài để vừa trên một trang, nó sẽ được chuyển sang trang tiếp theo

Bảng HTML

Khi tạo các bảng HTML, chúng phải được đánh dấu bằng các phần tử “_______ 72”, “________ 73” và nếu thích hợp, “_______ 74”. Điều này cho phép bao gồm các đầu trang và chân trang của bảng trên mỗi phần của bảng nếu nó ngắt trên một trang

table-layout = 
  auto   |
  fixed

7

Liên kết một biểu định kiểu in với một trang

Mặc dù có thể sử dụng một biểu định kiểu duy nhất với các quy tắc “

#navigation, form
{
  display: none;
}

5” cho các loại phương tiện khác nhau, nhưng tôi khuyên bạn nên giữ mỗi biểu định kiểu trong một tệp riêng biệt. Hai cách phổ biến nhất để liên kết biểu định kiểu với tài liệu HTML, là sử dụng các phần tử “

#navigation, form
{
  display: none;
}

6” hoặc “

#navigation, form
{
  display: none;
}

7”, với thuộc tính “phương tiện” được đặt thành loại thích hợp

Sử dụng các phần tử “

#navigation, form
{
  display: none;
}

6”

table-layout = 
  auto   |
  fixed

2

Sử dụng các phần tử “

#navigation, form
{
  display: none;
}

7”

table-layout = 
  auto   |
  fixed

4

Biểu định kiểu cũng có thể được liên kết với tài liệu HTML bằng cách sử dụng tiêu đề "Liên kết" HTTP, mặc dù điều này không được hỗ trợ rộng rãi

Trong các tài liệu XML (ví dụ: các trang WAP sử dụng XHTML-MP), các biểu định kiểu bên ngoài có thể được tham chiếu bằng hướng dẫn xử lý “biểu định kiểu xml” (xem Liên kết Biểu định kiểu với tài liệu XML). Điều này phải được đặt trong phần mở đầu XML, tôi. e. sau phần khai báo XML nhưng trước phần tử tài liệu

table-layout = 
  auto   |
  fixed

5

Lưu ý rằng tôi đã làm cho biểu định kiểu in liên tục trong các ví dụ này, bằng cách không cung cấp cho nó thuộc tính tiêu đề. Điều này là do tôi chưa bao giờ thấy cần phải có nhiều hơn một biểu định kiểu in. Việc sử dụng các biểu định kiểu liên tục, ưa thích và thay thế được đề cập trong báo cáo kỹ thuật của W3C, có tiêu đề

Nhận tạo

Mặc dù hỗ trợ trình duyệt cho một số quy tắc CSS phương tiện được phân trang hơi yếu, nhưng bằng cách làm theo các mẹo trong bài xã luận này, bạn sẽ có thể cải thiện đáng kể chất lượng của các phiên bản in của các trang của mình

Điều tốt nhất cần làm khi thiết kế biểu định kiểu in là so sánh bản xem trước bản in của trang của bạn trên một số trình duyệt khác nhau. Sau đó, sẽ không mất nhiều công sức để tạo ra các phiên bản in ấn tượng cho các trang của bạn. Nếu bạn cần một nơi nào đó để bắt đầu, hãy xem qua mã nguồn của trang này và xem biểu định kiểu của nó

programming css