Tatu dif 2- kurs talabasi Xurramov Otabekning

padding bir elementning ichki bo'shligi bilan ishlaydi va elementning 
chegaralarini elementning tarkibiy chegaralaridan ajratadi. padding quyidagi 
kabi yoziladi: 
selector { 
padding: top right bottom left;

---

}
top
, 
right
, 
bottom
va 
left
qiymatlari elementning bosh, o'ng, pastki va chap 
tomonlari uchun mos keladi va har bir tomon uchun piksel yoki boshqa bir 
o'lchov birikmasi yoziladi. Masalan:
div { 
padding: 10px;
}
selector { 
margin: top right bottom left;
}
div { 
padding: 10px;
margin: 20px;
}
CSS da, barcha HTML elementlarining qurilmalarini "box model" deb ataluvchi 
model orqali belgilash mumkin. Bu model, har bir elementning to'g'ri 
ko'rinishini aniqlash uchun elementning chegaralari (border), ichki bo'shligi 
(padding), va bo'shliklari (margin)ni o'z ichiga oladi. 
Box model, besh ta qismdan iboratdir: 
1. Content (Tarkib): Bu, HTML elementining o'zi yoki tarkibi hisoblanadi. 
Misol uchun, 
 elementining matni. 
2. Padding: Ichki bo'shlik (Padding) HTML elementning tarkibiga qo'shiladi. 
Bu HTML elementning ichki chegaralarini belgilaydi. 
3. Border: Chegaralar (Border) HTML elementning ichki bo'shligiga 
qo'shiladi. Bu HTML elementning chegaralarini belgilaydi. 
4. Margin: Bo'shliklar (Margin) HTML elementni boshqa elementlardan 
ajratish uchun qo'shiladi. Bu HTML elementning chegaralaridan 
boshlanadi. 
5. Area (Maydon): Bu, HTML elementning butun maydoni hisoblanadi, ya'ni 
content, padding, border va marginning jami. 

---

Box model, har bir elementning ko'rinishini aniqlashda va HTML elementlariga 
shakl berishda juda katta ahamiyatga ega. Box modelni barcha HTML 
elementlarida ishlatish orqali, elementlarning hajmini, shaklini va ko'rinishini 
o'zgartirish mumkin
. 
Labaratoriya – 6 
DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-
scale=1.0"
/>
<
title
>
Document
title
>
<
link
rel
=
"stylesheet"
href
=
"code.css"
/>
head
>
<
body
>
<
div
class
=
"box"
>div
>
body
>
html
>
DOCTYPE
html
>
<
html
>
<
head
>

---

<
style
>
div
{
width
: 
100px
;
height
: 
100px
;
background-color
: red;
position
: relative;
animation-name
: example;
animation-duration
: 
4s
;
}
@keyframes
example {
0% {
background-color
: red;
left
: 
0px
;
top
: 
0px
;
}
25% {
background-color
: yellow;
left
: 
200px
;
top
: 
0px
;
}
50% {
background-color
: blue;
left
: 
200px
;
top
: 
200px
;
}
75% {
background-color
: green;

---

left
: 
0px
;
top
: 
200px
;
}
100% {
background-color
: red;
left
: 
0px
;
top
: 
0px
;
}
}
style
>
head
>
<
body
>
<
h1
>
CSS Animation
h1
>
<
div
>div
>
<
p
>
<
b
>
Note:
b
>
When an animation is finished, it goes back 
to its
original style.
p
>
body
>
html
>
DOCTYPE
html
>
<
html
>
<
head
>
<
title
>
Animation Code
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
/>
head
>

---

<
body
>
<
h1
>
CSS Animation
h1
>
image.png
<
div
>div
>
<
p
>
<
b
>
Note:
b
>
When an animation is finished, it goes back 
to its
original style.
p
>
body
>
html
>
DOCTYPE
html
>
<
html
>
<
head
>
<
style
>
div
{
width
: 
300px
;
height
: 
100px
;
background-color
: yellow;
border
: 
1px
solid black;
}
div#myDiv
{
transform
: rotate(
20deg
);
}
style
>

---

