خانه / آموزش CSS / بخش هجدهم- آموزش خصوصیت display در CSS یا CSS Layout
پشتیبان وب سایت وردپرس
خصوصیات display در CSS"

تاریخ بروزرسانی: ۲۷ اسفند ۱۳۹۷ تعداد بازدید : 11 بازدید بدون دیدگاه

بخش هجدهم- آموزش خصوصیت display در CSS یا CSS Layout

قدم قبلی >< قدم بعدی
 صفحه نمایش در CSS
آموزش خصوصیت display در CSS

 

CSS Layout – خصوصیت display در CSS

خصوصیت display در CSS مهمترین ویژگی CSS برای کنترل layout(طرح) است.()

خصوصیت display در CSS

خصوصیت display در CSS مشخص می کند که چگونه یک عنصر نمایش داده شود.

هر عنصر HTML دارای یک مقدار پیش فرض برای display(نمایش) بسته به نوع آن عنصر است. مقدار نمایش پیش فرض برای اکثر عناصر block(بلوک) یا inline(برخط) است.

Block-level Elements (عناصر  سطح بلوک) 

یک عنصر سطح بلوک همیشه در یک خط جدید شروع می‌شود و عرض کامل صفحه را در دسترس قرار می‌دهد، به این معنا که تا آنجا که می‌تواند به سمت چپ و راست کشیده می‌ شود تا تمام عرض صفحه را در بر بگیرد.

عنصر <div> یک عنصر سطح بلوک است.

مثال هایی از عناصر سطح بلوک:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements(عناصر برخط) 

یک عنصر برخط، در خط جدیدی شروع نمی شود و فقط به همان اندازه که لازم است، طول می کشد.

نمونه هایی از عناصر inline :

  • <span>
  • <a>
  • <img>

(نمایش: هیچ؛)Display: none;

خصوصیت display: none; معمولا بوسیله جاوا اسکریپت برای مخفی کردن و نمایش عناصر بدون حذف و بازسازی آنها استفاده می شود. اگر می خواهید بدانید که چگونه می توان این کار را انجام داد، نگاهی به مثال آخر ما در این صفحه داشته باشید.

هر عنصر <script> به صورت پیش فرض از خصوصیت display: none;  استفاده می کند.

نادیده گرفتن ارزش نمایش پیش فرض

همانطور که گفته شد، هر عنصر یک مقدار نمایش پیش فرض دارد. با این حال، شما می توانید این مقدار پیش فرض را نادیده بگیرید.

تغییر یک عنصر داخلی به یک عنصر بلوک، یا بالعکس، می‌تواند برای ساخت صفحه به یک روش خاص مفید باشد، و البته هنوز باید از استانداردهای وب پیروی کنید .

در زیر می توانید یک مثال در مورد ساخت عنصر برخط <li> برای منوهای افقی را ببینید:

مثال:

با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:

 

دقت داشته باشید که این نوشته به صورت چند لینک در کنار هم است، که هر کدام به صفحه ای ارجاع می دهند.

نکته: تنظیمات صفحه نمایش یک عنصر تنها چگونگی نمایش عنصر را تغییر می‌دهد، نه نوع عنصر آن را. بنابراین، یک عنصر inline با display: block اجازه ندارد عناصر block دیگری درونش داشته باشد.

مثال زیر <span> عناصر را به عنوان عناصر بلوک نمایش می دهد:

مثال:

با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:

 

در مثال زیر عنصر <a> به عنوان عنصر بلوک نمایش داده می شود:

مثال:

با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:

 

پنهان کردن عنصر -display:none یا visibility:hidden

مخفی کردن یک عنصر را می توان با تنظیم خصوصیت display به none انجام داد. عنصر پنهان خواهد شد و صفحه نمایش داده خواهد شد:

مثال:

با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:

 

visibility:hidden; همچنین یک عنصر را پنهان می کند.

با این حال، عنصر همچنان همان فضای قبلی را می گیرد. این عنصر پنهان خواهد شد، اما همچنان روی طرح تاثیر می گذارد:

مثال:

با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:

 

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15921


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

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