آموزش سی اس اس css

ما در این آموزش به شما روش استفاده از دستور و همچنین به خاصیت دستور multi-column خواهیم پرداخت.

از دستور multi-column میتوانید متون های خود را به چند ستون تبدیل کنید در واقع شما با استفاده از دستور multi-column میتوانید برای بخش هایی که میخواهید در چند ستون نمایش داده بشه استفاده نمایید.

ابتدا به ویژگیهای دستور multi-column در سی اس اس css می پردازیم

ویژگی های دستور multi-column در css سی اس اس

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-width

 دستور column-count مشخص میکند که صفحه به چند ستون تقسیم شود در واقع شما با استفاده از  کد زیر میتوانید صفحات خود را به 3 ستون تقسیم بندی کنید.

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

 دستور column-gap تعیین کننده و امکان فاصله ی بین ستون ها را به شما می دهد

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

از دستور column-rule-style میتوانید به منظور خط کشی بین ستونها استفاده کنید

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

از دستور column-rule-width میتوانید برای تعیین عرض هر کدام از خط کشی ها استفاده نمایید.

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

از دستور column-rule-color میتوانید برای تعیین رنگ خط کشی ها استفاده نمایید

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

از دستور column-rule میتوانید به تنهایی برای ایجاد خط کشی،تعیین رنگ،و عرض هر خط کشی بین ستونها استفاده کرد

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;

}

از دستور column-width میتوانید برای بهینه کردن و همچنین ایجاد و تقسیم بندی ستون های ریسپانسیو استفاده نمایید.

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}

 منبع : طراحی سایت ارزان وب آلفا