مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم. به آموزش چگونگی تقسیم بندی عناصر html به چند ستون در css ، می پردازیم. با استفاده از این قابلیت در css ، شما می توانید برای یک عنصر html چندین ستون با اندازه های یکسان ایجاد کرده و در هر قسمت محتوای جداگانه ای قرار دهید. می توانید مرزهای ستون ها را مشخص کرده و در هر ستون محتویات متنی همانند ساختار روزنامه ها قرار دهید.
در آموزشهای قبلی حوزه ی css ، مباحث مهم و کاربردی در مورد افکت گذاری و کار با جلوه های ویژه تحت عناوین کار با افکت های سایه در css ، کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css را ارائه کردیم.
در ادامه ی آموزشهای css، در این بخش ما به موضوع آموزش تقسیم بندی عناصر html به چند ستون در css ، می پردازیم.
تقسیم بندی عناصر html به چند ستون در css
تقسیم بندی عناصر html به چند ستون در css
ویژگی multi-column در css به شما اجازه ایجاد ستون های جداگانه و برابر را در یک عنصر html می دهد. شما می توانید از این ویژگی در جاهای بسیاری نظیر نوشتن مقاله علمی یا روزنامه در صفحه وب خود استفاده کنید.
پشتیبانی در مرورگرها
| roperty | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|
| column-count | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit-
۱۱٫۱ |
| column-gap | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit-
۱۱٫۱ |
| column-rule | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit-
۱۱٫۱ |
| column-rule-color | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit
۱۱٫۱ |
| column-rule-style | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit
۱۱٫۱ |
| column-rule-width | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit
۱۱٫۱ |
| column-span | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | Not supported | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit
۱۱٫۱ |
| column-width | ۵۰٫۰
۴٫۰ -webkit- | ۱۰٫۰ | ۵۲٫۰
۲٫۰ -moz- | ۹٫۰
۳٫۱ -webkit- | ۳۷٫۰
۱۵٫۰ -webkit
۱۱٫۱ |
خصوصیات چند ستونی در css
خصوصیاتی که در این پست، ارائه گردیده است به شرح زیر است:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-width
ایجاد ستون های چندگانه
با استفاده از ویژگی column-count میتوانید به تعدادی که تعیین می کنید در عناصر html ستون ایجاد کنید.
مثال:
ایجاد فضای خالی بین ستون ها
از ویژگی column-gap می توانید برای ایجاد فضای خالی (Gap) در بین ستون ها استفاده کنید.
مثال:
ایجاد خط و مرز بین ستون ها
از ویژگی column-rule-style می توانید. برای ایجاد خطوط برای مشخص کردن مرز بین ستون ها استفاده کنید.
مثال:
مثال ۲: با ویژگی column-rule-width نیز می توانید خط مرزی بین ستون ها را ضخیم تر کنید:
مثال ۳- از ویژگی column-rule-color نیز برای تغییر دادن رنگ مرز بین ستون ها استفاده کنید.
کوتاه کردن کدهای فوق :
مشخص کرن تعداد ستون هایی که می توانند در یک عنصر نمایش داده شوند
با استفاده از ویژگی column-span می توانید تعداد ستون های قابل نمایش در طول یک عنصر را مشخص کنید:
عرض ستون ها
از ویژگی column-width می توانید، برای تعیین عرض ستون ها استفاده کنید:
خصوصیات multi-column در CSS
تمام خصوصیات multi-column در CSS:
| خصوصیت | توضیحات |
|---|
| column-count | تعداد ستون ها را مشخص می کند و عنصر باید به آن تقسیم شود. |
| column-fill | مشخص می کند که چگونه ستون ها را پر کنید. |
| column-gap | فاصله بین ستون ها را مشخص می کند. |
| column-rule | تمام خصوصیات دیگر در این خصوصیت خلاصه می شود. |
| column-rule-color | رنگ مرز بین ستون ها را مشخص می کند. |
| column-rule-style | Style مرز بین ستون ها را مشخص می کند. |
| column-rule-width | عرض قاعده بین ستون ها را مشخص می کند. |
| column-span | مشخص می کند که چند ستون عنصر باید در آن قرار داشته باشد. |
| column-width | عرض پیشنهاد شده برای ستون ها را مشخص می کند. |
| columns | در این خصوصیت می توان ویژگی های column-width و column-count را مشخص کرد. |
کلام آخر
همانطور که در جلسات پیشین نیز اشاره کردیم متن ها و نوشته ها از مهم ترین و اصلی ترین بخش های هر وب سایت و محتوای داخل آن محسوب می شود، از این رو style آن ها نیز بسیار مهم است، ویژگی multi-column در CSS نیز برای تقسیم بندی عناصر html به چند ستون در css کاربرد زیادی دارد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
