نمایش display، یکی دیگر از چندین ویژگی هایی است که css در اختیار شما قرار می دهد.
شما میتوانید با این ویژگی مهم، کنترل کاملی روی نحوه نمایش عناصر در صفحه وب سایت داشته باشید.
display به شما اجازه می دهد محل قرار گرفتن عناصر مختلفی که در ادامه توضیح میدهیم را مشخص کنید.
در ادامه آموزش امروز همراه ما باشید.
همه عناصر موجود در صفحات وب سایت، بسته به نوع خود، دارای یک مقدار نمایش پیشفرض هستند.
این مقدار پیشفرص برای اکثر عناصر، بلوک block یا دورن خطیinline است.
معرفی عناصری که دارای مقدار بلوک blockهستند:
عناصر بلوکی همیشه از یک خط جدید شروع می شوند. و تمام عرض موجود را می گیرند. یعنی تا آنجا که می توانند از سمت چپ و راست کشیده می شوند.
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
معرفی عناصری که دارای مقدار دورن خطی inline هستند:
عناصر درون خطی inline، از خط جدید شروع نمی شوند. و فقط تا حد لزوم کشیده می شوند.
- <span>
- <a>
- <img>
خاصیت Display: none;
معمولا جاوا از این ویژگی بهر ه می برد. از این ویژگی برای نمایش دادن یا پنهان کردن عناصر بدون حذف کردن و یا دوباره ایجاد کردن آنها استفاده می شود.
برای مثال عنصیر <script> یکی از عناصری است که مقدارپیشفرض آن none است.
نادیده گرفتن مقدار پیشفرض و اعمال تغییرات
همانطور که بالاتر گفته شد، هر عنصری دارای یک مقدار پیشفرض می باشد. css به شما امکان میدهد که این مقادیر را کنترل کرده و آنها را تغییر دهید.
تغییراتی مثل تبدیل کردن یک عنصر درون خطی inline، به یک عنصر بلوکی block. و بالعکس. و بسیاری تغییرات دیگر.
برای مثال کد زیر ، یک لیست را که در حالت عادی به طور عمودی نمایش داده می شود. به صورت افقی نمایش میدهد:
[php]
li {
display: inline;
}
[/php]
نتیجه را از این لینک مشاهده کنید.
این یعنی یک عنصر درون خطی با ویژگی نمایش: block؛ مجاز به داشتن عناصر بلوک دیگر در داخل آن نیست.
مثال زیر عنصر <span> را به صورت بلوکی نمایش میدهد:
[php]
span {
display: block;
}
[/php]
نتیجه را از اینجا ببینید.[/cdb_icon_box]
پنهان کردن یک المان – display:none یا visibility:hidden ؟
مخفی کردن یک عنصر، با تنظیم دستور display روی none امکان پذیر است. در این حالت عنصر غیر قابل دیدن است، به طوری که انگار المان آنجا نیست!
برای مثال:
[php]
h1.hidden {
display: none;
}
[/php]
نتیجه را از اینجا ببینید.
دستور visibility:hidden; نیز یک عنصر را پنهان می کند.
مثال زیر این دستور را نمایش می دهد:
[php]
h1.hidden {
visibility: hidden;
}
[/php]
نتیجه را از اینجا ببینید.
تمرینات بیشتر و مشاهده تفاوت بین dysplay:none و visibility:hidden
استفداه از css همراه با javascript برای نمایش دادن محتوا