از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
روش استفاده از ستون های CSS3
با افزایش تنوع در اندازه های مانیتور، طراحی تک بلوک های متنی که کل عرض صفحه را اشغال می کنند، عملی نیست. راه حل سنتی تقسیم متن به ستون ها به صورت دستی است که بسیار زمان بر است. یا برای تقسیم متن به صورت پویا با جاوا اسکریپت، که به صورت جهانی عمل نمی کند. علاوه بر این، این یک موضوع ارائه است، ما باید بتوانیم آن را با CSS بدون استفاده از سیستم های گرید یا شناور استایل کنیم، اینطور نیست؟
CSS3 در واقع راهی را برای شما فراهم می کند تا متن خود را به ستون های مختلف استایل دهید، حتی توانایی تنظیم یک ناودان – فضای بین آن ستون ها – را به شما می دهد به این ترتیب به جای اینکه چارچوب یا سیستم شبکه ای این شکاف ها را برای شما تنظیم کند، کنترل کامل دارید. .
بهتر از همه، CSS3 به خوبی کاهش می یابد، بنابراین اگر شخصی در Netscape Navigator در حال مرور باشد، سایت شما خراب نمی شود.
پشتیبانی مرورگر
توجه به این نکته مهم است که در حالی که همه مرورگرهای فعلی از چند ستون در CSS3 پشتیبانی می کنند – بله حتی IE10 – بسیاری از نسخه های اخیر – برای مثال IE9 – از این پشتیبانی نمی کنند. حتی اگر پشتیبانی خوب است، باید پیشوندهای مرورگر را برای webkit (-webkit-) و mozilla (-moz-) قرار دهید. نیازی به اضافه کردن -ms- یا -o- برای IE و Opera نیست، زیرا آنها یا به طور کامل از این ویژگی پشتیبانی می کنند یا اصلاً پشتیبانی نمی کنند.
خصوصیات
این ویژگی CSS در واقع تعدادی ویژگی به شما می دهد تا کنترل کاملی بر روش چاپ محتوای شما در مرورگر به شما بدهد و این ویژگی ها عبارتند از:
- تعداد ستون: در اینجا تعداد ستون هایی را که می خواهید روی عنصر اعمال کنید مشخص می کنید.
- عرض ستون: عرض یک ستون توجه داشته باشید که این مقدار احتمالاً توسط مرورگر تغییر خواهد کرد.
- شکاف ستون: عرض شکاف بین ستون ها
- ستون-قاعده-عرض: بخش قانون نوعی حاشیه برای ستون های شماست و در اینجا عرض آن حاشیه را مشخص می کنید.
- ستون-قاعده-سبک: اگر نیاز به تعیین سبک دارید، حاشیه را نیز دوست دارید.
- ستون-قاعده-رنگ: اینجا رنگ قانون است.
- دهانه ستون: مقدار در اینجا به مرورگر می‌گوید که می‌خواهید یک عنصر چند ستون را باز کند، این برای سرفصل‌ها خوب است و مانند colspan و rowspan در جداول کار می‌کند.
با تمام این ویژگی‌ها، فکر نمی‌کنم ما واقعاً به چیز دیگری برای کنترل کامل بر ستون‌هایمان نیاز داشته باشیم. البته همه این ویژگی‌ها برای کارکرد طرح‌بندی چند ستونی ضروری نیستند، در واقع فقط تعداد ستون‌ها لازم است، اما همیشه باید از فاصله ستون استفاده کنید تا فضای کمی به متن بدهید و همه ستون‌ها را نداشته باشید. روی بالای یکدیگر
برای عملی کردن این موضوع فقط دو خط کد لازم است:
/* This will produce a 3 column layout with a gap of 20px between each column */
.cols3 {
column-count: 3;
column-gap: 20px;
}
اگر می خواهید یک قاعده برای ستون ها نیز اعمال کنید، فقط باید ویژگی های اضافی را اضافه کنید:
/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
مانند ویژگی مرزی رایج‌تر، می‌توانید رنگ، سبک و عرض را نیز در یک خط قرار دهید، مانند:
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
اگر عنوانی دارید و می‌خواهید آن عنوان همه ستون‌ها را در بر بگیرد، فقط یک خط اضافه کنید:
/*This h1 will take up the space of the 3 columns*/
.cols3 h1{
column-span: all;
}
نسخه ی نمایشی
شما می توانید این را تقریباً روی هر HTML اعمال کنید، از یک پاراگراف تا چندین
. در اینجا یک نسخه نمایشی است:
و در اینجا کد کامل برای ایجاد این اثر وجود دارد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 column demo</title>
<style type="text/css">
.cols3 {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
.cols3 h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
</style>
</head>
<body>
<div class="cols3">
<h1>Integer posuere erat a ante</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies 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.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer 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, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus 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.</p>
<p>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. Curabitur blandit tempus porttitor.</p>
</div>
</body>
</html>
نتیجه
به نظر من پرش به ستون‌های CSS مزایای زیادی دارد، نیازی به استفاده از ریاضیات، شناورها یا شکستن محتوا در هنگام تغییر اندازه مرورگر توسط کاربر نیست. همچنین می‌توانید کد خود را به شکل معنایی‌تری بنویسید و از آنجایی که آنها توسط تمام مرورگرهای اصلی پشتیبانی می‌شوند، باید از هم اکنون از ستون‌ها استفاده کنید. روی.
آیا ستون‌ها را با CSS3 استایل می‌دهید یا به شناورها و موقعیت‌یابی می‌پیوندید؟ چه نکاتی برای مدیریت مرورگرهای قدیمی دارید؟ در نظرات به ما اطلاع دهید.
تصویر/تصویر کوچک ویژه، تصویر ستون ها از طریق Shutterstock.
(برچسب‌ها برای ترجمه) amet
منتشر شده در 1403-01-26 05:21:02
منبع نوشتار
