سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبلی به آموزش کار با ویژگی box-sizing در CSS پرداختیم؛ این ویژگی چگونگی محاسبه عرض و ارتفاع یک عنصر را تعریف می کند و تعیین می نماید که عنصر باید شامل padding و مرز باشد یا خیر.
در این جلسه می خواهیم به سراغ آموزش کار با ویژگی break-after در CSS برویم.
آموزش کار با ویژگی break-after در CSS
به مثال زیر توجه نمایید؛ در این مثال یک page-break را بعد از یک عنصر <footer> وارد کرده ایم.
مثال :
| @media print { footer { break-after: always; } } |
تعریف و کاربرد
ویژگی break-after مشخص می کند که آیا شکست صفحه page break، شکست ستون column break یا شکست ناحیه region break باید بعد از عنصر صورت بپذیرد یا خیر.
break-after ویژگی CSS2 است که شکست صفحه را گسترش می دهد.
| مقدار پیش فرض | auto |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.breakAfter=”always |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی break-after را در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| break-after | ۵۰٫۰ | ۶۵٫۰ | ۳۷٫۰ | ۱۰٫۰ | ۱۰٫۰ |
سینتکس CSS
مثال :
| break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| auto | پیش فرض است – شکست page/column/region به صورت خودکار بعد از عنصر |
| all | همیشه یک page-break را درست بعد از principal box وارد می کند. |
| always | همیشه یک page-break را بعد از عنصر وارد می کند. |
| avoid | از شکست page/column/region بعد از عنصر جلوگیری می کند. |
| avoid-column | از column-break یا شکست ستون بعد از عنصر جلوگیری می کند. |
| avoid-page | از page-break یا شکست صفحه بعد از عنصر جلوگیری می کند. |
| avoid-region | از region-break یا شکست صفحه بعد از عنصر جلوگیری می کند. |
| column | از column-break یا شکست ستون بعد از عنصر جلوگیری می کند. |
| left | بعد از عنصر یک یا دو page-breaks را وارد می کند که سبب می شود صفحه بعدی به عنوان صفحه سمت چپ قالب بندی شود. |
| page | همیشه یک page-break را بعد از عنصر وارد می کند. |
| recto | یک یا دو page-breaks را بعد از principal box وارد می کند که سبب می شود صفحه بعد به عنوان یک صفحه recto قالب بندی شود. |
| region | همیشه یک region-break را بعد از عنصر وارد می کند. |
| right | بعد از عنصر یک یا دو page-breaks را وارد می کند که سبب می شود صفحه بعد به عنوان یک صفحه سمت راست قالب بندی شود. |
| verso | یک یا دو page-breaks را بعد از principal box وارد می کند که سبب می شود صفحه بعد به عنوان یک صفحه verso یا verso page قالب بندی شود. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
وارد کردن یک page-breaks بعد از عنصر با id یا شناسه toc که مخفف (table of content) است.
مثال :
| @media print { #toc { break-after: always; } } |
مثال دو
وارد کردن یک region-breaks بعد از عناصر <ul> در یک ناحیه :
مثال :
| .region ul { break-after: region; } } |
کلام آخر
در این جلسه با آموزش کار با ویژگی break-after در CSS همراه شما بودیم و آموختیم که این ویژگی مشخص می کند که آیا شکست صفحه page break، شکست ستون column break یا شکست ناحیه region break باید بعد از عنصر مشخصی صورت بپذیررد یا خیر.
در جلسه بعدی شما را با ویژگی break-before آشنا خواهیم کرد.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
