این آموزش در تاریخ ۱۴۰۰/۱۰/۲۹ آپدیت شده است.
آموزش ویژگی columns در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی columns در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی columns در CSS
با استفاده از ویژگی columns میتوان ویژگی های زیر را بصورت خلاصه نوشت، در واقع از این ویژگی برای خلاصه نویسی ویژگی های زیر استفاده میشود :
با استفاده از ویژگی column-count میتوان مشخص کرد که محتوای یک عنصر به چه تعداد ستون تقسیم شود و با استفاده از ویژگی column-width میتوان اندازه عرض هر یک از ستون ها را مشخص کرد.
به تنهایی نیز میتوان از ویژگی column-width استفاده کرد، و باعث میشه ستون ها بصورت خودکار و با توجه به اندازه صفحه نمایش تغییر اندازه بدهند و این یعنی واکنش گرایی.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی columns را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : مشخص کردن هم اندازه و هم تعداد ستون ها
|
1 2 3 4 5 6 7 |
<style> .MyBox { columns: 150px 4; } </style> |
مثال شماره ۲ : مشخص کردن فقط اندازه ستون ها ( تعداد ستون ها دیگه بصورت خودکار خودشون مشخص میشن )
|
1 2 3 4 5 6 7 |
<style> .MyBox { columns: 150px; } </style> |
Free-Learn
جدول مشخصات ویژگی columns در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.columns=”100px 4″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی columns در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| columns | ۵۰ | ۵۲ | ۱۱٫۵ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
columns: auto|column-width column-count|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی columns در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض مرورگرها بصورت خودکار اندازه عرض و تعداد ستون ها را مشخص میکنند |
| column-width | مشخص کردن اندازه عرض ستون ها ( آموزش واحدهای اندازه گیری ) |
| column-count | مشخص کردن تعداد ستون ها با استفاده از عدد ( مثله ۳ ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- همانطور که در مثال شماره ۲ مشاهده مینمایید، میتوان به تنهایی از ویژگی column-width برای مشخص کردن اندازه عرض ستون های متن استفاده کرد. ( تعداد ستون ها بصورت خودکار توسط مرورگرها مشخص میشود )
