آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۱۵) : ستون بندی با CSS Columns – قسمت ۲

css3 attributes

همونطور که اطلاع دارید در جلسه قبل توضیحاتی در مورد CSS Columns دادیم و شما رو با اون آشنا کردیم. در اونجا سه روشی که میتونیم ستون بندی رو تعریف کنیم رو قرار دادیم و در این قسمت میخوایم دیگر ویژگی هایی که میتونین مورد استفاده قرار بدین و استایل ستونها رو تغییر بدین رو بهتون توضیح بدیم.

ویژگی column-gap:

برای قرار دادن یک فاصله و فضای خالی بین ستونها میتونیم از این ویژگی استفاده کنیم. درون بیشتر مرورگرها، مقدار پیش فرض این ویژگی ۱em هست. شما میتونین این مقدار رو بازنویسی کنید و هر مقداری بیشتر یا مساوی با ۰ قرار بدین. برای مثال اگر ۰ قرار بدیم، فاصله بین ستونها از بین میره و ستونها به هم میچسبن. برای مثال کد زیر رو در نظر بگیرید:

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

همونطور که در بالا دیدید مقدار gap رو ۴em قرار دادیم. دموی خروجی بصورت زیر هست:

همونطور که دیدید فاصله بین ستونها بیشتر از قبل شده و زمانی که مرورگر رو تغییر سایز میدین، مرورگر بصورت اتوماتیک عرض ستونها رو طوری تنظیم میکنه که این فاصله بین ستونها همیشه برقرار باشه.

ویژگی column-rule:

برای قرار دادن یک خط عمودی بین همه ستونها میتونیم از این ویژگی استفاده کنیم. این ویژگی خیلی شبیه به ویژگی border هست. این ویژگی یک ویژگی خلاصه نویسی شده برای سه ویژگی زیر هست:

  • column-rule-width : با استفاده از این ویژگی میتونیم ضخامت خط مورد نظر رو مشخص کنیم و میتونه مقادیری مثل px و em و initial و inherit و unset و همچنین مقادیر نامی همچون thin و medium و thick رو براش قرار بدین
  • column-width-style : استایل خط مورد نظر رو مشخص میکنه. میتونه مقادیر none و hidden و dotted و dashed و solid و double و groove و ridge و inset و outset رو بپذیره. هر کدام از این موارد استایل خاصی رو به خط مورد نظر اعمال میکنن. برای مثال اگر مقدار dotted رو قرار بدین، خط بصورت نقطه نقطه قرار داده میشه.
  • column-width-color : رنگ خط مورد نظر رو مشخص میکنه. مقدار مورد نظر میتونه نام یک رنگ مثل green و red باشه و یا اینکه از هر روشی مثل hex و hsl/hsla و rgb/rgba استفاده کنید

برای مثال کد زیر رو در نظر بگیرید:

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}

همونطور که میبینید ضخامت خط رو ۱ پیکسل و رنگ اون رو ddd و همچنین اون رو بصورت نقطه نقطه قرار دادیم. دموی خروجی بصورت زیر میشه:

همونطور که دیدید خط مورد نظر قرار داده شده. اگر مرورگر رو کوچک کنیم تا فقط یک ستون داشته باشیم، خواهیم دید که این خط دیگه وجود نداره و فقط زمانی که ۲ یا تعداد بیشتری ستون وجود داره، این خط رسم میشه.

خب ما موارد اساسی این ویژگی رو براتون بیان کردیم. شما میتونین این لینک رو مشاهده کنید و چیزای بیشتری در مورد اون و کاربردهاش یاد بگیرید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0