Tùy chỉnh kích thước trang in CSS
Phương tiện được phân trang -- giấy, phim trong suốt, các trang được hiển thị trên màn hình máy tính, v.v. -- khác ở chỗ các thuật toán định dạng cho các trang phải quản lý Để xử lý ngắt trang, CSS2 mở rộng mô hình hiển thị trực quan như sau Show
Mô hình trang CSS2 chỉ định cách tài liệu được định dạng trong vùng hình chữ nhật -- phần -- có chiều rộng và chiều cao hữu hạn. Hộp trang không nhất thiết phải tương ứng với trang tính thực nơi tài liệu sẽ được hiển thị cuối cùng (giấy, độ trong suốt, màn hình, v.v. ). Mô hình trang CSS chỉ định định dạng trong hộp trang nhưng tác nhân người dùng có trách nhiệm chuyển hộp trang sang trang tính. Một số khả năng chuyển giao bao gồm
Mặc dù CSS2 không chỉ định cách tác nhân người dùng chuyển hộp trang sang trang tính, nhưng nó bao gồm một số cơ chế nhất định để thông báo cho tác nhân người dùng về trang đích Hộp trang là một vùng hình chữ nhật chứa hai vùng nhúng Tác giả chỉ định kích thước, hướng, lề, v.v. của hộp trang trong quy tắc @page Ví dụ: quy tắc @page sau đặt lề của trang thành 2cm @page { margin: 2cm } Các khai báo bên trong dấu ngoặc nhọn của quy tắc @page áp dụng cho mọi trang của tài liệu; . Tác giả chỉ định kích thước của hộp trang với thuộc tính. Thuộc tính được sử dụng để chỉ định cắt xén và đánh dấu chéo ( , , , , và ) áp dụng trong. Sơ đồ sau đây cho thấy mối quan hệ giữa trang tính, hộp trang và lề trang Các quy tắc CSS2 cũng áp dụng cho lề trang. Ví dụ: lề của hộp đầu tiên trên trang sẽ thu gọn với lề trang Không có khái niệm về phông chữ, vì vậy các đơn vị 'em' và 'ex' không được phép. Giá trị phần trăm trên thuộc tính lề có liên quan đến kích thước của. Tất cả các đơn vị khác được liên kết với các thuộc tính CSS2 tương ứng đều được phép Do giá trị lề âm (trên hộp trang hoặc trên các phần tử) hoặc nội dung có thể nằm ngoài hộp trang nhưng nội dung này có thể bị "cắt" -- bởi tác nhân người dùng, máy in hoặc cuối cùng là máy cắt giấy Thuộc tính này chỉ định kích thước và hướng của hộp trang Kích thước của hộp trang có thể là "tuyệt đối" (kích thước cố định) hoặc "tương đối" (có thể mở rộng, tôi. e. , lắp các khổ tấm có sẵn). Hộp trang tương đối cho phép tác nhân người dùng chia tỷ lệ tài liệu và sử dụng tối ưu kích thước mục tiêu. Hộp trang tuyệt đối đảm bảo định dạng chính xác khi đó là đặc quyền của tác giả Ba giá trị cho thuộc tính tạo hộp trang tương đối hộp trang tự động sẽ được đặt thành kích thước và hướng của trang mục tiêu. landscapeGhi đè hướng của mục tiêu. Hộp trang có cùng kích thước với mục tiêu và hướng bố trí bình thường chạy song song với phía mục tiêu dài hơn. PortraitGhi đè hướng của mục tiêu. Hộp trang có cùng kích thước với mục tiêu và hướng bố cục bình thường chạy song song với phía mục tiêu ngắn hơnTrong ví dụ sau, các cạnh bên ngoài của hộp trang sẽ thẳng hàng với mục tiêu. Giá trị phần trăm trên thuộc tính có liên quan đến kích thước mục tiêu, vì vậy nếu kích thước trang mục tiêu là 21. 0cm x 29. 7cm (tôi. e. , A4), lề là 2. 10cm và 2. 97cm @page { size: auto; /* auto is the initial value */ margin: 10%; } Giá trị độ dài cho thuộc tính tạo hộp trang tuyệt đối. Nếu chỉ có một giá trị chiều dài được chỉ định, nó sẽ đặt cả chiều rộng và chiều cao của hộp trang (i. e. , hình hộp là hình vuông). Vì hộp trang là , giá trị phần trăm không được phép cho thuộc tính Ví dụ @page { size: 8.5in 11in; /* width height */ } Ví dụ trên đặt chiều rộng của hộp trang là 8. 5in và chiều cao là 11in. Hộp trang trong ví dụ này yêu cầu kích thước trang mục tiêu là 8. 5"x11" hoặc lớn hơn Tác nhân người dùng có thể cho phép người dùng kiểm soát việc chuyển hộp trang sang trang tính (e. g. , xoay hộp trang tuyệt đối đang được in) Hiển thị các hộp trang không vừa với trang mục tiêuNếu hộp trang không vừa với kích thước trang mục tiêu, tác nhân người dùng có thể chọn
Tác nhân người dùng nên hỏi ý kiến người dùng trước khi thực hiện các thao tác này Định vị hộp trang trên trang tínhKhi hộp trang nhỏ hơn kích thước mục tiêu, tác nhân người dùng có thể tự do đặt hộp trang ở bất kỳ đâu trên trang tính. Tuy nhiên, bạn nên đặt hộp trang ở giữa trang tính vì điều này sẽ căn chỉnh các trang hai mặt và tránh vô tình làm mất thông tin được in gần mép trang tính Khi in chất lượng cao, các dấu thường được thêm vào bên ngoài hộp trang. Thuộc tính này mô tả chỉ định xem dấu chéo hay dấu cắt hoặc cả hai sẽ được hiển thị ngay bên ngoài cạnh. Các giá trị có ý nghĩa như sau dấu crossCrop cho biết nơi trang sẽ được cắt. dấu cắt xén (còn được gọi là dấu đăng ký hoặc dấu đăng ký) được sử dụng để căn chỉnh trang tính. noneKhông hiển thị bất kỳ dấu hiệu đặc biệt nàoDấu hiệu chỉ hiển thị trên hộp trang tuyệt đối. Trong hộp trang tương đối, hộp trang sẽ được căn chỉnh với mục tiêu và các dấu sẽ nằm ngoài khu vực có thể in được Kích thước, kiểu dáng và vị trí của dấu chéo phụ thuộc vào tác nhân người dùng 12. 2. 4 Trang trái, phải và đầu tiênKhi in tài liệu hai mặt, trang bên trái và bên phải sẽ khác nhau. Điều này có thể được thể hiện thông qua hai lớp giả CSS có thể được định nghĩa trong Tất cả các trang được tự động phân loại bởi tác nhân người dùng vào một trong hai. trái hoặc. lớp giả bên phải @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } Nếu các khai báo khác nhau đã được đưa ra cho các trang bên trái và bên phải, tác nhân người dùng phải tôn trọng các khai báo này ngay cả khi tác nhân người dùng không chuyển các hộp trang sang trang bên trái và bên phải (e. g. , máy in chỉ in một mặt) Tác giả cũng có thể chỉ định phong cách cho trang đầu tiên của tài liệu với. lớp giả đầu tiên @page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ } Cho dù trang đầu tiên của một tài liệu là. trái hoặc. bên phải phụ thuộc vào hướng viết chính của tài liệu và nằm ngoài phạm vi của tài liệu này. Tuy nhiên, để buộc một. trái hoặc. ngay trang đầu tiên, tác giả có thể chèn dấu ngắt trang trước hộp được tạo đầu tiên (e. g. , trong HTML, chỉ định điều này cho phần tử BODY) Các thuộc tính được chỉ định trong một. trái (hoặc. đúng) Quy tắc @page ghi đè những quy tắc được chỉ định trong quy tắc @page không có lớp giả được chỉ định. Các thuộc tính được chỉ định trong một. quy tắc @page đầu tiên ghi đè những quy tắc được chỉ định trong. trái (hoặc. đúng) quy tắc @page Ghi chú. Thêm khai báo vào. trái hoặc. lớp giả bên phải không ảnh hưởng đến việc tài liệu được in ra hai mặt hay một mặt (nằm ngoài phạm vi của thông số kỹ thuật này) Ghi chú. Các phiên bản CSS trong tương lai có thể bao gồm các lớp giả trang khác 12. 2. 5 Nội dung bên ngoài hộp trangKhi định dạng nội dung trong mô hình trang, một số nội dung có thể nằm ngoài hộp trang. Ví dụ: một phần tử có thuộc tính có giá trị 'pre' có thể tạo hộp rộng hơn hộp trang. Ngoài ra, khi các hộp được định vị hoặc , chúng có thể kết thúc ở những vị trí "không thuận tiện". Ví dụ: hình ảnh có thể được đặt trên cạnh của hộp trang hoặc 100.000 inch bên dưới hộp trang Thông số kỹ thuật cho định dạng chính xác của các phần tử đó nằm ngoài phạm vi của tài liệu này. Tuy nhiên, chúng tôi khuyên các tác giả và tác nhân người dùng nên tuân thủ các nguyên tắc chung sau đây liên quan đến nội dung bên ngoài hộp trang
Các phần sau giải thích định dạng trang trong CSS2. Bốn thuộc tính cho biết nơi tác nhân người dùng có thể hoặc nên ngắt trang và trên trang nào (trái hoặc phải) nội dung tiếp theo sẽ tiếp tục. Mỗi lần ngắt trang kết thúc bố cục ở hiện tại và làm cho các phần còn lại của bố cục được bố trí trong hộp trang mới Các giá trị cho các thuộc tính này có ý nghĩa như sau Khi cả hai thuộc tính có các giá trị khác với 'tự động', các giá trị 'luôn luôn', 'trái' và 'phải' sẽ được ưu tiên hơn 'tránh'. Xem phần trên để biết các quy tắc chính xác về cách các giá trị này buộc hoặc triệt tiêu ngắt trang Các thuộc tính này chỉ định số dòng tối thiểu của một đoạn văn phải được đặt ở dưới cùng () và trên cùng () của trang (xem phần trên để biết thông tin về định dạng đoạn văn) Trong quy trình bình thường, ngắt trang có thể xảy ra ở những nơi sau Những giờ nghỉ này tuân theo các quy tắc sau
Có một ngoại lệ cho cả hai quy tắc
Ngắt trang không thể xảy ra bên trong các hộp được 12. 3. 3 Buộc ngắt trangNgắt trang phải xảy ra tại (1) nếu trong số và thuộc tính của tất cả các phần tử tạo hộp đáp ứng ở lề này, có ít nhất một hộp có giá trị 'always', 'left' hoặc 'right' 12. 3. 4 ngắt trang "Tốt nhất"CSS không xác định phải sử dụng bộ ngắt trang nào trong số các ngắt trang được phép; . Nhưng CSS khuyến nghị rằng các tác nhân người dùng nên tuân thủ các phương pháp phỏng đoán sau (đồng thời nhận ra rằng chúng đôi khi trái ngược nhau)
Ví dụ: giả sử =4, =2 và có 20 dòng ( có sẵn ở cuối trang hiện tại
Bây giờ giả sử rằng =10, =20, và có 8 dòng ở cuối trang hiện tại
12. 4 Xếp tầng trong ngữ cảnh trangCác khai báo trong tuân theo tầng giống như các khai báo CSS2 thông thường Xem xét ví dụ sau @page { margin-left: 3cm; } @page :left { margin-left: 4cm; } Do bộ chọn lớp giả, lề trái trên các trang bên trái sẽ là '4cm' và tất cả các trang khác (i. e. , các trang bên phải) sẽ có lề trái là '3cm' Làm cách nào để đặt kích thước trang trong CSS?Ví dụ về chiều cao và chiều rộng của CSS . Set the height and width of a element: div { height: 200px; width: 50%; .. . Set the height and width of another
element: div { height: 100px; width: 500px; .. . This
element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;. Chúng tôi có thể áp dụng CSS cho trang để in không?Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy . Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in.
Làm cách nào để sử dụng CSS để in?Công cụ dành cho nhà phát triển
. Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó chọn 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 đó.
Làm cách nào để kiểm tra CSS in?css. Mở trình duyệt và làm mới trang. Nhấp chuột phải và chọn In > Xem trước bản in (Firefox, nhưng thực sự là bất kỳ trình duyệt nào) . Mở Menu lệnh. ( tl;dr Cmd+Shift+P (Mac) hoặc Ctrl+Shift+P (Windows, Linux)) Bắt đầu nhập Rendering và chọn Show Rendering Đối với trình đơn thả xuống Giả lập Phương tiện CSS, hãy chọn in |