head
>
<
body
>
<
h1
>
The rotate() Method
h1
>
<
p
>
The rotate() method rotates an element clockwise or
counter-clockwise.
p
>
<
div
>
This a normal div element.
div
>
<
div
id
=
"myDiv"
>
This div element is rotated clockwise 20 
degrees.
div
>
body
>
html
>
DOCTYPE
html
>
<
html
>
<
head
>
<
style
>
div
{
width
: 
100px
;
height
: 
100px
;
background-color
: red;

---

animation-name
: example;
animation-duration
: 
4s
;
}
@keyframes
example {
0% {
background-color
: red;
}
25% {
background-color
: yellow;
}
50% {
background-color
: blue;
}
100% {
background-color
: green;
}
}
style
>
head
>
<
body
>
<
h1
>
CSS Animation
h1
>
<
div
>div
>
<
p
>
<
b
>
Note:
b
>
When an animation is finished, it goes back 
to its
original style.
p
>
body
>
html
>

---

animation-delay
CSS animatsiyalari uchun bir usuldir, bu usul orqali 
animatsiya boshlanishidan oldin kutish va boshlash vaqti orasida kuzatishni 
belgilash mumkin.
animation-delay
bilan animatsiyani boshlash vaqti 
cheklangan vaqtni tashkil etadi. 
animation-delay
quyidagi ko'rinishda 
yoziladi:
animation-delay: value; 
value qiymati milisaniyalar (ms) yoki sonli qiymatlar ko'rinishida bo'lishi 
mumkin. animation-delay qiymati manfiy bo'lishi mumkin, bu holatda 
animatsiya boshlanganidan oldin bajarilishi kerak bo'lgan amallar yoziladi. 
Misol uchun, quyidagi CSS kodi 2 sekunddan keyin animatsiya boshlanadi: 
.example { 
animation-name: example-animation;
animation-duration: 1s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Ushbu kodda .example nomli HTML elementi example-animation nomli 
animatsiyani ishlatadi. Animatsiya 1 soniya davom etadi va 2 sekunddan keyin 
boshlanadi. animation-iteration-count esa animatsiyani chegaralangan 
muddat davomida takrorlaydi. 
animation-delay CSS da animatsiya boshlanish vaqti cheklanganida 
animatsiyalarning ko'rinishiga va shaklini belgilashda foydali bo'ladi. 

---

animation-iteration-count
CSS animatsiyalari uchun bir usuldir, bu usul 
orqali animatsiyani necha marta takrorlash kerakligini aniqlash mumkin. 
animation-iteration-count
bilan animatsiyani necha marta takrorlash 
kerakligi belgilanadi. 
animation-iteration-count
quyidagi ko'rinishda 
yoziladi:
animation-iteration-count: value; 
value qiymati sonli qiymatlar yoki infinite bo'lishi mumkin. animation-
iteration-count qiymati animatsiyani necha marta takrorlash kerakligini 
anglatadi. infinite qiymati esa animatsiyani chegaralangan muddat 
davomida cheksiz takrorlaydi. 
Misol uchun, quyidagi CSS kodi animatsiyani 3 marta takrorlaydi: 
.example { 
animation-name: example-animation;
animation-duration: 1s;
animation-iteration-count: 3;
}
Ushbu kodda .example nomli HTML elementi example-animation nomli 
animatsiyani ishlatadi. Animatsiya 1 soniya davom etadi va 3 marta 
takrorlanadi. 
animation-iteration-count CSS da animatsiyalarni chegaralangan 
muddat davomida takrorlash, ya'ni animatsiyani turli vaqt davomida ko'rsatish 
uchun juda foydali bo'ladi. 
animation-direction CSS xususiyati, animatsiyani qaysi yo'nalishda ijro etishini 
aniqlash uchun ishlatiladi. Bu xususiyat bir nechta qiymatlarga ega bo'lishi 
mumkin: 
• normal: Animatsiya uchun doimiy yo'nalish (boshlang'ich holat) 
• reverse: Animatsiya uchun teskari yo'nalish 

---

