٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش CSS طرح – نمایش املاک

این displayویژگی مهمترین ویژگی CSS برای کنترل طرح است. نمایش مشخصات این displayویژگی مشخص می کند که یک عنصر چگونه نمایش داده شود. هر عنصر HTML بسته به نوع عنصری که دارد یک مقدار نمایش پیش فرض دارد. مقدار نمایش پیش فرض برای…

محمد یوسفی

11 جولای 2021

این displayویژگی مهمترین ویژگی CSS برای کنترل طرح است.


نمایش مشخصات

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

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

عناصر سطح بلوک

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

عنصر <div> یک عنصر در سطح بلوک است.

نمونه هایی از عناصر سطح بلوک:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <فوتور>
  • <بخش>

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

یک عنصر درون خطی از یک خط جدید شروع نمی شود و فقط به اندازه لازم عرض را اشغال می کند.

این یک عنصر inline <span> درون یک پاراگراف است.

نمونه هایی از عناصر خطی:

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

نمایش: هیچ؛

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

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


مقدار نمایش پیش فرض را لغو کنید

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

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

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

مثال

li {
  display: inline;
}

توجه: تنظیم ویژگی نمایش یک عنصر فقط نحوه نمایش عنصر را تغییر می دهد ، نه اینکه نوع آن چیست. بنابراین ، یک عنصر درون خطی display: block;مجاز به داشتن سایر عناصر بلوک در داخل آن نیست.

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

مثال

span {
  display: block;
}

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

مثال

a {
  display: block;
}

پنهان کردن یک عنصر – صفحه نمایش: هیچ یا قابل مشاهده بودن: پنهان؟

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

مثال

h1.hidden {
  display: none;
}

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

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

مثال

h1.hidden {
  visibility: hidden;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها