نحوه استفاده از ستون های CSS3


با افزایش تنوع در اندازه های مانیتور، طراحی بلوک های متنی که تمام عرض صفحه را اشغال می کنند، عملی نیست. راه حل سنتی تقسیم متن به ستون ها به صورت دستی است که بسیار زمان بر است. یا برای تقسیم متن به صورت پویا با جاوا اسکریپت، که به صورت جهانی عمل نمی کند. علاوه بر این، این یک مشکل ارائه است، ما باید بتوانیم آن را با CSS بدون استفاده از سیستم های شبکه یا شناور استایل کنیم؟

CSS3 در واقع راهی را برای شما فراهم می کند تا متن خود را به ستون های مختلف استایل دهید، حتی توانایی تنظیم یک ناودان – فضای بین آن ستون ها – را به شما می دهد، به این ترتیب شما به جای اینکه چارچوب یا سیستم شبکه ای آن ها را تنظیم کند، کنترل کامل دارید. شکاف برای شما.

بهتر از همه، CSS3 به خوبی کاهش می یابد، بنابراین اگر شخصی در Netscape Navigator در حال مرور باشد، سایت شما خراب نمی شود.

 

مرورگر پشتیبانی

توجه به این نکته مهم است که در حالی که همه مرورگرهای فعلی از چند ستون در CSS3 پشتیبانی می‌کنند – بله حتی IE10 – بسیاری از نسخه‌های اخیر – برای مثال IE9 – این کار را نمی‌کنند. حتی اگر پشتیبانی خوب است، باید پیشوندهای مرورگر را برای webkit (-webkit-) و mozilla (-moz-) قرار دهید. نیازی به اضافه کردن -ms- یا -o- برای IE و Opera نیست، زیرا آنها یا به طور کامل از این ویژگی پشتیبانی می کنند یا اصلاً پشتیبانی نمی کنند.

 

خواص

این ویژگی CSS در واقع تعدادی ویژگی به شما می دهد تا کنترل کاملی بر نحوه چاپ محتوای شما در مرورگر به شما بدهد و این ویژگی ها عبارتند از:

  • Column-count: در اینجا تعداد ستون‌هایی را که می‌خواهید روی عنصر اعمال کنید مشخص می‌کنید.
  • عرض ستون: عرض یک ستون. توجه داشته باشید که این مقدار احتمالاً توسط مرورگر تغییر خواهد کرد.
  • شکاف ستون: عرض شکاف بین ستون‌ها.
  • column-rule-width: بخش قانون نوعی حاشیه برای ستون‌های شماست و در اینجا عرض آن حاشیه را مشخص می‌کنید.
  • column-rule-style: همچنین مانند حاشیه، اگر نیاز به تعیین سبک دارید.
  • column-rule-color: اینجا رنگ قانون است.
  • span-column: مقدار موجود در اینجا به مرورگر می‌گوید که می‌خواهید یک عنصر چند ستون را در بر بگیرد، این برای سرفصل‌ها خوب است و مانند colspan و rowspan در جداول کار می‌کند.

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

برای عملی کردن این کار، تنها به دو خط کد نیاز دارید:

/* این یک طرح بندی 3 ستونی با فاصله 20 پیکسل بین هر ستون ایجاد می کند */
.cols3 {
 تعداد ستون: 3;
 شکاف ستون: 20 پیکسل.
}

اگر می‌خواهید یک قاعده برای ستون‌ها نیز اعمال کنید، فقط باید ویژگی‌های اضافی را اضافه کنید:

/* این یک طرح بندی 3 ستونی و یک شکاف 20 پیکسلی بین هر ستون و یک قاعده 1 پیکسلی سیاه ثابت ایجاد می کند */
.cols3 {
تعداد ستون: 3;
شکاف ستون: 20 پیکسل.
ستون-قاعده-عرض: 1px;
ستون-قاعده-سبک: جامد;
column-rule-color: #000;
}

مانند ویژگی حاشیه رایج‌تر، می‌توانید رنگ، سبک و عرض را نیز در یک خط قرار دهید، مانند:

.cols3 {
تعداد ستون: 3;
شکاف ستون: 20 پیکسل.
ستون-قاعده: 1px جامد #000;
}

اگر عنوانی دارید و می‌خواهید آن عنوان همه ستون‌ها را در بر بگیرد، فقط یک خط اضافه کنید:

/*این h1 فضای 3 ستون را اشغال می کند*/
cols3 h1{
ستون-span: همه;
}

 

دمو

شما می توانید این را تقریباً روی هر HTML اعمال کنید، از یک پاراگراف تا چندین

. این یک نسخه نمایشی است:

و در اینجا کد کامل برای ایجاد این اثر وجود دارد:

html lang="en">

 
 نمایش ستون CSS3
 



عدد صحیح یک عدد است

Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultrices vehicula ut id elit. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.

Cras mattis consectetur purus sit amet fermentum. عدد صحیح posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet، conectetur adipiscing elit.

Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Portitor tempus blandit curabitur blandit tempus porttitor.

بدون دیدگاه

دیدگاهتان را بنویسید

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