• alternate: Animatsiya boshlang'ich holatdan teskari holatga va qaytib 
ketish bilan davom etadi. 
• alternate-reverse: Animatsiya teskari holatdan boshlanib boshlang'ich 
holatga va qaytib ketish bilan davom etadi. 
Masalan, agar siz animatsiyani tekshirganingizda, unda tekshirish uchun yangi 
yo'nalish aniqlang bo'lsa, animatsiya-direction xususiyatini ishlatishingiz 
mumkin. Misol uchun, quyidagi kod animatsiyani yorqin holatda olib boradi: 
div { 
animation-name: yorqin-animatsiya;
animation-duration: 3s;
animation-direction: alternate;
}
animation-timing-function CSS xususiyati, animatsiyadagi o'zgarishlarning 
qanday tarzda bajarilishini aniqlash uchun ishlatiladi. Bu xususiyat 
animatsiyalarni o'zgartirishlarni borish tezligi va bajarilish xususiyatlarini 
aniqlash uchun foydalaniladi. Bu xususiyatga bir nechta qiymatlar berilishi 
mumkin, masalan: 
• ease: Animatsiya boshida tezlanadi va keyingi jihatda tezlik kamayadi. 
• linear: Animatsiya bajarilish tezligi barcha muddatlarda bir xil. 
• ease-in: Animatsiya boshida tezlanadi. 
• ease-out: Animatsiya oxirida tezlik kamayadi. 
• ease-in-out: Animatsiya boshida va oxirida tezlanish o'zgaradi. 
Masalan, quyidagi kod animatsiyani ease-in-out usuli bilan bajaradi: 
div { 
animation-name: animatsiya;
animation-duration: 2s;
animation-timing-function: ease-in-out;

---

}
animation-fill-mode CSS xususiyati, animatsiya bajarilishi tugaganidan keyin 
animatsiyada aniqlangan xususiyatlar bilan qanday davom etilishi haqida 
aniqlash uchun ishlatiladi. Bu xususiyatga bir nechta qiymatlar berilishi 
mumkin, masalan: 
• none: Animatsiya bajarilishidan avval va keyin animatsiya stiliga mos 
ravishda turmaydi. 
• forwards: Animatsiya bajarilishidan keyin oxirgi stil animatsiya 
tugaganidan keyin qoladi. 
• backwards: Animatsiya boshlanishidan avval, bajarilish boshlanmaydan 
oldin oxirgi stilga mos ravishda turadi. 
• both: Animatsiya boshlanishidan avval va tugaganidan keyin ham oxirgi 
stil animatsiyada turadi. 
Masalan, quyidagi kod animatsiyani forwards xususiyati bilan bajaradi: 
div { 
animation-name: animatsiya;
animation-duration: 2s;
animation-fill-mode: forwards;
}
Labaratoriya – 7
DOCTYPE
html
>
<
html
>
<
body
>
<
h2
>
JavaScript Variables
h2
>
<
p
>
In this example, x, y, and z are variables.
p
>

---

<
p
id
=
"demo"
>p
>
<
script
>
let
x = 
5
;
let
y = 
6
;
let
z = x + y;
document.getElementById(
"demo"
).innerHTML =
"The value of z is: "
+ z;
script
>
body
>
html
>
DOCTYPE
html
>
<
html
>
<
body
>
<
h2
>
JavaScript
h2
>
<
p
>
JavaScript evaluates expressions from left to right. Different 
sequences can produce different results:
p
>
<
p
id
=
"demo"
>p
>
<
script
>
let
x = 
"Volvo"
+ 
16
+ 
4
;
document.getElementById(
"demo"
).innerHTML = x;
script
>
body
>
html
>

---

DOCTYPE
html
>
<
html
>
<
body
>
<
h2
>
JavaScript Arrays
h2
>
<
p
id
=
"demo"
>p
>
<
script
>
const
cars = [
"Saab"
,
"Volvo"
,
"BMW"
];
document.getElementById(
"demo"
).innerHTML = cars;
script
>
body
>
DOCTYPE
html
>
<
html
>
<
body
>
<
h1
>
JavaScript Operators
h1
>
<
h2
>
The Assignment (=) Operator
h2
>
<
p
id
=
"demo"
>p
>
<
script
>
// Assign the value 5 to x
let
x = 
5
;

---

// Assign the value 2 to y
let
y = 
2
;
// Assign the value x + y to z
let
z = x + y;
// Display z
document.getElementById(
"demo"
).innerHTML = 
"The sum of x + y is: "
+ z;
script
>
body
>
html
>