Rang va shrift: sahifaga jon kiritamiz

color, background-color, gradient, font va meros olish

8-sinfWeb Full-stack4-hafta · 11-dars

Bugungi reja

01. Rang

Nom, hex, rgb, rgba, hsl va gradient.

02. Shrift

font-family, size, weight, line-height va boshqalar.

03. Meros

Ota-elementdan bolaga nima o'tadi?

Rang bilan ishlash

Matn rangi, fon rangi va ranglarni yozish usullari

Ikki asosiy xususiyat

Birinchi rangli qoida


h1 {
  color: white;
  background-color: darkblue;
}

Matn va fon bir xil rangda bo'lsa, matn ko'rinmaydi!

Rangni yozishning 5 usuli

Usul	Misol	Izoh
Nom	`tomato`	Tayyor nomlar
Hex	`#0a84ff`	# + 6 belgi
rgb	`rgb(255, 0, 0)`	0 dan 255 gacha
rgba	`rgba(0,0,0,0.5)`	+ shaffoflik
hsl	`hsl(210,80%,50%)`	burchak, %, %

Hex rang anatomiyasi

Rang kodda


p {
  color: tomato;
  color: #0a84ff;
  color: rgb(10, 132, 255);
  color: hsl(210, 100%, 52%);
}

Bu to'rt qator bir xil rangni turlicha yozadi. Oxirgi yozilgani amal qiladi.

Mini-test

Matn rangini o'zgartiruvchi xususiyat qaysi?

Matn rangi faqat color bilan beriladi; background-color fon uchun.

Shaffoflik: rgba

shaffof.uz

alpha = 1

Shaffoflik: rgba

shaffof.uz

alpha = 0.4

rgba(0, 0, 0, 0.4): oxirgi son 0 (ko'rinmas) dan 1 (to'liq to'q) gacha.

hsl: rang burchagi


.rang {
  color: hsl(210, 80%, 50%);
}

210: rang burchagi (0 qizil, 120 yashil, 240 ko'k)
80%: to'yinganlik
50%: yorqinlik (0% qora, 100% oq)

Burchak aylanasini ko'rish uchun pastga bosing

Rang g'ildiragi

0 · qizil

40 · sariq-to'q

120 · yashil

200 · havorang

240 · ko'k

290 · binafsha

Gradient: silliq o'tish


.banner {
  background: linear-gradient(to right, royalblue, orange);
}

gradient.uz

AXV banner

Yo'nalishni o'zgartirish mumkin: to bottom, to right.

Shrift va matn

Qanday yozilishi o'qishga ta'sir qiladi

font-family: zaxira ro'yxat

Shrift xususiyatlari

font-size

bosing

Shrift o'lchami: 18px, 1.2em

font-weight

bosing

Qalinlik: normal, bold, 700

font-style

bosing

Qiyshiq yozuv: italic

Matn uchun to'liq qoida


body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
h1 {
  text-align: center;
  letter-spacing: 2px;
}
a {
  text-decoration: none;
}

Qator balandligi

matn.uz

CSS yordamida sahifa matnini o'qishga qulay qilish mumkin. Qatorlar bir-biriga juda yaqin turibdi, ko'z charchaydi.

matn.uz

CSS yordamida sahifa matnini o'qishga qulay qilish mumkin. Qatorlar orasida bo'sh joy bor, o'qish yengil.

Matn xususiyatlari

Xususiyat	Qiymat	Natija
`text-align`	`center`	Markazga tekislash
`text-decoration`	`none`	Tagchiziqsiz
`line-height`	`1.6`	Qator oralig'i
`letter-spacing`	`2px`	Harflar oralig'i

Mini-test

Havoladagi tagchiziqni olib tashlash uchun qaysi qoida to'g'ri?

Tagchiziq text-decoration bilan boshqariladi: none uni olib tashlaydi.

Meros olish

Inheritance: ota-elementdan bolaga

Meros daraxti

Nima o'tadi, nima o'tmaydi?

O'tadi

color
font-family, font-size
line-height, text-align

O'tmaydi

background-color
border
margin, padding

Meros amalda


body {
  color: #333;
  font-family: Arial, sans-serif;
}

.alohida {
  color: crimson;
}


<body>
  <h1>Sarlavha</h1>
  <p>Oddiy matn</p>
  <p class="alohida">Qizil</p>
</body>

Bolaning o'z qoidasi merosdan kuchli.

Odatiy xatolar

Ko'rinmas matn

Matn va fon bir xil rangda.

Hex xato

3 yoki 6 belgi kerak, #ff00 noto'g'ri.

Qo'shtirnoq

Bo'sh joyli shrift nomi: "Times New Roman".

Amaliy topshiriq 30 daqiqa

Osonh1 ga oq matn va to'q ko'k fon, p ga hex rang bering.

O'rta«Shaxsiy vizitka»: body da shrift, gradient fon, markazlangan h1, chiziqsiz havolalar.

Qiyinbody va p ga turli rang bering, kim yutishini taxmin qilib, keyin tekshiring.

Bugungi dars xulosasi

rang yozish: nom, hex, rgb, rgba, hsl

shrift va matn xususiyati

body ga yozilsa, hammaga meros

Keyingi dars (12): Box model: content, padding, border, margin.