Trang in css (kích thước tùy chỉnh)
|
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 với phương tiện liên tục ở chỗ thuật toán định dạng cho các trang phải quản lý ngắt trang. Để 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 -- hộp trang -- 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 nhượng 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ề kích thước và hướng trang mục tiêu 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 'kích thước'. Thuộc tính 'marks' được sử dụng để chỉ định cắt xén và đánh dấu chéo Các thuộc tính lề ('lề trên', 'lề phải', 'lề dưới', 'lề trái' và 'lề') áp dụng trong ngữ cảnh trang. Sơ đồ sau đây cho thấy mối quan hệ giữa trang tính, hộp trang và lề trang  Quy tắc CSS2 để thu gọn lề dọc 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 Bối cảnh 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 hộp trang. 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 định vị tuyệt đối 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à 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 'size' 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 'lề' 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 'size' 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à khối chứa ban đầu, giá trị phần trăm không được phép cho thuộc tính 'kích thước' 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 liệu dấu gạch ngang hay dấu cắt xén hay cả hai sẽ được hiển thị ngay bên ngoài cạnh hộp trang. 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, hộp trang trên trang bên trái và bên phải phải khác nhau. Điều này có thể được thể hiện thông qua hai lớp giả CSS có thể được xác định trong ngữ cảnh trang 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 'khoảng trắng' có giá trị 'trước' có thể tạo hộp rộng hơn hộp trang. Ngoài ra, khi các hộp được định vị tuyệt đối hoặc thả nổi, 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 trong hộp trang hiện tại và làm cho các phần còn lại của cây tài liệu đượ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 về ngắt trang được phép để biết các quy tắc chính xác về cách các giá trị này buộc hoặc chặn 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 để ở dưới cùng ('mồ côi') và trên cùng ('góa phụ') của trang (xem phần trên hộp dòng để 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 hộp được định vị tuyệt đối 12. 3. 3 Buộc ngắt trangNgắt trang phải xảy ra tại (1) nếu trong số các thuộc tính 'ngắt trang sau' và 'ngắt trang trước' 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ị ' 12. 3. 4 lần 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ử 'mồ côi'=4, 'góa phụ'=2 và có 20 dòng (hộp dòng có sẵn ở cuối trang hiện tại
Bây giờ, giả sử rằng 'mồ côi'=10, 'góa phụ'=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 ngữ cảnh trang tuân theo tầng giống như các khai báo CSS2 bình thường Xem xét ví dụ sau @page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;
}
Do tính đặc hiệu cao hơn của 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' @media print CSS là gì?Có thể sử dụng quy tắc @media CSS để áp dụng một phần của biểu định kiểu dựa trên kết quả của một hoặc nhiều truy vấn phương tiện . Với nó, bạn chỉ định một truy vấn phương tiện và một khối CSS để áp dụng cho tài liệu khi và chỉ khi truy vấn phương tiện khớp với thiết bị có nội dung đang được sử dụng.
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.
Kích thước tài liệu A4 là bao nhiêu?Giấy mm inch A3 297 x 420mm 11. 7 x 16. 5 inch A4 210x297mm 8. 3x11. 7 inch A5 148. 5x210mm 5. 8 x 8. 3 inch A6 105 x 148. 5mm 4. 1x5. 8 inch |
