| قدم قبلی > | < قدم بعدی |
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> برای منوهای افقی را ببینید:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> li { display: inline; } </style> </head> <body> <p>Display a list of links as a horizontal menu:</p> <ul> <li><a href="/html/default.asp" target="_blank">HTML</a></li> <li><a href="/css/default.asp" target="_blank">CSS</a></li> <li><a href="/js/default.asp" target="_blank">JavaScript</a></li> </ul> </body> </html> |
با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:
دقت داشته باشید که این نوشته به صورت چند لینک در کنار هم است، که هر کدام به صفحه ای ارجاع می دهند.
نکته: تنظیمات صفحه نمایش یک عنصر تنها چگونگی نمایش عنصر را تغییر می‌دهد، نه نوع عنصر آن را. بنابراین، یک عنصر inline با display: block اجازه ندارد عناصر block دیگری درونش داشته باشد.
مثال زیر <span> عناصر را به عنوان عناصر بلوک نمایش می دهد:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | <html> <head> <style> span { display: block; } </style> </head> <body> <span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span> </body> </html> |
با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:
در مثال زیر عنصر <a> به عنوان عنصر بلوک نمایش داده می شود:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> a { display: block; } </style> </head> <body> <p>Display links as block elements:</p> <a href="/html/default.asp" target="_blank">HTML</a> <a href="/css/default.asp" target="_blank">CSS</a> <a href="/js/default.asp" target="_blank">JavaScript</a> </body> </html> |
با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:
پنهان کردن عنصر -display:none یا visibility:hidden
مخفی کردن یک عنصر را می توان با تنظیم خصوصیت display به none انجام داد. عنصر پنهان خواهد شد و صفحه نمایش داده خواهد شد:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <html> <head> <style> h1.hidden { display: none; } </style> </head> <body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the h1 element with display: none; does not take up any space.</p> </body> </html> |
با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:
visibility:hidden; همچنین یک عنصر را پنهان می کند.
با این حال، عنصر همچنان همان فضای قبلی را می گیرد. این عنصر پنهان خواهد شد، اما همچنان روی طرح تاثیر می گذارد:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <html> <head> <style> h1.hidden { visibility: hidden; } </style> </head> <body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the hidden heading still takes up space.</p> </body> </html> |
با اجرا کردن کد بالا در خروجی تصویر زیر را خواهید دید:
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.