Tatu dif 2- kurs talabasi Xurramov Otabekning

Sarlavha

Bu mening matnim

.title {
/* uslublar shu yerga yoziladi */
}

---

.text {
/* uslublar shu yerga yoziladi */
}
Bu yerda, "title" va "text" sinflari berilgan va ularga belgilangan uslublarni 
ta'minlaydigan sinf tanlaychilari yaratilgan. 
Sinf tanlaychilari, veb sahifadagi ko'pgina elementlarga o'zaro bog'liq yoki ko'p 
tarkibdagi uslublarni qo'llashni ta'minlashda foydali bo'ladi. 
CSS (Cascading Style Sheets)da, universal tanlashchi ya'ni * (yulduz) belgisi, 
barcha HTML elementlari uchun birlikdagi stil yoki stil to'plamini belgilash 
uchun ishlatiladi. 
Universal tanlashchi sintaksisi quyidagicha: 
* { 
/* uslublar shu yerga yoziladi */
}
Bu tanlaychi, HTML sahifadagi barcha elementlarga belgilangan uslublarni 
qo'llashni ta'minlaydi. 
Universal tanlashchi, barcha elementlar uchun belgilangan uslublarni 
ta'minlashda ishlatiladi. Misol uchun, HTML sahifadagi barcha elementlarga 
shu rangni berish uchun quyidagi tanlaychini ishlatish mumkin: 
* { 
color: red;
}
Bu yerda, HTML sahifadagi barcha elementlarga belgilangan uslub, ularning 
matnni qizil rangda ko'rsatishni ta'minlaydi. 
Shuningdek, universal tanlashchi, barcha elementlarga boshlang'ich 
qiymatlarini, masalan, border-box box-sizing yoki margin: 0; padding: 0; stilini 
berish uchun ham ishlatiladi. 

---

CSS (Cascading Style Sheets)da, guruh tanlaychisi yordamida bir nechta HTML 
elementlarga bitta yoki bir nechta uslublar belgilanadi. Guruh tanlaychisi, biror 
HTML elementlar guruhida birlikdagi stil yoki stil to'plamini belgilash uchun 
ishlatiladi. 
Guruh tanlaychisi sintaksisi quyidagicha
: 
element1, element2, element3 { 
/* uslublar shu yerga yoziladi */
}
Bu yerda, "element1", "element2" va "element3" elementlari belgilangan va 
ularga belgilangan uslublar qavs ichidagi yozuvda berilgan. 
Guruh tanlaychisi, bir nechta elementlarga belgilangan bir yoki bir nechta 
uslubni qo'llashni ta'minlashda foydali bo'ladi. Misol uchun, HTML sahifadagi 
barcha sarlavhalar va tugmachalarga quyidagi tanlaychini ishlatish mumkin: 
h1, button { 
font-family: sans-serif;
font-weight: bold;
}
Bu yerda, HTML sahifasidagi barcha h1 sarlavhalari va tugmachalarga bir xil 
uslub berilgan, ya'ni shrift oilasi va qalinligi. 
Guruh tanlaychisi, boshqa tanlaychilar bilan birlashtirilishi va ularga qo'shimcha 
o'zgarishlarni qo'llashni ta'minlaydi. Misol uchun, guruh tanlaychisi va sinf 
tanlaychisi birgalikda quyidagi kabi yozilishi mumkin: 
h1.title, button.title { 
font-family: sans-serif;
font-weight: bold;
color: red;
}
Labaratoriya ishi – 5 

---

⦁
DOCTYPE
html
>
<
html
>
<
body
>
<
h1
>
Specify colors using RGB values
h1
>
<
h2
style
=
"background-color:rgb(255, 0, 0);"
>
rgb(255, 0, 0)
h2
>
<
h2
style
=
"background-color:rgb(0, 0, 255);"
>
rgb(0, 0, 255)
h2
>
<
h2
style
=
"background-color:rgb(60, 179, 113);"
>
rgb(60, 179, 
113)
h2
>
<
h2
style
=
"background-color:rgb(238, 130, 238);"
>
rgb(238, 130, 
238)
h2
>
<
h2
style
=
"background-color:rgb(255, 165, 0);"
>
rgb(255, 165, 0)
h2
>
<
h2
style
=
"background-color:rgb(106, 90, 205);"
>
rgb(106, 90, 
205)
h2
>
body
>
html
>
⦁ ⦁
DOCTYPE
html
>
<
html
>
<
body
>
<
h1
>
Specify colors using HEX values
h1
>
<
h2
style
=
"background-color:#ff0000;"
>
#ff0000
h2
>
<
h2
style
=
"background-color:#0000ff;"
>
#0000ff
h2
>
<
h2
style
=
"background-color:#3cb371;"
>
#3cb371
h2
>
<
h2
style
=
"background-color:#ee82ee;"
>
#ee82ee
h2
>
<
h2
style
=
"background-color:#ffa500;"
>
#ffa500
h2
>
<
h2
style
=
"background-color:#6a5acd;"
>
#6a5acd
h2
>

---

body
>
html
>
⦁
DOCTYPE
html
>
<
html
>
<
body
>
<
h1
>
HSL Saturation
h1
>
<
p
>
The second parameter of hsl() defines the saturation. Less 
saturation mean less color. 0% is completely gray:
p
>
<
h2
style
=
"background-color:hsl(0, 100%, 50%);"
>
hsl(0, 100%, 
50%)
h2
>
<
h2
style
=
"background-color:hsl(0, 80%, 50%);"
>
hsl(0, 80%, 50%)
h2
>
<
h2
style
=
"background-color:hsl(0, 60%, 50%);"
>
hsl(0, 60%, 50%)
h2
>
<
h2
style
=
"background-color:hsl(0, 40%, 50%);"
>
hsl(0, 40%, 50%)
h2
>
<
h2
style
=
"background-color:hsl(0, 20%, 50%);"
>
hsl(0, 20%, 50%)
h2
>
<
h2
style
=
"background-color:hsl(0, 0%, 50%);"
>
hsl(0, 0%, 50%)
h2
>
body
>
html
>
HTML
<
div
>
<
p
class
=
"catsandstars"
>
This paragraph is full of cats
<
br
/>
and 
stars.
p
>
<
p
>
This paragraph is not.
p
>
<
p
class
=
"catsandstars"
>
Here are more cats for you.
<
br
/>
Look at 
them!
p
>
<
p
>
And no more.
p
>

---

div
>
CSS 
p
{
font-size
: 
1.5em
;
color
: #fe7f88;
background-image
: none;
background-color
: transparent;
}
div
{
background-image
: url(
"mdn_logo_only_color.png"
);
}
.catsandstars
{
background-image
: url(
"startransparent.gif"
), 
url(
"catfront.png"
);
background-color
: transparent;
}
HTML 
⦁
<
html
>
<
head
>
head
>
<
body
>
<
p
style
= 
"text-transform:capitalize;"
>
This will be capitalized
p
>
<
p
style
= 
"text-transform:uppercase;"
>
This will be in uppercase

---

p
>
<
p
style
= 
"text-transform:lowercase;"
>
This will be in lowercase
p
>
body
>
html
>
HTML 
<
html
>
<
head
>
head
>
<
body
>
<
p
style
= 
"text-shadow:4px 4px 8px blue;"
>
If your browser supports the CSS text-shadow property, 
this text will have a blue shadow.
p
>
body
>
html
>
CSS da margin va padding bilan ishlash, HTML elementlariga bosishlar 
(padding) va ular orasida bo'shliq (margin) berish yordamida HTML 
elementlariga shakl berishda va ko'rinishini o'zgartirishda yordam beradi.