Thông tin tài liệu
http://vietjack.com/css/index.jsp Copyright © vietjack.com Qui tắc @page CSS Thiết bị phân trang (paged media) khác với thiết bị liên tục (continuous media) chỗ: nội dung tài liệu phân chia nhỏ thành nhiều trang rời rạc Phương tiên phân trang bao gồm paper, phim, trang hiển thị hình máy tính, … CSS2 Standard giới thiệu số đặc điểm để kiểm soát phân trang bản, cho phép lập trình viên tạo Style giúp trình duyệt tìm cách tốt để in tài liệu chúng Page Model CSS2 xác định cách tài liệu định dạng bên khu vực hình chữ nhật Page Box có độ rộng chiều cao Những đặc điểm chia thành hai nhóm: • Các đặc điểm để định nghĩa Page Layout • Các đặc điểm để điều khiển phân trang tài liệu Qui tắc @page CSS CSS2 định nghĩa page box, box có kích thước giới hạn mà nội dung biểu bên Page box vùng hình chữ nhật bao gồm hai khu vực: • Page Area: bao gồm box bố trí page Các cạnh page area đóng vai trò khối chứa ban đầu cho layout xuất Page Break • Margin Area: bao quanh Page area Bạn xác định kích cỡ, chiều, lề, … page box bên qui tắc rule Kích cỡ Page Box thiết lập với thuộc tính size Kích cỡ Page Area kích cỡ Page Box trừ Margin Area Ví dụ, qui tắc @page sau thiết lập kích cỡ Page Box 8.5 x 11 inch tạo lề 2cm tất cạnh Page Box Page Area > la gia tri mac dinh */ Ví dụ sau thiết lập độ rộng Page Box 8.5 inch chiều cao 11 inch Page Box ví dụ cần Target Sheet có kích cỡ 8.5 x 11 lớn /* hai gia http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com Sau bạn tạo Page Layout, bạn sử dụng tài liệu việc thêm thuộc tính page vào style Ví dụ, style biểu tất bảng tài liệu Lanscape Page: size : landscape } Do có qui tắc trên, in, trình duyệt bắt gặp phần tử tài liệu, Page Layout Portrait Layout theo mặc định, trình duyệt bắt đầu Page in bảng Lanscape Page Left, Right First Page CSS Theo mặc định in, thiết bị hiển thị page khổ giấy, gọi Single-sized Document Khái niệm Double-sided Document tức in hai page khổ giấy Trong in Double-sided Document, Page Box Left Right Page nên khác Việc biểu diễn thơng qua Pseudo Class CSS sau: margin-right: 3cm; } margin-right: 4cm; } Bạn xác định Style cho First Page tài liệu cách sử dụng :first Pseudo Class Phân trang CSS Trừ bạn xác định, không ngắt trang (Page Break) xuất định dạng Page thay đổi nội dung hiển thị đầy Page Box Để kiểm sốt trình ngắt trang, bạn sử dụng thuộc tính page-break-before, page-break-after page-break-inside Hai thuộc tính page-break-before page-break-after chấp nhận giá trị auto, always, avoid, left, right Từ khóa auto mặc định, tức trình duyệt tạo Page Break cần thiết Từ khóaalways buộc trình duyệt phải tạo ngắt trang trước sau phần tử, từ khóa avoid buộc trình duyệt tạo ngắt trang trước sau phần tử Hai từ khóa left http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com rightbuộc trình duyệt tạo hai ngắt trang, phần tử hiển thị Left Page Right Page (trong Double-sided Document) Để không phức tạp, bạn sử dụng thuộc tính pagination CSS Giả sử tài liệu bạn có Header cấp độ xuất phần đầu chương (tức Đầu đề cho chương mới) Header cấp độ để biểu thị khu vực (tức Đầu đề cho phần nội dung chương – Section Header) Nếu bạn muốn xác định rằng: có chương chương xuất Right Page Section Header không bị chia tách Page Break, bạn làm sau: h2 { Chỉ sử dụng giá trị auto avoid với thuộc tính page-break-inside Nếu bạn thích bảng khơng bị tách Page Break, bạn viết qui tắc: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... thêm thuộc tính page vào style Ví dụ, style biểu tất bảng tài liệu Lanscape Page: size : landscape } Do có qui tắc trên, in, trình duyệt bắt gặp phần tử tài liệu, Page Layout Portrait Layout theo mặc định, trình duyệt bắt đầu Page in bảng Lanscape Page Left, Right First Page CSS Theo mặc... không ngắt trang (Page Break) xuất định dạng Page thay đổi nội dung hiển thị đầy Page Box Để kiểm sốt trình ngắt trang, bạn sử dụng thuộc tính page- break-before, page- break-after page- break-inside
Ngày đăng: 02/12/2017, 14:49
Xem thêm:
