چند ستونه کردن متن در 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

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

: نوشته شده توسط امیر پهلوان صادق; بازدید: 21600

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

آموزش صوتی CSS3

مدرس:

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

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی