صفت column-width در css | عرض محتوای ستونی تگ html

در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی column-width در زبان CSS می پردازیم.

ویژگی جدید column-width در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

صفت column-width در css | عرض محتوای ستونی تگ html | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

معرفی ویژگی کاربردی column-width در زبان طراحی css

ویژگی column-width می تواند عرض ستون ها را برای محتوای تگ html مورد نظر تعیین کند.

استفاده از خصوصیت column-width جهت عرض ستون های محتوای تگ html به خصوص در روزنامه های آنلاین ، مجله های آنلاین ، اشعار آنلاین و … کاربرد بیشتری دارد.

مقادیر صفت کاربردی column-width در زبان طراحی سی اس اس

صفت کاربردی column-width که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

  1. مقدار auto
  2. مقدار length
  3. مقدار initial

مقدار auto درون خاصیت column-width در زبان سی اس اس

اگر خاصیت column-width را برابر با مقدار auto قرار دهیم، یعنی همان مقدار پیش فرض خاصیت که براساس مرورگر تعیین می گردد، برای آن اعمال می شود.

مقدار auto ، مقدار پیش فرض خاصیت column-width می باشد.

مقدار length ( مقدار عددی ) درون خاصیت column-width در زبان سی اس اس

اگر خاصیت column-width را برابر با مقدار length ( مقدار عددی ) قرار دهیم، یعنی یک مقدار عددی برای تعیین عرض ستون های تگ html مربوطه تعیین می کنیم.

مقدار length که یک مقدارعددی در خاصیت column-width است، معمولا براساس واحد پیکسل ، واحد درصدی یا واحد em برای تعیین عرض محتوای ستون های تگ html به کار می رود.

مثلا فرض کنید شما یک تگ div بلند دارید و می خواهید محتوای درون این تگ div را در ستون هایی با عرض معین بیاورید.

با استفاده از خاصیت column-width قادر به اجرای چنین کاری خواهید بود.

برای این منظور ما در مثالی مقدار خاصیت column-width را برابر 400px قرار دادیم.

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

در این مثال محتوای تگ div بالا را با استفاده از خصوصیت column-width در زبان css براساس 400px تعریف کردیم.

نکات مهم

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

هچنین از پیشوند -moz- قبل از نام صفت مورد نظر جهت رندر شدن عملیات این صفت جدید برای مرورگر فایرفاکس استفاده کرده ایم.

خروجی کد در مرورگر اینترنتی

The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element / The column-count property defines the number of columns an element

مقدار initial درون خاصیت column-width در زبان سی اس اس

اگر خاصیت column-width را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

صفت column-width در css | عرض محتوای ستونی تگ html

بررسی خاصیت column-width از نظر نسخه زبان طراحی سی اس اس

خصوصیت column-width در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

بررسی ساختاری خصوصیت column-width

پشتیبانی مرورگرهای اینترنتی از خاصیت column-width در زبان طراحی سی اس اس