آموزش مدیا صفحه در CSS

4 سال پیش

امتیاز دهید post

آموزش مدیا صفحه در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مدیا صفحه در CSS خواهیم پرداخت.

مدیا صفحه از این نظر متفاوت است که محتوای سند به یک یا چند صفحه گسسته تقسیم می شود. مدیا صفحه دارای کاغذ، شفافیت و صفحاتی است که در صفحه رایانه نمایش داده می شود و غیره

استاندارد CSS2 برخی از ویژگی های اساسی کنترل صفحه بندی را به شما معرفی می کند که به نویسندگان اجازه می دهد تا مرورگر را دریابند که چگونه اسناد خود را به بهترین شکل چاپ کند.

مدل صفحه CSS2 نحوه قالب بندی یک سند را در یک منطقه مستطیل شکل – جعبه صفحه – مشخص می کند که دارای عرض و ارتفاع محدود باشد. این ویژگی ها به دو گروه تقسیم می شوند –

ویژگی های CSS2 که طرح بندی
ویژگی های CSS2 که صفحه بندی یک سند را کنترل می کنند.

تعریف صفحات: قانون page@

CSS2 یک “جعبه صفحه” ( “page box”) را جعبه ای از ابعاد محدود که در آن محتوا ارائه می شود ، تعریف می کند. جعبه صفحه یک منطقه مستطیل شکل است که شامل دو ناحیه است –

ناحیه صفحه – ناحیه صفحه شامل کادرهای مشخص شده در آن صفحه است. لبه های ناحیه صفحه به عنوان بلوک حاوی اولیه برای چیدمان عمل می کنند که بین وقفه های صفحه رخ می دهد.

ناحیه حاشیه – منطقه صفحه را احاطه کرده است.

می توانید ابعاد، جهت، حاشیه و غیره یک جعبه صفحه را در یک قانو page@ مشخص کنید. ابعاد جعبه صفحه با ویژگی ‘size’ تنظیم شده است. ابعاد ناحیه صفحه ابعاد کادر صفحه منهای ناحیه حاشیه است.

به عنوان مثال ، قانون زیر page@ اندازه جعبه صفحه را 8.5 × 11 اینچ قرار می دهد و حاشیه “2 سانتی متر” را از هر طرف بین لبه جعبه صفحه و منطقه صفحه ایجاد می کند –

&lt;style type = "text/css"&gt;
   &lt;!--
      @page { size:8.5in 11in; margin: 2cm }
   --&gt;
&lt;/style&gt;

<!--

@page { size:8.5in 11in; margin: 2cm }

-->

</style>

برای تنظیم حاشیه برای صفحه خود می توانید از خصوصیات margin ، margin-top ، margin-bottom ، margin-left و margin-right در قانون page@ استفاده کنید.

سرانجام، ویژگی mark ها در قانون page@ برای ایجاد علائم برش و ثبت در خارج از جعبه صفحه در صفحه هدف استفاده می شود. به طور پیش فرض، هیچ علامتی چاپ نمی شود. شما می توانید از یک یا هر دو کلمه کلیدی crop و cross برای ایجاد علائم برش و علائم ثبت نام به ترتیب در صفحه چاپ هدف استفاده کنید.

تنظیم اندازه صفحه در مدیا صفحه در CSS

ویژگی size اندازه و جهت گیری جعبه صفحه را مشخص می کند. چهار مقدار وجود دارد که می تواند برای اندازه صفحه استفاده شود –

auto– جعبه صفحه به اندازه و جهت صفحه هدف تنظیم می شود.

landscape– جهت گیری هدف را لغو می کند. جعبه صفحه همان اندازه هدف است و اضلاع بلندتر به صورت افقی است.

portrait – جهت گیری هدف را نادیده می گیرد. جعبه صفحه همان اندازه هدف است و اضلاع کوتاهتر آن به صورت افقی است.

length – مقادیر طول برای ویژگی ‘size’ یک جعبه صفحه مطلق ایجاد می کند. اگر فقط یک مقدار طول مشخص شده باشد ، عرض و ارتفاع جعبه صفحه را تنظیم می کند. مقادیر درصد برای ویژگی “size” مجاز نیست.

در مثال زیر، لبه های بیرونی جعبه صفحه با هدف همسو می شوند. مقدار درصد در ویژگی “حاشیه” (‘margin’) نسبت به اندازه هدف است بنابراین اگر ابعاد ورق هدف 21.0 سانتی متر × 29.7 سانتی متر باشد (به عنوان مثال A4) ، حاشیه 2.10 سانتی متر و 2.97 سانتی متر است.

&lt;style type = "text/css"&gt;
   &lt;!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   --&gt;
&lt;/style&gt;

<!--

@page {

size: auto; /* auto is the initial value */

margin: 10%;

}

-->

