آموزش کار با ستون ها یا Columns در CSS3

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

آموزش کار با ستون ها یا Columns در CSS3

Free-Learn

کار با ستون ها یا Columns در CSS3

در زبان CSS3 ویژگی هایی مرتبط با ستون ها ایجاد شده است که با استفاده از این ویژگی ها میتوان محتوای یک عنصر را به چندین ستون تبدیل کرد.

دقیقا همانند حالت یک روزنامه ، یعنی ما میتوانیم به راحتی توسط این ویژگی ها محتوامون رو بصورت یک روزنامه در یک صفحه وب به نمایش درآوریم.

ویژگی هایی که در CSS3 برای کار با Column ایجاد شده اند به شرح زیر می باشند :

  • Column-Count : برای مشخص کردن تعداد ستون ها
  • Column-Width : برای مشخص کردن اندازه ستون ها
  • Columns : برای خلاصه نویسی ۲ ویژگی بالا
  • Column-Gap : فاصله بین ستون هارو مشخص میکند
  • Column-Span : برای ادغام کردن محتوا بروی ستون ها
  • Column-Fill : نحوه پرشدن ستون هارو مشخص میکنه
  • Column-Rule-Color : تنظیم رنگ خط بین ستون ها
  • Column-Rule-Style : تنظیم استایل خط بین ستون ها
  • Column-Rule-Width : تنظیم اندازه خط بین ستون ها
  • Column-Rule : برای خلاصه نویسی ۳ ویژگی بالا

در ادامه و تا پایان این جلسه میخوام شمارو با تمامی ویژگی های موجود در لیست بالا آشنا کنم، لطفا در ادامه با من همراه باشید.

Free-Learn

کار با ویژگی Column-Count در CSS3

با استفاده از این ویژگی میتوان تعداد ستون های یک عنصر را مشخص کرد، یعنی اگه از این ویژگی درون تگ DIV استفاده کردیم میتوانیم مشخص نماییم که محتوای این تگ به تعداد ۳ ستون نمایش داده شود.

این ویژگی یک عدد بعنوان مقدار میپذیرد. ( مثله ۳ )

امتحان کنید

Free-Learn

کار با ویژگی Column-Width در CSS3

با استفاده از این ویژگی نیز میتوان اندازه ستون ها را به دلخواه مشخص کرد، این ویژگی یک ویژگی انعطاف پذیر می باشد و با توجه به تغییر اندازه مرورگر میتواند نسبت به اندازه مرورگر، اندازه ستون هارو مشخص نماید.

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Columns در CSS3

با استفاده از ویژگی Columns میتوان ۲ ویژگی Column-Width و Column-Count را بصورت خلاصه نویسی ایجاد کرد، منظور از خلاصه نویسی یعنی دیگه لازم نیست ۲ ویژگی Column-Width و Column-Count را بصورت جداگانه نوشت.

شکل کلی برای استفاده از این ویژگی بصورت زیر می باشد :

پس اول باید مقدار ویژگی column-width را بنویسیم و بعدش مقدار ویژگی column-count .

مثال :

امتحان کنید

Free-Learn

کار با ویژگی Column-Gap در CSS3

با استفاده از این ویژگی نیز میتوان یک فاصله یا فضای خالی مشخصی را بین ستون ها ایجاد کرد.

امتحان کنید

Free-Learn

کار با ویژگی Column-Span در CSS3

در ادامه ی آموزش کار با ستون ها یا Columns در CSS3 میخواهیم با ویژگی Column-Span آشنا شویم، فرض میکنیم تگ div را بصورت ستونی (۵ ستونه) تنظیم کردیم، حال یک تگ H3 نیز درون تگ Div وجود دارد ولی من نمیخوام محتوای تگ h2 هم بصورت ستونی نمایش داده شود ، پس اینجاست که میتونیم از ویژگی Column-Span استفاده نماییم.

این ویژگی ۲ مقدار میتونه داشته باشه :

  • none : گزینه ی پیش فرض می باشد
  • all : باعث می شود محتوای یک عنصر ستونی نشود

امتحان کنید

Free-Learn

کار با ویژگی Column-Fill در CSS3

با استفاده از این ویژگی میتوان مشخص کرد که ستون ها به چه صورت پُر ( تکمیل ) شوند، مثلا در این حالت تا یک ستون بطور کامل پُراز محتوا نشود نمیگذارد محتوای اون ستون به ستون بعدی برود.

این ویژگی ۲ مقدار میپذیرد :

  • balance : بصورت پیش فرض این گزینه می باشد
  • auto : تا یک ستون پر نشود نمیگذارد محتوا به ستون بعدی برود

امتحان کنید

Free-Learn

کار با ویژگی Column-Rule-Color در CSS3

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

این وژگی حتما باید در کنار ویژگی Column-Rule-Style مورد استفاده قرار بگیرد.


امتحان کنید

Free-Learn

کار با ویژگی Column-Rule-Style در CSS3

نحوه استفاده از این ویژگی رو در مثال قبلی مشاهده نمودید، با استفاده از این ویژگی میتوان استایل یا شکل شمایل خط بین ستون هارو مشخص کرد.

پیشنهاد میکنم آموزش کار با حاشیه ها یا Border را در CSS مشاهده نمایید.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

مثال : شماره ۱ : استایل dotted

امتحان کنید

مثال شماره ۲ : استایل double

امتحان کنید

Free-Learn

کار با ویژگی Column-Rule-Width در CSS3

این ویژگی هم همانطور که از اسمش مشخصه با استفاده از آن میتوان اندازه ( عرض ) خط بین ستون ها را مشخص کرد.

مثال :

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Column-Rule در CSS3

با استفاده از ویژگی Column-Rule میتوان ۳ ویژگی column-rule-color و column-rule-style و column-rule-width را بصورت خلاصه و در یک خط کد نوشت.

شکل کلی نحوه استفاده از این ویژگی بصورت زیر می باشد :

  • column-rule-width : تنظیم اندازه عرض خط
  • column-rule-style : تنظیم استایل خط (ضروری می باشد)
  • column-rule-color : تنظیم رنگ خط

مثال شماره ۱ : استفاده از هر ۳ ویژگی

امتحان کنید

مثال شماره ۲ : عدم استفاده از column-rule-color

امتحان کنید

مثال شماره ۳ : عدم استفاده از column-rule-width

امتحان کنید

Free-Learn

پشتیبانی مرورگرها از ویژگی های Columns در CSS

در جدول زیر، هر یک از مرورگرهای اینترنتی از نسخه مشخص شده به بعد از این ویژگی ها پشتیبانی میکنند.

نام مرورگر Chrome Firefox Opera Safari IE
column-count ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-gap ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-rule ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-rule-color ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-rule-style ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-rule-width ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-span ۵۰٫۰ پشتیبانی نمیشود ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-width ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰
column-fill ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰

Free-Learn

عدم پشتیبانی مرورگرهای نسخه قدیمی از ویژگی های Columns در CSS

همانطور که در جدول بالا مشاهده نمودید، از نسخه مشخص شده به بعد مرورگرها بخوبی از ویژگی های Columns پشتیبانی میکنند ولی نسخه های قدیمی این مرورگرها قادر به پشتیبانی از این ویژگی ها نمی باشند .

لذا ما باید از یسری پیشوندها که مخصوص هر یک از مرورگرهای اینترنتی می باشد ، جهت رفع این مشکل استفاده نماییم.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی -webkit- -moz- -webkit- -webkit-

Free-Learn

خب دوستان خسته نباشید میگم بهتون ، به پایان جلسه ( آموزش کار با ستون ها یا Columns در CSS3 ) رسیدیم، امیدوارم که مشکلی در این جلسه نداشته باشید، اگه هم مشکلی هست لطفا از بخش پرسش و پاسخ مشکلتان را مطرح نمایید تا بتونم پاسخ بدم.

دریافت PDF یا پرینت این مطلب