چند ستونه کردن متن در CSS3
چند ستونه کردن متن در CSS3
با CSS3، می توانید مانند روزنامه ها که چند ستونه هستند، متن را در صفحه به صورت چند ستونه نمایش دهید.
در این بیاموز، با خاصیت های زیر آشنا می شوید:
- column-count
- column-gap
- column-rule
پشتیبانی مرورگرها از قابلیت چند ستونه کردن متن در CSS3
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| column-count |  |
 |
 |
 |
 |
| column-gap | |
|
|
|
|
| column-rule | |
|
|
|
|
مرورگرهای Internet Explorer 10 و Opera ویژگی چند ستونه را پشتیبانی می کنند.
مرورگر Firefox به پیشوند -moz- نیاز دارد.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
ایجاد ستون های چندگانه در CSS3
خصوصیت column-count تعیین می کند که متن باید به چند قسمت تقسیم شود:
مثال (چند ستونه کردن متن در CSS3)
تقسیم متن به 3 ستون در عنصر <div>:
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
خودتان امتحان کنید »{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
تعیین فاصله بین ستون ها در CSS3
با استفاده از خصوصیت column-gap می توانید فاصله بین ستون ها را مشخص نمایید:
مثال (چند ستونه کردن متن در CSS3)
تنظیم 40 پیکسل برای فاصله بین ستون ها:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
خودتان امتحان کنید »{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
قوانین بین ستون ها در CSS3
خصوصیت column-rule عرض (width)، سبک (style) و رنگ (color) بین ستون ها را معین می کند.
مثال (چند ستونه کردن متن در CSS3)
مشخص کردن عرض، سبک و رنگ بین ستون ها:
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
خودتان امتحان کنید »{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
خاصیت های ستون های چندگانه در CSS3
| خاصیت | توضیحات | CSS |
|---|---|---|
| column-count | تعداد ستون هایی که یک عنصر باید به آن تقسیم شود. | 3 |
| column-fill | چگونگی پر شدن ستون ها را مشخص می کند. | 3 |
| column-gap | فاصله بین ستون ها را مشخص می کند. | 3 |
| column-rule | یک خصوصیت مختصر برای تنظیم عرض، سبک و رنگ بین ستون ها. | 3 |
| column-rule-color | رنگ بین ستون ها را مشخص می کند. | 3 |
| column-rule-style | سبک یا Style بین ستون ها را مشخص می کند. | 3 |
| column-rule-width | عرض بین ستون ها را مشخص می کند. | 3 |
| column-span | مشخص می کند در میان چه تعداد از ستون های یک عنصر باید محدود شود. (یک ستون یا تمام ستون ها را به خود اختصاص دهد) | 3 |
| column-width | عرض ستون ها را مشخص می کند. | 3 |
| columns | یک خصوصیت مختصر برای تنظیم column-width و column-count | 3 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 22220
