شما اینجا هستید

ویژگی display یکی از مهمترین ویژگیهای CSS برای صفحه آرایی است.

ویژگی display

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

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

عناصر بلاکی

یک عنصر بلاکی همیشه در یک خط جدید آغاز میشود و همه پهنای قابل دسترس را میگیرد. یعنی تا جایی که میتواند به سمت چپ و راست کشیده میشود.

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

برخی از عناصر بلاکی :

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

عناصر درون خطی - inline

عنصر درون خطی در یک خط جدید آغاز نمیشود و فقط پهنایی که نیاز دارد را میگیرد.

این یک عنصر درون خطی <span> در داخل یک پاراگراف هست.

برخی از عناصر درون خطی:

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

;Display: none

با دادن مقدار none به ویژگی display میتوان مشخص کرد که عنصر را نمایش ندهد.

بازنویسی مقدار پیش فرض display برای عناصر

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

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

مثال زیر عنصر <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="http://learn.puyapardaz.ir/content/learn/learning-topics/48" target="_blank">HTML</a></li>

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/49" target="_blank">CSS</a></li>

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/47" target="_blank">مفاهیم اولیه</a></li>

</ul>


</body>

</html>

 

مثال زیر نحوه استفاده از عنصر <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>

 

پنهان کردن عناصر

 

از 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 نیز استفاده کرد. با اینکه عنصر مخفی میشود همچنان ناحیه ای را که در آن قرار داشته به صورت یک فضای خالی نمایش میدهد و روی صفحه آرایی تاثیر دارد.

 

h1.hidden {
    visibility: hidden;
}

 

دیدگاه‌ها

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

از شما و همکاران گرامی کمال تشکر را دارم. امیدوارم همیشه موفق و موید باشید.

تصویر mohammad

با سپاس از نظر لطفی که به ما دارید.
 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.