صفحه اصلی / آموزش CSS / خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout
آموزش خصوصیت 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 :

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

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

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

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

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

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

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

مثال:

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

 

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

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

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

مثال:

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

 

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

مثال:

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

 

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

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

مثال:

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

 

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

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

مثال:

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

 

 

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

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

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

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