جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کار با ستون ها در CSS3

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

17 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
312 بازدید
آموزش صفحه بندی یا Pagination در CSS

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

فهرست عناوین

  • کار با ستون ها یا Columns در CSS3
  • کار با ویژگی Column-Count در CSS3
  • کار با ویژگی Column-Width در CSS3
  • خلاصه نویسی ویژگی Columns در CSS3
  • کار با ویژگی Column-Gap در CSS3
  • کار با ویژگی Column-Span در CSS3
  • کار با ویژگی Column-Fill در CSS3
  • کار با ویژگی Column-Rule-Color در CSS3
  • کار با ویژگی Column-Rule-Style در CSS3
  • کار با ویژگی Column-Rule-Width در CSS3
  • خلاصه نویسی ویژگی Column-Rule در CSS3
  • پشتیبانی مرورگرها از ویژگی های Columns در CSS
  • عدم پشتیبانی مرورگرهای نسخه قدیمی از ویژگی های Columns در CSS

در زبان 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 : برای خلاصه نویسی ۳ ویژگی بالا

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

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

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

این ویژگی یک عدد بعنوان مقدار میپذیرد.

1
2
3
4
5
6
7
8
9
<style>
 
div.newspaper{
 
column-count: 3;
 
}
 
</style>

 

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

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

1
2
3
4
5
6
7
8
9
<style>
 
div.newspaper{
 
column-width: 100px;
 
}
 
</style>

 

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

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

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

1
columns: column-width|column-count;

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

مثال :

1
2
3
4
5
6
7
8
9
<style>
 
div.newspaper{
 
columns: 100px 5;
 
}
 
</style>

 

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

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

1
2
3
4
5
6
7
8
9
10
11
<style>
 
div.newspaper{
 
column-count: 5;
 
column-gap: 40px;
 
}
 
</style>

 

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

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

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

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

1
2
3
4
5
6
7
8
9
style>
 
div.newspaper h3{
 
column-span: all;
 
}
 
</style>

 

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

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

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

  • balance : بصورت پیش فرض این گزینه می باشد
  • auto : تا یک ستون پر نشود نمیگذارد محتوا به ستون بعدی برود
1
2
3
4
5
div.newspaper{
 
column-fill: auto;
 
}

 

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

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

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

1
2
3
4
5
6
7
div.newspaper{
 
column-rule-style: solid;
 
column-rule-color: #5db616;
 
}

 

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

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

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

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

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

1
2
3
4
5
6
7
div.newspaper{
 
column-rule-style: dotted;
 
column-rule-color: #5db616;
 
}

 

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

1
2
3
4
5
6
7
div.newspaper{
 
column-rule-style: double;
 
column-rule-color: #5db616;
 
}

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

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

مثال :

1
2
3
4
5
6
7
8
9
div.newspaper{
 
column-rule-style: double;
 
column-rule-color: #5db616;
 
column-rule-width: 7px;
 
}

 

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

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

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

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

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

1
2
3
4
5
div.newspaper{
 
column-rule: 4px solid #F44336;
 
}

 

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

1
2
3
4
5
div.newspaper{
 
column-rule: 4px solid;
 
}

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

1
2
3
4
5
div.newspaper{
 
column-rule: dotted;
 
}

 

پشتیبانی مرورگرها از ویژگی های 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 ۵۰٫۰ ۵۲٫۰ ۳۷٫۰ ۹٫۰ ۱۰٫۰

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

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

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

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

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

بیشتر بخوانیم:

  • آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4
  • بررسی انواع منو در بوت استرپ 4 به همراه نحوه ساخت
  • نحوه کار با انیمیشن ها یا Animations در CSS3
  • نحوه کامل فلکس باکس یا Flexbox در CSS3
  • آموزش کامل کار با Box Sizing در CSS3

 

اشتراک گذاری:
برچسب ها: ColumnsCSS3Learn how to work with columns in CSS3آموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگاناموزش Columns
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت