قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس
خانه / آموزش css / نگاهی متفاوت به Css

نگاهی متفاوت به Css

در این مقاله به یکی از مهمترین مقالات در زمینه 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 ميباشد.تمامي فيلم هاي آموزشي اين سايت توسط استادان کاردان و بسيار با تجربه تهيه شده که تضميني بر کيفيت بالاي تمامي آن ها است.قيمت محصولات نيز کاملا رقابتي بوده و با مقايسه آن با ساير سايت ها ميتوان به خوبي متوجه اين موضوع شد.

درباره ی admin

مطلب پیشنهادی

نکات مهم css

در ادامه مقالات آموزش CSS : شاید تا کنون دو مفهوم inline-block و float را …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس