در این مقاله به یکی از مهمترین مقالات در زمینه CSS می پردازیم.بحث display ها هرچند در CSS کمتر به آن پرداخته شده اما یکی از مهم ترین و پایه ای ترین مطالب در زمینه آموزش CSS محسوب می شود.چرا که قالب بندی ها و طرح بندی ها در CSS بر پایه همین display انجام می شود.پس در این پست انواع display ها را د رcss مورد بررسی قرار می دهیم و سعی میکنیم با انواع مثال ها مطلب را روشن تر کنیم.
مقایسه display ها در CSS
تگ های مختلف،display های پیش فرش متفاتی دارند.به عنوان مثال تگ div در حالت پیش فرض display از نوع block دارد.یا تگ span به صورت پیش فرض display از نوع inline دارد.اما با استفاده از CSS م یتوانی dispaly های پیش فرض را تغییر دهیم.در لیست زیر،عناصری که display آنها در CSS از نوع block است را می بینیم:
در CSS ، اگر display برابر با block ّاشد بدین معناست که تمام سطر را در بر میگیرد.در گذشته در مقالات آموزش جامع CSS نیز به این موضوع پرداخته شد. از عناصر فوق تحت block-level elements یاد می شود و در طرح بندی و قالب بندی کاربرد زیادی دارند.اما نوع دیگری از عناصر در CSS دارای display از نوع inline هستند.عبارتند از:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
در صورتی که بخواهید یکی از عناصر را با استفاده از CSS مخفی نمایید،کافیست display آن را به حالت none تبدیل نمایید.عناصر دارای display معادل none در صفحه هستند اما دیده نمی شوند.در CSS دو روش برای مخفی کردن عناصر وجود دارد،یکی استفاده از displayو یکی استفاده از visibilty،تفاوت اینها چیست؟در CSS اگر display یک عنصر برابر با none باشد عملا مشابه اینست که هیچ وجود خارجی در سایت ندارد و هیچ تاثیری حتی روی عناصر مجاور و قالب هم نمی گذارد اما اگر عنصری دارای visibilty معادل با hidden باشد در این حالت ، وجود خارجی عنصر حفظ می وشد و فقط از چشم کاربر مخفی می ماند اما تاثیر خود را در قالب و بر روی سایر اجزای صفحه حفظ می کند.
- <span>
- <a>
- <img>
جهت مشاهده آموزش وردپرس کلیک کنید.
سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.
هیچ نظری موجود نیست:
ارسال یک نظر