</style>

مثال زیر عرض جعبه صفحه را 8.5 اینچ و ارتفاع را 11 اینچ قرار می دهد. جعبه صفحه در این مثال به اندازه صفحه هدف 8.5 “× 11” یا بزرگتر نیاز دارد.

&lt;style type = "text/css"&gt;
   &lt;!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   --&gt;
&lt;/style&gt;

<!--

@page {

size: 8.5in 11in; /* width height */

}

-->

</style>

پس از ایجاد طرح بندی صفحه با نام، می توانید با افزودن ویژگی صفحه به سبکی که بعداً روی عنصری در سند شما اعمال می شود =، از آن در سند خود استفاده کنید. به عنوان مثال، این سبک تمام جداول موجود در سند شما را در صفحات چشم انداز ارائه می دهد –

&lt;style type = "text/css"&gt;
   &lt;!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   --&gt;
&lt;/style&gt;

<!--

@page { size : portrait }

@page rotated { size : landscape }

table { page : rotated }

-->

</style>

با توجه به قانون بالا هنگام چاپ، اگر مرورگر با عنصر <table> در سند شما روبرو شود و طرح صفحه فعلی، طرح عمودی پرتره باشد، صفحه جدیدی را شروع می کند و جدول را در صفحه افقی چاپ می کند.

صفحات چپ، راست و اول در مدیا صفحه در CSS

هنگام چاپ اسناد دو طرفه، کادرهای صفحه در صفحات چپ و راست باید متفاوت باشد. این را می توان از طریق دو کلاس شبه CSS به شرح زیر بیان کرد –

&lt;style type = "text/css"&gt;
   &lt;!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   --&gt;
&lt;/style&gt;

<!--

@page :left {

margin-left: 4cm;

margin-right: 3cm;

}

@page :right {

margin-left: 3cm;

margin-right: 4cm;

}

-->

</style>

می توانید سبک را برای صفحه اول یک سند با کلاس شبه اول تعیین کنید –

&lt;style type = "text/css"&gt;
   &lt;!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   --&gt;
&lt;/style&gt;

<!--

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {

margin-top: 10cm /* Top margin on first page 10cm */

}

-->

</style>

کنترل صفحه بندی

درصورتی که روش دیگری تعیین نکنید، تقسیم صفحه فقط در صورت تغییر قالب صفحه یا هنگام سرریز شدن محتوا از جعبه صفحه فعلی اتفاق می افتد. ، از ویژگی های break-break-page ، break-break صفحه بعد و page-break داخل استفاده کنید.

کلید واژه خودکار به طور پیش فرض است، به شما اجازه می دهد مرورگر در صورت لزوم، صفحه را ایجاد کند. کلمه کلیدی همیشه یک صفحه را قبل یا بعد از عنصر مجبور می کند، در حالی که از سرکوب تقسیم صفحه بلافاصله قبل یا بعد از عنصر جلوگیری کنید. کلمات کلیدی چپ و راست یک یا دو صفحه را مجبور به تقسیم می کنند، بنابراین عنصر در یک صفحه چپ یا راست ارائه می شود.

استفاده از خصوصیات صفحه بندی کاملاً ساده است. فرض کنید سند شما دارای سرفصل های سطح 1 است که فصل های جدیدی را با عناوین سطح 2 شروع می کند تا بخش ها را نشان دهد. شما می خواهید هر فصل از یک صفحه جدید و در سمت راست شروع شود، اما نمی خواهید سرصفحه های بخش در یک صفحه از محتوای بعدی تقسیم شود. با استفاده از قانون زیر می توانید به این هدف برسید –

&lt;style type = "text/css"&gt;
   &lt;!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   --&gt;
&lt;/style&gt;

<!--

h1 { page-break-before : right }

h2 { page-break-after : avoid }

-->

</style>

فقط از autoاستفاده کنید و از مقادیر با ویژگی تقسیم صفحه جلوگیری کنید. اگر ترجیح می دهید جداول شما در صورت امکان در صفحات مختلف تقسیم نشود ، قانون را می نویسید –

&lt;style type = "text/css"&gt;
   &lt;!--
      table { page-break-inside : avoid }
   --&gt;
&lt;/style&gt;

<!--

table { page-break-inside : avoid }

-->

</style>

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش مدیا صفحه در CSS

آموزش مدیا صفحه در CSS

تعریف صفحات: قانون page@

تنظیم اندازه صفحه در مدیا صفحه در CSS

صفحات چپ، راست و اول در مدیا صفحه در CSS

کنترل صفحه بندی

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش مدیا صفحه در CSS

تعریف صفحات: قانون page@

تنظیم اندازه صفحه در مدیا صفحه در CSS

صفحات چپ، راست و اول در مدیا صفحه در CSS

کنترل صفحه بندی

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه