CSSda joylashtirish tartibi – Display atributi

CSSda joylashtirish tartibi – Display atributi


display atributi CSS da elementlarni joylashtirish tartibida eng muhim rol o'ynaydigan atributlardan biri hisoblanadi.

Display() atributi

display atributi elementlarni ekranga qay tarzda chiqarish kerakligini ifodalaydi.

Har bir HTML elementi uning qanaqa turdagi elementligiga qarab o'zining odatdagi, o'zgarishsiz ekranda chiqadigan ko'rinishiga ega. block yoki inline (bir qatorli) elementlarning aksariyat qismi odatdagidek, o'zgarishsiz ekranda namoyon bo'ladi.


Block-level elementlar

Block-level (blokli) elementlari har doim yangi qatordan boshlanib, qatorning butun bor kengligini qamrab oladi.

<div> elementi ham block-level elementi hisoblanadi. Bundan tashqari, block-level elementining quyidagi elementlari ham mavjud:

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

Inline (bir qatorli) elementlar

Inline elementlar yangi qatordan boshlanmaydi va qancha kerak bo'lsa shuncha joy oladi.

Inline elementlarga quyidagilar kiradi:

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

Display: none;

display: none; kodi odatda JavaScript dasturlash tilida elementlarni o'chirish yoki qayta yaratish o'rniga ko'rinmas yoki ko'rinadigan qilib qo'yish uchun kerak bo'ladi.

<script> elementi display: none; atributini o'zining odatiy ko'rinishi kabi o'zida saqlaydi.


Odatiy ko'rinishni e’tibordan chetda qoldirish

Avval ham ta’kidlab o'tganimizdek, har bir element uning qanaqa turdagi elementligiga qarab o'zining odatdagi, o'zgarishsiz ekranda chiqadigan ko'rinishiga ega. Lekin biz bu odatiy ko'rinishni e’tobirdan chetda qoldirishimiz ham mumkin.

Inline (bir qatorli) elementni block elementga yoki aksincha o'zgartirib qo'llash veb-sahifani o'zgacha bir ko'rinishga olib kelishi mumkin, albatta veb-sahifa yaratish me’zonlariga amal qilgan holda.

Quyida keltirilgan namunada <li> inline (bir qatorli) elementining gorizontal menyular uchun qo'llanilganini ko'rishimiz mumkin.

Namuna:

O'zingni Sinab Ko'r
 li {
   display: inline;
   }

...    Eslatma: elementga display atributini berganimizda, bu qaysi turdagi element ekranga chiqishi kerakligini emas, balkim element ekranga qanday ko'rinishda chiqishi kerakligini aniqlaydi. Shunday qilib, inline (bir qatorli) element display: block; atributi bilan birga o'zining tarkibida boshqa blok elementlarini saqlay olmaydi.


Quyida keltirilgan namunada <span> elementining block elementlari kabi ifodalanganini ko'rishimiz mumkin.

Namuna:

O'zingni Sinab Ko'r
 span {
   display: block;
   }

Elementni ko'rinmas qilib qo'yish – display:none yoki visibility:hidden

Elementni ko'rinmas qilib qo'yish uchun display atributiga none (hech narsa) qiymati beriladi. Bunda element mutlaqo ko'rinmas bo'lib qoladi.

Namuna:

O'zingni Sinab Ko'r
 h1.hidden {
   display: none;
   }

visibility:hidden; ham elementni ko'rinmas qilib qo'yadi. Ammo element ko'rinmasada, u veb-sahifada joy egallab turadi. Element ko'rinmaydi, lekin joylashuv tartibiga ta'sir etmay qolmaydi ham.

Namuna:

O'zingni Sinab Ko'r
 h1.hidden {
   display: hidden;
   }

CSS diplay/visibility atributlari

Atributlar Tavsifi
display Element qanday ko'rinishda chiqishi kerakligni aniqlaydi
visibility Element ko'rinmas yoki ko'rinadigan holda bo'lishi kerakligini aniqlaydi

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017