گروه مقاله : 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 یک خصوصیت مختصر برای تنظیم
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*