6. Bloklar 1

Содержание

Слайд 2

Element "quti"si (element box)

QODIRBEK MAXAROV

Element "quti"si (element box) QODIRBEK MAXAROV

Слайд 3

O'lchamlar

width – element kengligi
Qiymatlari: uzunlik| foiz | auto
height – element uzunligi
Qiymatlari:

O'lchamlar width – element kengligi Qiymatlari: uzunlik| foiz | auto height –
uzunlik | foiz | auto
max-height, max-width,
min-height, min-width – element uzunligi
Qiymatlari: uzunlik | foiz | auto
box-sizing – quti o'lchami
Qiymatlari: content-box | border-box

QODIRBEK MAXAROV

Слайд 4

O'lchamlar (content-box model)

p {
    background: #f2f5d5;
    width: 500px;
    height: 150px;
    padding: 20px;
    border: 5px solid gray;
    margin: 20px;
}

QODIRBEK MAXAROV

Quti elementning ko'rinadigan kengligi =
5px + 20px +

O'lchamlar (content-box model) p { background: #f2f5d5; width: 500px; height: 150px; padding:

500px content width +
20px + 5px = 550px
Quti elementning to'liq kengligi =
20px + 5px + 20px +
500px content width +
20px + 5px + 20px = 590px

Слайд 5

O'lchamlar (border-box model)

p {
    background: #f2f5d5;
    width: 500px;
    height: 150px;
    padding: 20px;
    border: 5px solid gray;
    margin: 20px;
    box-sizing: border-box;
}

QODIRBEK MAXAROV

Quti elementning ko'rinadigan kengligi =
5px + 20px +

O'lchamlar (border-box model) p { background: #f2f5d5; width: 500px; height: 150px; padding:

450px content width +
20px + 5px = 500px
Quti elementning to'liq kengligi =
20px + 5px + 20px +
450px content width +
20px + 5px + 20px = 540px

Слайд 6

O'lchamlar

QODIRBEK MAXAROV

O'lchamlar QODIRBEK MAXAROV

Слайд 7

"Oshib ketish"ni qayta ishlash

"Quti" o'lchamidan ortib ketadigan kontentni yashirish
overflow
Qiymatlari: visible | hidden

"Oshib ketish"ni qayta ishlash "Quti" o'lchamidan ortib ketadigan kontentni yashirish overflow Qiymatlari:
| scroll | auto
overflow-x
Qiymatlari: visible | hidden | scroll | auto
overflow-y
Qiymatlari: visible | hidden | scroll | auto

QODIRBEK MAXAROV

Слайд 8

"Oshib ketish"ni qayta ishlash

* {
    margin: 0;
    padding: 0;
}
div {
    width: 24%;
    height: 100px;
    display: inline-block;
    background-color: antiquewhite;
    margin-bottom: 90px;
}
.a0 {
    overflow: visible;
}
.a1 {
    overflow: hidden;
}
.a2 {
    overflow: auto;
}

QODIRBEK MAXAROV
.a31 {
    white-space: nowrap;
    overflow-x: scroll;
}
.a32 {
    overflow-y: scroll;
}
.a33 {
    overflow: scroll;
}

"Oshib ketish"ni qayta ishlash * { margin: 0; padding: 0; } div

Слайд 9

Vertikal joylashuv (matn sifatida)

