|
آموزش خاصیت Column در css3 تعداد بازدیدvisits : 263
|
|||||||||
ctrain
|
آموزش خاصیت Column در css3
سلام! شاید خیلی ها باشند که فکر میکنند مثلاً در کدنویسی css خیلی ماهر هستند و اگر از آن ها بپرسی کاربرد * و ^ و [] در css چیست ندانند! column هم از آن خاصیت هایی ست که با css3 معرفی شد و هنوز هم خیلی ها از آن اطلاعی ندارند و شاید هم اسمش به گوششان خورده ولی نمیدانند دقیقاً چه کاری انجام میدهد؟ شما اگر به یک روزنامه دقت کرده باشید میبینید که متون آن به صورت ستونی نوشته شده است. خاصیت column کاری میکند که متون شما به حالت ستونی در آید و شما تعداد ستون ها ، فاصله ی ستون ها از هم و رنگ و خط جدا کننده ی این ستون ها را میتوانید مشخص کنید. نودپد یا نرم افزار کدنویسی خود را باز کرده و کد html زیر را در آن بنویسید: کد: <div class="newspaper">EXCLUSION DES DOMMAGES ACCESSOIRES, INDIRECTSET DE CERTAINS AUTRES DOMMAGES. DANS TOUTE LAMESURE PERMISE PAR LE DROIT APPLICABLE, ENAUCUN CAS MICROSOFT OU SES FOURNISSEURS NESERONT RESPONSABLES DES DOMMAGES SPÉCIAUX,ACCESSOIRES, EXEMPLAIRES OU INDIRECTS DEQUELQUE NATURE QUE CE SOIT (Y COMPRISNOTAMMENT, LES DOMMAGES À L'ÉGARD DE LA PERTEDE PROFITS OU DE LA DIVULGATION DERENSEIGNEMENTS CONFIDENTIELS OU AUTRES, DEL'INTERRUPTION DES AFFAIRES, DE BLESSURESCORPORELLES, DE LA VIOLATION DE LA VIEPRIVÉE, DE L'OMISSION DE REMPLIR TOUT DEVOIR,Y COMPRIS D'AGIR DE BONNE FOI OU D'EXERCER UNSOIN RAISONNABLE, DE LA NÉGLIGENCE ET DETOUTE AUTRE PERTE PÉCUNIAIRE OU AUTRE PERTEDE QUELQUE NATURE QUE CE SOIT) DÉCOULANT OUSE RAPPORTANT DE QUELQUE MANIÈRE QUE CE SOITÀ L'UTILISATION DU PRODUIT OU À L'INCAPACITÉDE S'EN SERVIR, À LA PRESTATION DE SERVICESDE SOUTIEN TECHNIQUE OU AUTRES SERVICES OU ÀL'OMISSION D'UNE TELLE PRESTATION , ÀL'INFORMATION, AU LOGICIEL ET À TOUT CONTENUS'Y RAPPORTANT À TRAVERS LE PRODUIT OUAUTREMENT DÉCOULANT DE L'UTILISATION DUPRODUIT OU AUTREMENT AUX TERMES DE TOUTEDISPOSITION DU PRÉSENT CONTRAT OURELATIVEMENT À UNE TELLE DISPOSITION, MÊME ENCAS DE FAUTE, DE DÉLIT CIVIL (Y COMPRIS LANÉGLIGENCE), DE RESPONSABILITÉ STRICTE, DEVIOLATION DE CONTRAT OU DE VIOLATION DEGARANTIE DE MICROSOFT OU DE TOUT FOURNISSEURET MÊME SI MICROSOFT OU TOUT FOURNISSEUR AÉTÉ AVISÉ DE LA POSSIBILITÉ DE TELS DOMMAGES.(این متون از قسمت help ویندوز گرفته شده است!) خب حالا نوبت استایل دهی و آموزش column هاست!: در پایین تگ div تگ style را بنویسید تا برای استایل دهی آماده شویم. استایل زیر را اضافه کنید و ببینید چه اتفاقی رخ خواهد داد: کد: -webkit-column-count: 3;-moz-column-count: 3;column-count: 3;خواهید دید که متون در سه ستون آرایش خواهند شد. خاصیت column-count تعداد ستون ها را مشخص میکند و مقدار آن باید بدون هیچ معیاری (px , pt و یا ...) وارد شود. همچنین پسوندهای moz و webkit به آن اضافه شده است که کد را برای نمایش در مرورگرهای نسبتاً قدیمی فایرفاکس و کروم آماده میکند. لازم به ذکر است که خاصیت column در مرورگر اکسپلورر پشتیبانی نمیشود. حالا کد زیر را هم به استایل ها بیفزایید: کد: -webkit-column-gap: 100px;-moz-column-gap: 100px;column-gap: 100px;چه اتفاقی افتاد؟ همانطور که شاهدید فاصله ی ستون ها از هم را به وسیله ی خاصیت column-gap تعیین میکنید. حالا کد زیر را قرار دهید: کد: -webkit-column-rule: 3px inset #f00;-moz-column-rule: 3px inset #f00;column-rule: 3px inset #f00;با این استایل میتوان خط جدا کننده ی ستون ها از هم را نمایش داد. این خاصیت دارای سه مقدار می باشد که باید به طور منظم پشت سر هم وارد شود تا در مرورگرها به خوبی نمایش داده شود. اولین مقدار آن مشخص کننده ی طول خط جدا کننده است. دومین مقدار که دارای دو مقدار inset و outset می باشد بیرونی یا درونی بودن خط با مشخص و مقدار آخری هم رنگ خط را تعیین میکند. خاصیتی دیگر نیز وجود دارد که چندان کاربردی به نظر نمی آید اما دانستنش خالی از لطف نیست! این خاصیت عرض کلی ستون ها را مشخص میکند. برای مثال کد زیر را به استایل های خود بیفزایید و تغییرات را مشاهده کنید: کد: -webkit-column-width: 200px;-moz-column-width: 200px;column-width: 200px;خواص و مقدارهایی که آموزش داده شد را دستکاری کنید ، پاک کنید و از اول بنویسید تا به خوبی به خاطرتان سپرده شود. این آموزش از جایی کپی نشده بود و توسط من نوشته شده اگر اشتباهی در آموزش دیدید لطفاً اطلاع دهید. |
||||||||
| سه شنبه 24 تیر 1393 - 09:54 |
|
||||||||
smaeal
 
|
پاسخAnswer 1 : آموزش خاصیت Column در css3 مثل همیشه...عالی بود.. 
=================================================== |
||||||||
| سه شنبه 24 تیر 1393 - 10:02 |
|