گروه مقاله : CSS3
تاريخ انتشار : 1394/03/06 - 10:51
كد :604
با CSS3، می توانید مانند روزنامه ها که چند ستونه هستند، متن را در صفحه به صورت چند ستونه نمایش دهید.
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
column-count |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit-
11.1 |
|
column-gap |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit-
11.1 |
|
column-rule |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit-
11.1 |
|
column-rule-color |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit
11.1 |
|
column-rule-style |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit
11.1 |
|
column-rule-width |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit
11.1 |
|
column-width |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit
11.1
|
مرورگرهای Internet Explorer 10 و Opera ویژگی چند ستونه را پشتیبانی می کنند.
مرورگر Firefox به پیشوند -moz- نیاز دارد.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
نکته: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
در این فصل با خاصیت های زیر آشنا خواهید شد:
-
column-count
-
column-gap
-
column-rule-style
-
column-rule-width
-
column-rule-color
-
column-rule
-
column-span
-
column-width
ایجاد ستون های چندگانه در CSS3
خاصیت column-count تعیین می کند که متن باید به چند قسمت تقسیم شود:
در مثال زیر متن در عنصر <div> به سه قسمت تقسیم می شود:
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
تعیین فاصله بین ستون ها در CSS3
خصوصیت column-gap فاصله بین ستون ها را مشخص می کند.
مثال زیر یک فاصله 40 پیکسلی بین ستون ها ایجاد می کند :
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
قوانین بین ستون ها در CSS3
خصوصیت column-rule-style، سبک (Style) بین ستون ها را تعیین می کند:
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
خصوصیت column-rule-width، عرض (width) بین ستون ها را تعیین می کند:
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
خصوصیت column-rule-color، ، رنگ (color) بین ستون ها را تعیین می کند:
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
با استفاده از خاصیت column-rule، می توان تمام خصوصیات بالا (width، style و color) را در یک مرحله تنظیم کرد:
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #54e01d;
}
خاصیت های ستون های چندگانه در CSS3
|
خاصیت |
توضیحات |
|
column-count |
تعداد ستون هایی که یک عنصر باید به آن تقسیم شود |
|
column-fill |
چگونگی پر شدن ستون ها را مشخص می کند |
|
column-gap |
فاصله بین ستون ها را مشخص می کند |
|
column-rule |
یک خصوصیت مختصر برای تنظیم عرض، سبک و رنگ بین ستون ها |
|
column-rule-color |
رنگ بین ستون ها را مشخص می کند |
|
column-rule-style |
بین ستون ها را مشخص می کند style سبک یا |
|
column-rule-width |
عرض بین ستون ها را مشخص می کند |
|
column-span |
مشخص می کند یک عنصر در میان چه تعداد از ستون های باید محدود شود. یک ستون یا تمام ستون ها را به خود اختصاص دهد |
|
column-width |
عرض ستون ها را مشخص می کند |
|
columns |
column-count و column-width یک خصوصیت مختصر برای تنظیم |