سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبلی به کار با ویژگی break-after پرداختیم؛ ویژگی break-after مشخص می کند که آیا شکست صفحه page break، شکست ستون column break یا شکست ناحیه region break باید بعد از عنصر صورت بپذیرد یا خیر.
در این جلسه می خواهیم به سراغ آموزش کار با ویژگی break-before در CSS برویم.
آموزش کار با ویژگی break-before در CSS
به مثال زیر توجه نمایید؛ در این مثال یک page-break را قبل از یک عنصر <h1> وارد کرده ایم.
مثال :
| @media print { h1 { break-before: always; } } |
تعریف و کاربرد
ویژگی break-before مشخص می کند که آیا شکست صفحه page break، شکست ستون column break یا شکست ناحیه region break باید قبل از عنصر صورت بپذیرد یا خیر.
break-before ویژگی CSS2 است که شکست صفحه را گسترش می دهد.
نکات و توصیه ها
نکته ها
با استفاده از ویژگی break-before می توانید به مرورگر بگویید که قبل از این که ویژگی break-before اجرا شود صفحه -page-یا ستون -column- یا ناحیه -region- را بشکند و یا از تقسیم عنصر در دو صفحه جلوگیری کند.
| مقدار پیش فرض | auto |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.breakBefore=”always |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی break-before در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| break-before | ۵۰٫۰ | ۶۵٫۰ | ۳۷٫۰ | ۱۰٫۰ | ۱۰٫۰ |
سینتکس CSS
مثال :
| break-before: 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 خود به ارث می برد. |
مثال های بیشتر
مثال یک
برای اطمینان از اینکه تمام فصلهای جدید هنگام چاپ باید در یک صفحه درست (مانند یک کتاب) شروع شوند ، می توانید از break-ago استفاده کنید: برای همه عناصر <h1>:
مثال :
| @media print { h1 { break-before: right; } } |
مثال دو
وارد کردن یک region-break قبل از عناصر <ul> در ناحیه :
مثال :
| .region ul { break-before: region; } } |
کلام آخر
در این جلسه به آموزش کار با ویژگی break-before در CSS پرداختیم و آموختیم که این ویژگی مشخص می کند که آیا شکست صفحه page break، شکست ستون column break یا شکست ناحیه region break باید قبل از عنصر صورت بپذیرد یا خیر.
در جلسه آینده به آموزش ویژگی caption-side خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
