سبد خرید (0)

تبلیغات

چند ستونه کردن متن در CSS3

چند ستونه کردن متن در CSS3

Wiki

با CSS3، می توانید مانند روزنامه ها که چند ستونه هستند، متن را در صفحه به صورت چند ستونه نمایش دهید.

در این بیاموز، با خاصیت های زیر آشنا می شوید:

  • column-count
  • column-gap
  • column-rule

پشتیبانی مرورگرها از قابلیت چند ستونه کردن متن در CSS3

Wiki

خاصیتپشتیبانی مرورگرها
column-count
column-gap
column-rule

مرورگرهای Internet Explorer 10 و Opera ویژگی چند ستونه را پشتیبانی می کنند.

مرورگر Firefox به پیشوند -moz- نیاز دارد.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.


ایجاد ستون های چندگانه در CSS3

Wiki

خصوصیت column-count تعیین می کند که متن باید به چند قسمت تقسیم شود:

مثال (چند ستونه کردن متن در CSS3)

تقسیم متن به 3 ستون در عنصر <div>:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
خودتان امتحان کنید »

تعیین فاصله بین ستون ها در CSS3

Wiki

با استفاده از خصوصیت column-gap می توانید فاصله بین ستون ها را مشخص نمایید:

مثال (چند ستونه کردن متن در CSS3)

تنظیم 40 پیکسل برای فاصله بین ستون ها:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
خودتان امتحان کنید »

قوانین بین ستون ها در CSS3

Wiki

خصوصیت 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;
}
خودتان امتحان کنید »

خاصیت های ستون های چندگانه در CSS3

Wiki

خاصیتتوضیحات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

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان