Ikonkalar, pseudo-classlar va ro'yxat

DarslarWeb dasturlash

Ikonkalar, pseudo-classlar va ro'yxat

Ikonkalarni sayt ichiga qo'shish, :hover va :focus bilan interaktivlik, ::before/::after pseudo-elementlar va ro'yxatlarni chiroyli qilish.

30 daqiqa
CSS — Dars 5

Ikonkalar, pseudo va ro'yxat

Saytga jonlilik bering: hover effektlari, ikonkalar va chiroyli ro'yxatlar.

:hover::before::selectionlist-style

Dars rejasi

4 ta mavzu
  1. 01Ikonkalar — Font Awesome va Lucide
  2. 02Pseudo-class — :hover, :focus va boshqalar
  3. 03Pseudo-element — ::before, ::after
  4. 04list-style — ro'yxatlar ko'rinishi

1. Ikonkalar

Ikonka — kichkina rasm-belgi. Masalan: yurak, qo'ng'iroq, menyu. Saytni tushunarli va chiroyli qiladi. Ikonkalarni sayt ichiga 3 xil usulda qo'shish mumkin:

  1. Rasm (PNG/SVG) fayl sifatida — <img> orqali.
  2. Ikonka shrifti — masalan, Font Awesome.
  3. SVG — matn shaklida, kodga o'raladigan chiroyli ikonkalar.

Font Awesome — eng oson usul

HTMLning <head> qismiga bir qator qo'shasiz va minglab ikonkani <i> tegi orqali ishlata olasiz.

1<head>
2  <link rel="stylesheet"
3    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
4</head>
5

6<body>
7  <i class="fa-solid fa-heart"></i>
8  <i class="fa-solid fa-phone"></i>
9  <i class="fa-brands fa-telegram"></i>
10</body>
Ikonkalar bilan o'ynang
Natijajonli
Ikonka galereyasi

Font Awesome saytini ochish

Minglab bepul ikonkalar. Kerak bo'lganini izlang va class nomini nusxa oling.

2. Pseudo-class — :hover, :focus va boshqalar

Pseudo-class — elementning maxsus holatiga CSS qoidasi. Masalan: sichqoncha ustiga olib borganda, havola bosilganda, input faollashganda va hokazo.

  • :hover — sichqoncha element ustida.
  • :active — element bosilayotgan paytda.
  • :focus — input yoki tugma faol holatda (tab bosilganda).
  • :visited — havola oldin bosilgan bo'lsa.
1.tugma {
2  background: #2563eb;
3  color: white;
4  padding: 10px 20px;
5  transition: all 0.2s;
6}
7

8.tugma:hover {
9  background: #1e40af;
10  transform: translateY(-2px);
11}
12

13.tugma:active {
14  transform: translateY(0);
15}
16

17input:focus {
18  outline: 2px solid #2563eb;
19}
20

21a:visited {
22  color: purple;
23}
Hover, active va focusni sinang
Natijajonli

3. Pseudo-element — ::before, ::after

Pseudo-element — elementning maxsus qismiga stil berish yoki sun'iy qism qo'shish. Ikki nuqta :: bilan yoziladi.

  • ::before — elementning ichiga, eng BOSHIGA qo'shadi.
  • ::after — elementning ichiga, eng OXIRIGA qo'shadi.
  • ::first-line — matnning birinchi qatori.
  • ::selection — foydalanuvchi sichqoncha bilan belgilagan matn.
1.kotirovka::before {
2  content: "«";
3  color: #fbbf24;
4  font-size: 32px;
5}
6

7.kotirovka::after {
8  content: "»";
9  color: #fbbf24;
10  font-size: 32px;
11}
12

13p::first-line {
14  font-weight: bold;
15  color: #1e40af;
16}
17

18::selection {
19  background: #fbbf24;
20  color: #0f172a;
21}
Pseudo-elementlarni sinang
Natijajonli

4. list-style — ro'yxatlar ko'rinishi

Default holda <ul> ro'yxatida qora doirachalar, <ol> da raqamlar turadi. Ularni CSS orqali o'zgartirish mumkin.

  • list-style-type — belgi turi: disc, circle, square, decimal, lower-alpha, upper-roman, none.
  • list-style-position — belgi ichkaridami (inside) yoki tashqaridami (outside).
  • list-style-image — o'rniga rasm qo'yish.
1ul {
2  list-style-type: square;
3}
4

5ol {
6  list-style-type: upper-roman;
7}
8

9.menyu {
10  list-style: none;  /* belgilarni butunlay o'chirish */
11  padding: 0;
12}
Ro'yxatlarni bezang
Natijajonli

Kichik test

0 / 5

1.Sichqoncha element ustida bo'lganda stil qo'yish uchun qaysi selektor ishlatiladi?

2.::before va ::after ishlashi uchun qaysi xossa ALBATTA kerak?

3.Ro'yxatdan qora doirachalarni butunlay olib tashlash uchun nima yoziladi?

4.Input bosilganda ko'k chiziq qo'yish uchun qaysi kombinatsiya?

5.Foydalanuvchi matnni belgilaganda rangni o'zgartirish uchun nima ishlatiladi?

Mustaqil ish

0 / 8