Va axborot texnologiyalari 10-sinf toshkent – 2021

,..

), paragraflar (p), 
ro‘yxatlar (

,
• ), rasmlar (), umumiy qilib aytganda, blokli model ko‘rinishidagi 
  barcha elementlar ishlatiladi. 
  Bloklar 
  blok darajasidagi blok
  va
   qatorli blok
  turlariga bo‘linadi. 
  Blok darajasidagi bloklar brauzerga alohida qatorlarda chiqariladi, boshqa elementlar esa ular 
  atrofiga joylashadi:

  , 
  ,

  ,
  • 
    Qatorli bloklar brauzerga yonma-yon bitta qatorda chiqariladi: , ,
    Blokni boshqa bir blok ichiga ham joylashtirish mumkin.
    Har bir blok matn, rasm kabi tashkil etuvchilardan iborat bo‘ladi. Blokning bu qismi 
    kontent 
    deb yuritiladi. Misol uchun 
    p
    tegi uchun kontent matn hisoblanadi. Agar matn blok ichiga 
    sig‘masa, u holda matn davomi blok tashqarisida yozilaveradi. 
    

    ---

    
    219
    BLOKNING KENGLIGI VA BALANDLIGINI CHEKLASH
    Ayrim sahifa dizaynlari foydalanuvchi ekranining o‘lchamiga mos ravishda kengayadi yoki 
    qisqaradi. Bunday dizaynlarda blokning kengligi va balandligini cheklash kerak bо‘ladi: 
    • 
    min-width
    xususiyati – brauzer oynasi tor bo‘lganda ko‘rsatilishi mumkin bo‘lgan eng 
    kichik kenglik о‘lchami; 
    • 
    max-width
    xususiyati – brauzer oynasi keng bo‘lganda blokning kengayishi mumkin 
    bo‘lgan eng katta kenglik о‘lchami; 
    • 
    min-height 
    xususiyati – eng kichik balandlik о‘lchami; 
    • 
    max-height
    xususiyati – eng katta balandlik о‘lchami. 
    Bu xususiyatlar blokning eng katta va eng kichik о‘lchamlarini aniqlab beradi. Shuning uchun 
    о‘lchamlar faqat shu oraliqqa tushishi kerak. Masalan, max-height=80px ga teng, agar blokka 
    height uchun 400px berilsa, ushbu о‘lchov ishlamaydi.
    div.
    box
    {
    height
    : 
    400px
    ;
    width
    : 
    500px
    ;
    background-color
    : 
    green
    ;
    min-height
    :
    300px
    ;}
    p {
    height
    : 
    80%
    ; 
    /* 160px*/
    width
    : 
    80%
    ; 
    /*240px*/
    background-color
    : 
    lightgreen
    ;
    min-height
    : 
    50px;
    max-height
    : 
    80px;
    }
    NATIJA
    CSS — bu stillar bilan ishlay oladigan kaskadli 
    stillar majmuasi.
    CSS Veb - sahifalarga har xil 
    stillar berish uchun ishlatiladi va HTML - hujjat 
    ichida teglar bilan birga foydalaniladi.
    CSS
    class
    ="
    box
    ">
    CSS – stillar bilan ishlay oluvchi kaskadli stillar majmuasi. CSS veb-
    sahifalarga har xil stillar berish uchun ishlatiladi va HTML-hujjat ichida teglar bilan 
    birga foydalaniladi.