vertical-align (blokli elementlar qatorli element sifatida ishlatilganda o'rinli)
Qiymatlari: baseline

Vertikal joylashuv (matn sifatida) vertical-align (blokli elementlar qatorli element sifatida ishlatilganda o'rinli)
| sub | super | text-top | text-bottom | middle | top | bottom | foiz | uzunlik
* {
    margin: 0;
    padding: 0;
}
div {
    width: 24%;
    height: 100px;
    display: inline-block;
    background-color: antiquewhite;
    margin-bottom: 90px;
    vertical-align: top;
}
.a0 {
    overflow: visible;
}

QODIRBEK MAXAROV

Слайд 10

Kontent va chegara orasidagi masofa (Padding)

Elementning kontent sohasidan chegarasigacha bo'lgan masofa
padding-top, padding-right,

Kontent va chegara orasidagi masofa (Padding) Elementning kontent sohasidan chegarasigacha bo'lgan masofa
padding-bottom, padding-left
Qiymatlari: uzunlik | foiz

QODIRBEK MAXAROV

padding-top: 2em;

padding-right: 4em;

padding-bottom: 2em;

padding-left: 4em;

Слайд 11

Qisqa padding xossasi

Tomonlar bo'yicha qisqartirilgan shakli:
padding
Qiymatlari: uzunlik | foiz
Ko'rinishlari:
padding: top right bottom

Qisqa padding xossasi Tomonlar bo'yicha qisqartirilgan shakli: padding Qiymatlari: uzunlik | foiz
left; padding: 20px 10px 5px 10px;
padding: top right/left bottom; padding: 20px 10px 5px;
padding: top/bottom right/left; padding: 20px 10px;
padding: top/right/bottom/left; padding: 20px;

QODIRBEK MAXAROV

Слайд 12

Qisqa padding xossasi

div {
    width: 175px;
    height: 175px;
    display: inline-block;
    border: solid 2px red;
    box-sizing: border-box;
    background-color: lightgreen;
    background-clip: content-box;
    overflow: hidden;
    margin: 5px;
}
.a1 {
    padding: 20px 10px 5px 10px;
}
.a2 {
    padding: 20px 10px 5px;
}
.a3 {
    padding: 20px 10px;
}
.a4 {
    padding: 20px;
}

QODIRBEK MAXAROV

Qisqa padding xossasi div { width: 175px; height: 175px; display: inline-block; border:

Слайд 13

Chegara stili

border-top-style, border-right-style, border-bottom-style, border-left-style
Qiymatlari: none | solid | hidden | dotted

Chegara stili border-top-style, border-right-style, border-bottom-style, border-left-style Qiymatlari: none | solid | hidden
| dashed | double | groove | ridge | inset | outset
border-style (Tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: none | solid | hidden | dotted | dashed | double | groove | ridge | inset | outset

QODIRBEK MAXAROV

Слайд 14

Chegara qalinligi va rangi

border-top-width, border-right-width, border-bottom-width, border-left-width,
border-width (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik

Chegara qalinligi va rangi border-top-width, border-right-width, border-bottom-width, border-left-width, border-width (tomonlar bo'yicha qisqartirilgan
| thin | medium | thick
border-top-color, border-right-color, border-bottom-color, border-left-color,
border-color (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari : rang qiymatlar | transparent
div.sp {
    border-color: maroon blueviolet;
    border-style: solid dashed double;
    border-width: 6px;
    width: 300px;
    height: 100px;
}

QODIRBEK MAXAROV

Слайд 15

Qisqartirilgan border xossasi

border-top, border-right, border-bottom, border-left,
border
qiymatlari: border-style border-width border-color
*border xossasi faqatgina 1ta

Qisqartirilgan border xossasi border-top, border-right, border-bottom, border-left, border qiymatlari: border-style border-width border-color
qiymat qabul qiladi va qiymatlar barcha tomonlarga ta'sir etadi.
border: solid dashed double 6px maroon blueviolet;
border: double 6px turquoise;

QODIRBEK MAXAROV

Слайд 16

Konturlar (tashqi chegara)

outline-style – kontur stili
Qiymatlari: auto | solid | none |

Konturlar (tashqi chegara) outline-style – kontur stili Qiymatlari: auto | solid |
dotted | dashed | double | groove | ridge | inset | outset
outline-width – kontur qalinligi
Qiymatlari : uzunlik | thin | medium | thick
outline-color – kontur rangi
Qiymatlari : rang qiymatlar | invert
outline-offset – kontur va chegara orasidagi masofa
Qiymatlari : uzunlik
outline – qisqa ko'rinishi
Qiymatlari: outline-style outline-width outline-color
border: double 6px blueviolet;
outline: lime 4px solid;

QODIRBEK MAXAROV

Слайд 17

Aylanali burchaklar

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
Qiymatlari: uzunlik | foiz [ uzunlik | foiz

Aylanali burchaklar border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, Qiymatlari: uzunlik | foiz [ uzunlik
]
border-radius (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik | foiz [ / uzunlik | foiz ]

QODIRBEK MAXAROV

border-radius: 50px;

border-radius: 100px / 50px;

border-radius: 50px 100px;

border-radius: 50px 100px 150px 200px;

Слайд 18

Elementlar orasidagi masofa (Margin)

Elementning chegarasining tashqi tomonidan bo'sh qoldiriluvchi joy
margin-top, margin-right, margin-bottom,

Elementlar orasidagi masofa (Margin) Elementning chegarasining tashqi tomonidan bo'sh qoldiriluvchi joy margin-top,
margin-left
Qiymatlari: uzunlik | foiz | auto
margin (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik | foiz | auto

QODIRBEK MAXAROV

Слайд 19

Elementlar orasidagi masofa (Margin)

Tepa va pastki tashqi masofalar (margin) qo'shilmaydi, balki ularning

Elementlar orasidagi masofa (Margin) Tepa va pastki tashqi masofalar (margin) qo'shilmaydi, balki
eng kattasi olinadi.

QODIRBEK MAXAROV

Слайд 20

Elementlar orasidagi masofa (Margin)

Margin masofa xossasi qatorli (inline) elementlarga qo'llanilganda faqat chap

Elementlar orasidagi masofa (Margin) Margin masofa xossasi qatorli (inline) elementlarga qo'llanilganda faqat
va o'ng tomondan bo'sh joy qoldiriladi, qatorning tepa va pastki qismi o'zgarishsiz qoladi.

QODIRBEK MAXAROV

Слайд 21

Elementlar orasidagi manfiy masofa

Tashqi masofalar (margin) manfiy qiymat qabul qilishi mumkin.

QODIRBEK MAXAROV

Elementlar orasidagi manfiy masofa Tashqi masofalar (margin) manfiy qiymat qabul qilishi mumkin. QODIRBEK MAXAROV

Слайд 22

Marginni avtomatik hisoblash

div {
    background-color: lightgoldenrodyellow;
    width: 300px;
    height: 100px;
    background-origin: content-box;
    border: 1px solid red;
}
.a1 {
    margin: auto;
    padding: 10px;
    width: 300px;
    height: 200px;
}
.a2 {
    margin: auto;
    width: 50%;
    background: lightblue;
}

QODIRBEK MAXAROV

Marginni avtomatik hisoblash div { background-color: lightgoldenrodyellow; width: 300px; height: 100px; background-origin:

Слайд 23

Marginni avtomatik hisoblash

div {
    background-color: lightgoldenrodyellow;
    width: 300px;
    height: 100px;
    background-origin: content-box;
    border: 1px solid red;
}
.a1 {
    margin: auto;
    padding-left: 25px;
    width: 300px;
    height: 200px;
}
.a2 {
    margin: auto;
    width: 50%;
    background: lightblue;
}

QODIRBEK MAXAROV

Marginni avtomatik hisoblash div { background-color: lightgoldenrodyellow; width: 300px; height: 100px; background-origin:

Слайд 24

Ko'rinish turlari

display
Qiymatlari: inline | block | run-in | flex | grid |

Ko'rinish turlari display Qiymatlari: inline | block | run-in | flex |
flow | flow-root | list-item |
table | table-row-group | table-header-group | table-footer-group |
table-row | table-cell | table-column-group | table-column |
table-caption | ruby | ruby-base | ruby-text | ruby-base-container |
ruby-text-container | inline-block | inline-table | inline-flex |
inline-grid | contents | none

QODIRBEK MAXAROV

Слайд 25

Ko'rinish turlari

div {
    margin: 10px;
    padding: 10px;
    background-color: lightyellow;
}
a {
    min-width: 50px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    background-color: moccasin;
    text-align: center;
}
.block a {
    display: block;
}
.inline-block a {
    display: inline-block;
}

QODIRBEK MAXAROV


  Bosh sahifa
  Biz haqimizda
  Bog'lanish


  Bosh sahifa
  Biz haqimizda
  Bog'lanish


  Bosh sahifa
  Biz haqimizda
  Bog'lanish
  A


Ko'rinish turlari div { margin: 10px; padding: 10px; background-color: lightyellow; } a

Слайд 26

Ko'rinish turlari

ul {
    margin: 10px;
    padding: 10px;
    background-color: lightyellow;
}
ul.initial li {
    background: moccasin;
    padding: 5px 15px;
    margin: 5px 10px;
}
ul.inline li {
    display: inline;
    background: moccasin;
    padding: 5px 15px;
    margin: 5px 10px;
}
ul.inline-block li {
    display: inline-block;
    background: moccasin;
    padding: 5px 15px;
    margin: 5px 10px;
}

QODIRBEK MAXAROV


  

  • Bosh sahifa

  •   
  • Biz haqimizda

  •   
  • Bog'lanish

  •   
  • Bog'lanish

  •   
  • Bog'lanish



  •   
  • Bosh sahifa

  •   
  • Biz haqimizda

  •   
  • Bog'lanish

  •   
  • Bog'lanish

  •   
  • Bog'lanish



  •   
  • Bosh sahifa

  •   
  • Biz haqimizda

  •   
  • Bog'lanish

  •   
  • Bog'lanish

  •   
  • Bog'lanish


  • Ko'rinish turlari ul { margin: 10px; padding: 10px; background-color: lightyellow; } ul.initial
    Имя файла: 6.-Bloklar-1.pptx
    Количество просмотров: 27
    Количество скачиваний: 0