CSS

font-weight: normal ; Matn qalinligi
lighter Ingichka
bold
Qalin
normal Õrtacha
100/900100 dan 900 gacha son qiymati
font-size: 16px ; Shrift õlchami
font-style: italic; Matn kõrinishi
font-family: monospace; Matn shrifti
text-decoration: overline;
Matn beazagi
none Hech qanday
overline Ustiga chizilgan
underline Tagiga chizilgan
line-through Belidan chizilgan
text-transform: none ;
Matn yozilish turi
uppercase Bosh harflar bilan
lowercase Kichik harflar bilan
capitalize Sõz 1-harfi, bosh harf bilan
text-align: center; Matn joylashuvi
left Chap
right Õng
center Õrta
justify 2 chetga tekislangan

  button:hover{
    cursor: pointer;
    background-color: red;
    }

background-color: white ;
Orqa fon rangi
background-image: url( ' /rasm.jpg ' ) ;
Orqa fonga rasm qõyish
background-size: cover;
Orqa fonni elementga moslash
background-repeat: no repeat ;
Orqa fon takrorlanishi
background-attachment: fixed;
Orqa fonni qotirib qõyish
background-position: left top;
Orqa fonni aynan qayerini olish

list-style-type: none;
HTML <li> elementi uchun stil turi
display: block; Ekran turini belgilash
flaot: left;
Elementni biror tomonga surish
clear: both; floatni tasirsizlantirish
box-sizing: border-box;
Õlchamga moslash padding, margin, borderlar bilan
transition: 0.6s;
Element õzgarish davomiyligi vaqti
owerflow: auto; Element moslashuvi
line-height: 5px; Qator orasidagi joy
outline: none; Tashqari chiziq
border-collapse: collapse;
HTML, <Table> elementi borderlarini 1 qator qilish

position: absolute; Atrofga tasirsiz
position: relative;
Faqat obyektga nisbatan
position: fixed; Lentadan tashqari

.css: first-child { }
1-element uchun stil
.css: last-child { }
2-element uchun stil
.css: nth-child(odd) { }
Hartoq element uchun stil .css: nth-child(even) { }
Harjuft element uchun stil

40vw Sahifa enini 40%
30vh Sahifa balandligini 30%
20vmin minimum õlchami
60vmax Maksimal õlcham

Har-xil qurilmalar uchun stil yozish
@media (max-width: 767px) { }
Telefon uchun
@media (min-width: 768px) and (max-width: 1023px) { }
Planshet uchun
@media (min-width: 1024px) { }
Kompyuter uchun

display: flex; Flex hosil qilish
flex-direction: row; Elementlar tartibi
column Quyiga
column-reverse Yuqoriga
row Õngga
row-reverse Chapga
justify-content: center;
Gorizantal joylashish tartibi
center Õrtaga
flex-start Chapga
flex-end Õngga
space-between Orasini teng ochish
space-around 2 yonini teng ochish
space-evenly Teng orali
align-items: center
Elementlar Vertikal joylashuvi
center Õrtaga
flex-start Sahifa yuqorisiga
flex-end Sahifa quyisiga
stretch Butun sahifani tõldirish
Bu holatda elementga height(balandlik) berilmagan bõlishi kerak
Baseline
Element matni bõyicha tekislash
flex-wrap: wrap;
Border õlchamiga moslash
flex-shrink: 3;
Element boshqa elementlarga qaraganda necha marta tezroq qisqarishini belgilash
flex-grow: 5;
Element boshqa elementlarga qaraganda necha marta tezroq õsishini belgilash
flex-bases: 120px;
Boshlang'ich õlcham
flex: 35120px;
grow shrink bases
order: 3;
Element joylashuv õrni
align-self: center; Õzini õzi joylashtirish
Qiymatlari yuqoridagidek

display: grid; Grid hosil q.
Grid bu asosan jadvalga õhshash elementlarga talluqli hisoblanadi
grid-template-columns: 2px 3px 4px;
Ustunlar(3 ta) va ular õlchami (px)
grid-template-rows: 3px 4px;
Qatorlar(2 ta) va ular õlchami (px)
grid-column-gap: 10px;
Eniga elementlar oralig'i
grid-row-gap: 10px;
Bõyiga elementlar oralig'i
grid-column: 2/4;
Eniga, ustunlarning ma'lum(2/4) qismini õzlashtirish
grid-row: 2/3;
Bõyiga, ustunlarning ma'lum(2/4) qismini õzlashtirish
justify-items: end;
Elementlarni konteyner biror tomoniga surish(ENIGA)
align-items: start;
Elementlarni konteyner biror tomoniga surish(BÕYIGA)

QIYMATLARI:
end Oxiriga
start Boshiga
center Õrtaga
stretch Teng joylash(bõsh joysiz)

grid-template-columns: repeat(5,10px);
Element yaratish(5 ta 10pxli element yaratish)
grid-template-columns: repeat(2, 3px, 5px);
Har bir elementga alohida qiymat berib, yaratish
grid-template-columns: repeat(5, minmax(90px 120px));
Minimum va Maksimum qiymat berish
grid-template-columns: repeat(auto-fill, 10px);
Qancha element sig'dirish kerakligini avtomatik aniqlash(Bõsh joylarni tõldirib)
grid-template-columns: repeat(auto-fit, 10px);
Qancha element sig'dirish kerakligini avtomatik aniqlash(Bõsh joylarni tõldirmasdan)

Animatsiya:

@keyframes aName{ 
   from{font-size: 16px;}
   to{font-size: 26px;}
   }

Animatsiya yaratish, boshlanish(from) tugash(to) xolati
animation-name: aName;
Yuqoridagi animatsiyani elementga birlashtirish
animation-duration: 3s;
Animatsiya davomiylik vaqti(sekund)
animation-iteration-count: 10;
A. qaytarilishi(necha marta)
infinite - cheksiz
animation-delay: 4s;
Boshlanishdan oldingi pauza vaqti
animation-direction: alternate;
A. bajarilish tartibi
reverse Teskari t.
alternate Odatiy t.
alternate-reverse
Har-bir xolat, teskari tartibi
animation-timing-function: linear; A. vaqt funksiyasi
linear Bir-tekis
ease-in sekindan-tezga
ease-out tezdan-sekinga
animation-fill-mode: backwards;
A.dan sõng, element holati
backwards Boshlang'ich
forwards Sõnggi
animation-play-state:running; Document yuklanganda A.
running Yurgazilgan
paused Tõxtatilgan
animation: name 3s 1s 10 linear forwards ; Barchasi bittada

1. Animatsiya nomi
2. Davomiyligi
3. Delay
4. Takrorlanish
5. Vaqt funksiyasi
6. Sõnggi holati