صفت column-width در css
صفت column-width در css عرض محتوای ستونی تگ html
در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی column-width در زبان CSS می پردازیم. ویژگی جدید column-width در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
معرفی ویژگی کاربردی column-width در زبان طراحی css
ویژگی column-width می تواند عرض ستون ها را برای محتوای تگ html مورد نظر تعیین کند. استفاده از خصوصیت column-width جهت عرض ستون های محتوای تگ html به خصوص در روزنامه های آنلاین ، مجله های آنلاین ، اشعار آنلاین و … کاربرد بیشتری دارد.
مقادیر صفت column-width در css
صفت کاربردی column-width که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار auto
- مقدار length
- مقدار initial
مقدار auto درون صفت column-width در css
اگر خاصیت column-width را برابر با مقدار auto قرار دهیم، یعنی همان مقدار پیش فرض خاصیت که براساس مرورگر تعیین می گردد، برای آن اعمال می شود. مقدار auto ، مقدار پیش فرض خاصیت column-width می باشد.
مقدار length ( مقدار عددی ) درون صفت column-width در css
اگر خاصیت column-width را برابر با مقدار length ( مقدار عددی ) قرار دهیم، یعنی یک مقدار عددی برای تعیین عرض ستون های تگ html مربوطه تعیین می کنیم.
مقدار length که یک مقدارعددی در خاصیت column-width است، معمولا براساس واحد پیکسل ، واحد درصدی یا واحد em برای تعیین عرض محتوای ستون های تگ html به کار می رود.
مثلا فرض کنید شما یک تگ div بلند دارید و می خواهید محتوای درون این تگ div را در ستون هایی با عرض معین بیاورید. با استفاده از خاصیت column-width قادر به اجرای چنین کاری خواهید بود. برای این منظور ما در مثالی مقدار خاصیت column-width را برابر 400px قرار دادیم.
به مثال زیر توجه کنید:
<div> 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 </div>
در این مثال محتوای تگ div بالا را با استفاده از خصوصیت column-width در زبان css براساس 400px تعریف کردیم.
نکات مهم
همانطور که می بینید از پیشوند -webkit- قبل از نام صفت مورد نظر جهت رندر شدن عملیات این صفت جدید برای مررگرهای گوگل کروم ، سافاری و اپرا استفاده نمودیم.
هچنین از پیشوند -moz- قبل از نام صفت مورد نظر جهت رندر شدن عملیات این صفت جدید برای مرورگر فایرفاکس استفاده کرده ایم.
div {-webkit-column-width: 400px; /* Chrome, Safari, Opera */
-moz-column-width: 400px; /* Firefox */
column-width: 400px;}
خروجی کد در مرورگر اینترنتی
مقدار initial درون صفت column-width در css
اگر خاصیت column-width را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
بررسی خاصیت column-width از نظر نسخه زبان طراحی سی اس اس
خصوصیت column-width در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
بررسی ساختاری صفت column-width در css
عناوین ساختاری خاصیت column-width | وضعیت ساختاری خاصیت column-width |
مقدار پیش فرض | auto |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.columnWidth="100px |
پشتیبانی مرورگرهای اینترنتی از صفت column-width در css
خاصیت css | |||||
column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت column-width در css عرض محتوای ستونی تگ html5 – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید