آموزش سی اس اس CSS

پراپرتی display مهمترین پراپرتی CSS در کنترل لی اوت میباشد.

The display Property

پراپرتی display تعیین میکند که آیا یک المان نمایش داده بشود یا نه. همچنین این پراپرتی مشخص میکند که یک المان به چه صورت نمایش داده شود.

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

مطالعه بیشتر: المان های بلاک (block) و اینلاین (inline) در زبان HTML

Block-level Elements

المان بلاک همواره در خط جدید شروع میشود و تمام سطح موجود را اشغال میکند (تا جایی که امکان دارد به سمت چپ و راست صفحه میرود).

مثال المان های بلاک:

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

Inline Elements

المان اینلاین در خط جدید شروع نمیشود و طول آن به اندازه مورد نیاز است.

این پاراگراف المان span یک المان اینلاین درون خود دارد.

مثال المان های اینلاین:

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

Override The Default Display Value

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

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

یک مثال ساده المان li برای منو افقی میباشد:

 
li {
    display: inline;
}
 

• HTML
• CSS

نکاتی که باید در ذهن داشته باشید

پراپرتی display باعث میشود نحوه نمایش یک المان تغییر کند، و نوع آن المان را تغییر نمیدهد.

در مثال زیر المان a بصورت بلاک نمایش داده شده است:

HTML CSS

Hide an Element - display:none or visibility:hidden?

برای مخفی کردن یک المان میتوان به پراپرتی display مقدار none داد. المان مخفی خواهد شد و صفحه به گونه ای نمایش داده خواهد شد که گویی آن المان وجود ندارد.

visibility:hidden; نیز المان را مخفی میکند.

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

 
h1.hidden {
    display: none;
}
h1.hidden {
    visibility: hidden;
}