Qidiruv resurslar

• 
  
  
• 
  
  

1-dars:CSS bilan stil berish
QIDIRUV

Qidiruv
RESURSLAR

Oching
KONSEPTLAR

Yopish

1. 
    1. Uslub(ko‘rinish) berishni boshlash
   
2. 
    2. "Developer Tools"(Dasturchining ish asboblari)
   
3. 
    3. Matnni daraxt diagramasida ko‘rsatish
   
4. 
    4. Daraxt diagrammasining tarkibi
   
5. 
    5. Daraxt diagrammalaridan qutilarga
   
6. 
    6. "HTML"ga to‘g‘ridan to‘g‘ri uslub berish
   
7. 
    7. Amaliy mashg‘ulot - Ichki uslublar(inline styles)
   
8. 
    8. Amaliy mashg‘ulot — Bitta "HTML" elementida bir nechta uslublarni ishlatish
   
9. 
    9. Amaliy mashg‘ulot - qo‘shtirnoq bilanmi yoki qo‘shtirnoqsizmi?
   
10. 
     10. "HTML"ga alohida uslub berish
    
11. 
     11. Amaliy mashg‘ulot — "HTML"ga alohida uslub berish
    
12. 
     12. "CSS" sintaksisi
    
13. 
     13. Selektor: Turlari
    
14. 
     14. Selektorlar: Klas va ID selektorlari
    
15. 
     15. Selektorlarni birlashtirish
    
16. 
     16. Termin so‘zlarni takrorlash
    
17. 
     17. Selektorlarni takrorlash
    
18. 
     18. Amaliy mashg‘ulot — Selektorlar
    
19. 
     19. Amaliy mashg‘ulot — Klas selektorlari
    
20. 
     20. Amaliy mashg‘ulot — Yanada ko‘proq klas selektorlari
    
21. 
     21. "CSS"da "kaskad" nima uchun juda muhim?
    
22. 
     22. Amaliy mashg‘ulot — Uslublarni kaskadlash
    
23. 
     23. O‘lchov birliklari
    
24. 
     24. Qutilar
    
25. 
     25. Amaliy mashg‘ulot — "CSS"da qutilar
    
26. 
     26. Amaliy mashg‘ulot — Suzib yurivchi qutilar
    
27. 
     27. Amaliy mashg‘ulot — Qutilar ichidagi qutilar
    
28. 
     28. Foizlar
    
29. 
     29. Yanada ko‘proq "CSS" o‘rganish
    
30. 
     30. "CSS" uslublarni "HTML"dan ajratish
    
31. 
     31. Amaliy mashg‘ulot — Uslub berishning 3 yo‘li
    
32. 
     32. Ranglardan foydalanish
    
33. 
     33. Amaliy mashg‘ulot - Ranglar
    
34. 
     34. Amaliy mashg‘ulot — Xossalarni qidirish
    
35. 
     35. Shriftlar
    
36. 
     36. Amaliy mashg‘ulot — Shriftlar (1/2)
    
37. 
     37. Amaliy mashg‘ulot — Shriftlar (2/2)
    
38. 
     38. Amaliy mashg‘ulot — ma’no bilan uslub farqi
    
39. 
     39. Amaliy mashg‘ulot — Konteynerlar (1/2)
    
40. 
     40. Amaliy mashg‘ulot — Konteynerlar (2/2)
    
41. 
     41. "CSS"da "Flexbox" xossasi
    
42. 
     42. Amaliy mashg‘ulot — "Flexbox" xossasi (1/2)
    
43. 
     43. Amaliy mashg‘ulot — "Flexbox" xossasi (2/2)
    
44. 
     44. CSS syntax review
    
45. 
     45. Dizaynni takrorlash
    
46. 
     46. Xulosa
    

Yon panelni ochib-yopish

CSS syntax review

IZOH JO‘NATISH

"CSS" sintaksisini takrorlash

Ushbu darsda "CSS" sintaksisining ko‘plab misollariga duch kelgansiz. Endi navbat takrorlashga!

"CSS" qoidalar to‘plamining asosiy sintaksisi ikkita qismdan iborat: selektor va bir guruh qoidalar, ularning har biri xossa nomi va shu xossaning qiymatidan iborat..

selector {

property: value;

}

Avval selektor yoziladi va keyin qoidalar { kamon sifat qavslar} ichiga yoziladi. Har bir qoidaning xossasi va qiymati bir biridan : ikki nuqta bilan ajratiladi va qoida har doim ; nuqta-vergul bilan tugaydi.

Selektorlar

Selektor "CSS" qoidasi qo‘llaniladigan HTML elementlarini ko‘rsatadi. Bir necha xil selektor turlarini ko‘rdingiz: element selektori(element selector), klas selektori(class selector), id selektori(id selector), va tobe selektor(descendent selector).

tur selektori ma’lum bir turdagi har bir HTML elementiga qo‘llaniladi, masalan, p yoki em elementlarini tanlash uchun. Ushbu selektor har bir p elementga qo‘llaniladi:

p {

color: blue;

}

klas selektori class atributiga ega barcha elementlarga qo‘llaniladi. Klas selektori '.' (nuqta)dan boshlanib yoziladi:

.narrow {

width: 20%;

}

Klas selektorini qo‘llash uchun sahifada class atributidan foydalanadigan HTML elementlari bo‘lishi kerak:

class="narrow">

This will get the 20% width.

id selektor ma’lum bir id atributiga ega elementga qo‘llaniladi. ID selektori "#" belgisi bilan yoziladi:

#sidebar {

background-color: lightgray;

width: 20%;

float: left;

}

"HTML" sahifasi ichida id atribut qiymati bilan faqat bitta element bo‘lishi kerak.

id="sidebar">

This will get the background, width, and float values from the sidebar CSS rule.

tobelik selektori bu ikkita oddiy selektorlar jamlanmasidan iboratdir. Bu faqat ma’lum bir tashqi elementning avlodi (DOM daraxtida) bo‘lgan ichki elementga tegishli.

li a {

color: pink;

}

Yuqoridagi selektor a elementlariga (havola yaratuvchi element) qo‘llaniladi, lekin li element (ro‘yxat yaratuvchi elementi) ichidagi mavjud a elementlargagina qo‘llaniladi:

• href="https://www.udacity.com/"> Pink Udacity
  
  

href="https://www.google.com/"> Non-pink Google

Qoidalar

Qoidalar to‘plami bir nechta qoidalardan iborat bo‘lishi mumkin, ularning har biri tanlangan elementlarning xossalariga ma’lum bir qiymatni beradi. Xossalar - bu elementning rangi, holati, o‘lchami va shakli kabilardir.

h1 { color: red; font-size: larger; }

Ushbu qoida color xossasiga red qiymatni va font-size xossasiga nisbatan larger qiymatni qo‘llaydi.

Ba’zi xossalarga bir nechta so‘zlardan iborat bo‘lgan qiymatlar yozish mumkin, masalan, font xossasiga:

body { font: 12pt bold Consolas, Monaco, monospace; }

Shrift to‘plamlari

Font-family va font xossalari sizga shrift to‘plamlarini, "," vergul bilan ajratilgan shrift parametrlari ro‘yxatini ko‘rsatishga imkon beradi. Brauzer foydalanuvchi tizimidagi shrift to‘plamidan birinchisini ishlatadi. Odatda to‘plamda oxirgi shrift umumiy shrift nomi bo‘lishi kerak, masalan, serif, sans-serif yoki monospace.

Ranglar

"CSS"da rangni aniqlashning bir necha yo‘li mavjud. Uchta keng tarqalgan kod - bu hex kodlari, rgb uchliklari va rang nomlari.

.orange {

color: #ff9900;

}

.pink {

color: rgb(100%, 80%, 80%);

}

.chartreuse {

color: chartreuse;

}

"Flexbox" xossasi

Brauzerda "HTML" elementlari joylashuvini an’anaviy joylashuvdan "Flexbox" usulidagi joylashtirishga o‘zgartirish uchun konteyner elementiga (uning ichida boshqa elementlari bo‘lgan) display:flex xossasini yozing.

.outer {

display: flex;

border: 2px dotted orange;

}

.inner {

width: 100px;

border: 1px solid black;

padding: 10px;

}

"Flexbox" har hil holatlarga moslashtirilishi mumkin! Yuqorida yozilgan kodlar .inner klasiga ega "HTML" elementlarni .outer klasiga ega elementi ichida qatorlab joylashtirilishiga sabab bo‘ladi:

class="outer">


class="inner"> I am a box.



class="inner"> I am another box.



class="inner"> Hey, I am a box, too! Boxes rock.



class="inner"> Let's be boxes together. Yay, flexbox.

I am a box.

I am another box.

Hey, I am a box, too! Boxes rock.

Let's be boxes together. Yay, flexbox.

Quyidagi IPND Referents Sheets - CSS Syntax havolasini bosish orqali ushbu ma’lumotni PDF fayl sifatida yuklab oling!

Qo‘shimcha yordam materiallar

 IPND Reference Sheet - CSS Syntax

KEYINGI