تبلیغات متنی و بنر

آموزش CSS 3 -چیدمان متن به صورت روزنامه در چند ستون
خاصیت columns

خاصیت columns :

به وسیله خاصیت columns در CSS 3 ، می توانید متن یک پاراگراف را به صورت روزنامه وار ، در چند ستون قرار دهید .
خاصیت columns این امکان را به طراح وب می دهد که بدون طراحی یک جدول یا کد نویسی خاص ، فقط با یک کد ساده CSS ، متن مورد نظر خود را در چندین ستون به کاربر نمایش دهد .
شکل کلی استفاده و ساختار دستوری خاصیت columns به صورت زیر است :

Syntax columns : column-width   column-count ;
مثال : columns: 100px 3 ;

نکته مهم : خاصیت columns مخفف و ساده شده 2 خاصیت زیر است :

  1. column-width
  2. column-count

شما می توانید این 2 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه دو مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید .

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر میزان عرض و پهنای هر ستون را در چیدمان متن تعیین می کند . واحد این پارامتر معمولا px قرار داده می شود .
تعیین این پارامتر اجباری است . 		column-width
این پارامتر تعیین کننده تعداد ستون های متن است . برای مثال اگر مقدار آن 3 در نظر گرفته شود ، متن در 3 ستون جدا نمایش داده می شود . column-count

در مثال های عملی در انتهای صفحه ، کاربرد خاصیت columns را به صورت عملی به شما نمایش داده ایم .

پشتیانی در مرورگر های مختلف :

متاسفانه این خاصیت در مرورگر  IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر  به جز اپرا  به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :

کد لازم برای پشتیانی نوع مرورگر
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-columns- بنویسید .
این خاصیت به صورت عادی و بدون نیاز به تغییر در کد پشتیانی می شود .
این خاصیت پشتیانی نمی شود .
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-columns- بنویسید .

چند مثال از کاربرد خاصیت columns :

در مثال زیر یک پاراگراف داریم که با وسیله خاصیت columns متن را در دو حالت متفاوت با تعداد ستون ها و عرض های مختلف به کاربر نمایش داه ایم . به کدها و مقدار های در نظر گرفته شده برای هر مثال دقت نمایید :

مثال 1 - چیدمان نوشته در 3 ستون و عرض هر ستون 100px
    < style >
      p
        {
          columns : 100px 3 ;
          -moz-columns: 100px 3 ;    /* Firefox */
          -webkit-columns: 100px 3 ;    /* Chrome */
        }
    < /style > 		کد

در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید .

خروجی

مثال 2 - چیدمان نوشته در 2 ستون و عرض هر ستون 150
    < style >
      p
        {
          columns : 150px 2 ;
          -moz-columns: 150px 2 ;    /* Firefox */
          -webkit-columns: 150px 2 ;    /* Chrome */
        }
    < /style > 		کد

در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید .

خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