HTML uslublar (Style)
Style obyekti
Style obyekti alohida uslub ko‘rsatmasini (style statement) ifodalaydi.
Style obyekti xususiyatlari
| Xususiyat | Tavsif |
|---|---|
| alignContent | Flex elementlar mavjud bo‘sh joyning hammasini egallamaganda, flex konteyner ichidagi qatorlar orasidagi tekislashni o‘rnatadi yoki qaytaradi |
| alignItems | Flex konteyner ichidagi elementlarning tekislanishini o‘rnatadi yoki qaytaradi |
| alignSelf | Flex konteyner ichidagi tanlangan elementlarning tekislanishini o‘rnatadi yoki qaytaradi |
| animation | animationPlayState xususiyatidan tashqari quyidagi barcha animatsiya xususiyatlari uchun qisqartma (shorthand) xususiyat |
| animationDelay | Animatsiya qachon boshlanishini o‘rnatadi yoki qaytaradi |
| animationDirection | Animatsiya navbatdagi sikllarda teskari yo‘nalishda ijro etilishi yoki etilmasligini o‘rnatadi yoki qaytaradi |
| animationDuration | Animatsiya bir siklni tugatishi uchun necha soniya yoki millisoniya ketishini o‘rnatadi yoki qaytaradi |
| animationFillMode | Animatsiya bajarilmayotgan vaqtda u qaysi qiymatlarni qo‘llashini o‘rnatadi yoki qaytaradi |
| animationIterationCount | Animatsiya necha marta ijro etilishi kerakligini o‘rnatadi yoki qaytaradi |
| animationName | @keyframes animatsiyasi uchun nomni o‘rnatadi yoki qaytaradi |
| animationTimingFunction | Animatsiyaning tezlik egri chizig‘ini o‘rnatadi yoki qaytaradi |
| animationPlayState | Animatsiya ishlayotgani yoki pauza qilinganini o‘rnatadi yoki qaytaradi |
| background | Barcha fon (background) xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| backgroundAttachment | Fon rasmi (background-image) qotirilgan bo‘lishi yoki sahifa bilan birga aylanishini o‘rnatadi yoki qaytaradi |
| backgroundColor | Elementning fon rangini (background-color) o‘rnatadi yoki qaytaradi |
| backgroundImage | Element uchun fon rasmini (background-image) o‘rnatadi yoki qaytaradi |
| backgroundPosition | Fon rasmining (background-image) boshlang‘ich joylashuvini o‘rnatadi yoki qaytaradi |
| backgroundRepeat | Fon rasmi (background-image) qanday takrorlanishini (plitkadek terilishini) o‘rnatadi yoki qaytaradi |
| backgroundClip | Fonning bo‘yaladigan sohasini o‘rnatadi yoki qaytaradi |
| backgroundOrigin | Fon rasmlarining joylashish sohasini o‘rnatadi yoki qaytaradi |
| backgroundSize | Fon rasmining o‘lchamini o‘rnatadi yoki qaytaradi |
| backfaceVisibility | Element ekranga orqa tomoni bilan o‘girilganda ko‘rinishi yoki ko‘rinmasligini o‘rnatadi yoki qaytaradi |
| border | borderWidth, borderStyle va borderColor qiymatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| borderBottom | Barcha borderBottom xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| borderBottomColor | Pastki chegara rangini o‘rnatadi yoki qaytaradi |
| borderBottomLeftRadius | Pastki chap burchak chegarasining shaklini o‘rnatadi yoki qaytaradi |
| borderBottomRightRadius | Pastki o‘ng burchak chegarasining shaklini o‘rnatadi yoki qaytaradi |
| borderBottomStyle | Pastki chegara uslubini o‘rnatadi yoki qaytaradi |
| borderBottomWidth | Pastki chegara kengligini o‘rnatadi yoki qaytaradi |
| borderCollapse | Jadval chegaralari bitta chegaraga birlashtirilishi yoki birlashtirilmasligini o‘rnatadi yoki qaytaradi |
| borderColor | Element chegarasining rangini o‘rnatadi yoki qaytaradi (to‘rttagacha qiymatga ega bo‘lishi mumkin) |
| borderImage | Barcha borderImage xususiyatlarini o‘rnatish yoki qaytarish uchun qisqartma (shorthand) xususiyat |
| borderImageOutset | Chegara rasmi sohasi chegara qutisidan (border box) qancha tashqariga chiqishini o‘rnatadi yoki qaytaradi |
| borderImageRepeat | Rasmli chegara (image-border) takrorlanishi, yaxlitlanishi yoki cho‘zilishini o‘rnatadi yoki qaytaradi |
| borderImageSlice | Rasmli chegaraning (image-border) ichkariga siljishlarini o‘rnatadi yoki qaytaradi |
| borderImageSource | Chegara sifatida ishlatiladigan rasmni o‘rnatadi yoki qaytaradi |
| borderImageWidth | Rasmli chegaraning (image-border) kengliklarini o‘rnatadi yoki qaytaradi |
| borderLeft | Barcha borderLeft xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| borderLeftColor | Chap chegara rangini o‘rnatadi yoki qaytaradi |
| borderLeftStyle | Chap chegara uslubini o‘rnatadi yoki qaytaradi |
| borderLeftWidth | Chap chegara kengligini o‘rnatadi yoki qaytaradi |
| borderRadius | To‘rtta borderRadius xususiyatining barchasini o‘rnatish yoki qaytarish uchun qisqartma (shorthand) xususiyat |
| borderRight | Barcha borderRight xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| borderRightColor | O‘ng chegara rangini o‘rnatadi yoki qaytaradi |
| borderRightStyle | O‘ng chegara uslubini o‘rnatadi yoki qaytaradi |
| borderRightWidth | O‘ng chegara kengligini o‘rnatadi yoki qaytaradi |
| borderSpacing | Jadval kataklari orasidagi masofani o‘rnatadi yoki qaytaradi |
| borderStyle | Element chegarasining uslubini o‘rnatadi yoki qaytaradi (to‘rttagacha qiymatga ega bo‘lishi mumkin) |
| borderTop | Barcha borderTop xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| borderTopColor | Yuqori chegara rangini o‘rnatadi yoki qaytaradi |
| borderTopLeftRadius | Yuqori chap burchak chegarasining shaklini o‘rnatadi yoki qaytaradi |
| borderTopRightRadius | Yuqori o‘ng burchak chegarasining shaklini o‘rnatadi yoki qaytaradi |
| borderTopStyle | Yuqori chegara uslubini o‘rnatadi yoki qaytaradi |
| borderTopWidth | Yuqori chegara kengligini o‘rnatadi yoki qaytaradi |
| borderWidth | Element chegarasining kengligini o‘rnatadi yoki qaytaradi (to‘rttagacha qiymatga ega bo‘lishi mumkin) |
| bottom | Joylashtirilgan (positioned) elementning pastki joylashuvini o‘rnatadi yoki qaytaradi |
| boxDecorationBreak | Sahifa uzilishida (inline elementlar uchun esa qator uzilishida) element foni va chegarasining xatti-harakatini o‘rnatadi yoki qaytaradi. |
| boxShadow | Qutiga bir yoki bir nechta soya (drop-shadow) qo‘shadi |
| boxSizing | Muayyan elementlarni ma’lum bir sohaga ma’lum tarzda moslashtirib belgilash imkonini beradi |
| captionSide | Jadval sarlavhasining (caption) joylashuvini o‘rnatadi yoki qaytaradi |
| caretColor | Elementdagi matn kursori (caret) rangini o‘rnatadi yoki qaytaradi |
| clear | Elementning suzuvchi (floating) obyektlarga nisbatan joylashuvini o‘rnatadi yoki qaytaradi |
| clip | Joylashtirilgan (positioned) elementning qaysi qismi ko‘rinishini o‘rnatadi yoki qaytaradi |
| color | Matn rangini o‘rnatadi yoki qaytaradi |
| columnCount | Element nechta ustunga bo‘linishi kerakligini o‘rnatadi yoki qaytaradi |
| columnFill | Ustunlar qanday to‘ldirilishini o‘rnatadi yoki qaytaradi |
| columnGap | Ustunlar orasidagi oraliqni o‘rnatadi yoki qaytaradi |
| columnRule | Barcha columnRule xususiyatlarini o‘rnatish yoki qaytarish uchun qisqartma (shorthand) xususiyat |
| columnRuleColor | Ustunlar orasidagi ajratuvchi chiziq rangini o‘rnatadi yoki qaytaradi |
| columnRuleStyle | Ustunlar orasidagi ajratuvchi chiziq uslubini o‘rnatadi yoki qaytaradi |
| columnRuleWidth | Ustunlar orasidagi ajratuvchi chiziq kengligini o‘rnatadi yoki qaytaradi |
| columns | columnWidth va columnCount qiymatlarini o‘rnatish yoki qaytarish uchun qisqartma (shorthand) xususiyat |
| columnSpan | Element nechta ustunni egallashi kerakligini o‘rnatadi yoki qaytaradi |
| columnWidth | Ustunlar kengligini o‘rnatadi yoki qaytaradi |
| content | Yaratilgan kontentni joylashtirish uchun :before va :after psevdoelementlari bilan ishlatiladi |
| counterIncrement | Bir yoki bir nechta hisoblagichni oshiradi |
| counterReset | Bir yoki bir nechta hisoblagichni yaratadi yoki qayta o‘rnatadi |
| cursor | Sichqoncha ko‘rsatkichi uchun ko‘rsatiladigan kursor turini o‘rnatadi yoki qaytaradi |
| direction | Matn yo‘nalishini o‘rnatadi yoki qaytaradi |
| display | Elementning ko‘rsatilish turini (display) o‘rnatadi yoki qaytaradi |
| emptyCells | Bo‘sh kataklarning chegarasi va foni ko‘rsatilishi yoki ko‘rsatilmasligini o‘rnatadi yoki qaytaradi |
| filter | Rasm filtrlarini (xiralashtirish va to‘yinganlik kabi vizual effektlarni) o‘rnatadi yoki qaytaradi |
| flex | Elementning qolganlariga nisbatan uzunligini o‘rnatadi yoki qaytaradi |
| flexBasis | Flex elementning boshlang‘ich uzunligini o‘rnatadi yoki qaytaradi |
| flexDirection | Flex elementlarning yo‘nalishini o‘rnatadi yoki qaytaradi |
| flexFlow | flexDirection va flexWrap xususiyatlari uchun qisqartma (shorthand) xususiyat |
| flexGrow | Element qolganlariga nisbatan qanchalik kattalashishini o‘rnatadi yoki qaytaradi |
| flexShrink | Element qolganlariga nisbatan qanday kichrayishini o‘rnatadi yoki qaytaradi |
| flexWrap | Flex elementlar keyingi qatorga o‘tishi yoki o‘tmasligini o‘rnatadi yoki qaytaradi |
| cssFloat | Elementning gorizontal tekislanishini o‘rnatadi yoki qaytaradi |
| font | fontStyle, fontVariant, fontWeight, fontSize, lineHeight va fontFamily qiymatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| fontFamily | Matn uchun shrift oilasini o‘rnatadi yoki qaytaradi |
| fontSize | Matnning shrift o‘lchamini o‘rnatadi yoki qaytaradi |
| fontStyle | Shrift uslubi normal, kursiv (italic) yoki qiya (oblique) bo‘lishini o‘rnatadi yoki qaytaradi |
| fontVariant | Shrift kichik bosh harflarda (small caps) ko‘rsatilishi kerakligini o‘rnatadi yoki qaytaradi |
| fontWeight | Shriftning qalinligini o‘rnatadi yoki qaytaradi |
| fontSizeAdjust | Zaxira shriftga o‘tilganda (font fallback) matnning o‘qilishini saqlab qoladi |
| fontStretch | Shrift oilasidan oddiy, siqilgan yoki kengaytirilgan ko‘rinishni tanlaydi |
| hangingPunctuation | Tinish belgisi qator qutisidan (line box) tashqarida joylashishi mumkinligini belgilaydi |
| height | Elementning balandligini o‘rnatadi yoki qaytaradi |
| hyphens | Paragraflar ko‘rinishini yaxshilash uchun so‘zlarni qanday bo‘g‘inlarga bo‘lishni belgilaydi |
| icon | Muallifga elementni uning ikonka ko‘rinishidagi ekvivalenti bilan bezash imkonini beradi |
| imageOrientation | Foydalanuvchi agenti (brauzer) rasmga qo‘llaydigan o‘ngga yoki soat mili yo‘nalishidagi burilishni belgilaydi |
| isolation | Element yangi qatlamlash kontekstini (stacking context) yaratishi kerakligini belgilaydi |
| justifyContent | Elementlar mavjud bo‘sh joyning hammasini egallamaganda, flex konteyner ichidagi elementlar orasidagi tekislashni o‘rnatadi yoki qaytaradi. |
| left | Joylashtirilgan (positioned) elementning chap joylashuvini o‘rnatadi yoki qaytaradi |
| letterSpacing | Matndagi belgilar orasidagi masofani o‘rnatadi yoki qaytaradi |
| lineHeight | Matndagi qatorlar orasidagi masofani o‘rnatadi yoki qaytaradi |
| listStyle | listStyleImage, listStylePosition va listStyleType qiymatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| listStyleImage | Ro‘yxat bandi markeri sifatida rasmni o‘rnatadi yoki qaytaradi |
| listStylePosition | Ro‘yxat bandi markerining joylashuvini o‘rnatadi yoki qaytaradi |
| listStyleType | Ro‘yxat bandi markerining turini o‘rnatadi yoki qaytaradi |
| margin | Elementning tashqi bo‘shliqlarini (margin) o‘rnatadi yoki qaytaradi (to‘rttagacha qiymatga ega bo‘lishi mumkin) |
| marginBottom | Elementning pastki tashqi bo‘shliqini (margin) o‘rnatadi yoki qaytaradi |
| marginLeft | Elementning chap tashqi bo‘shliqini (margin) o‘rnatadi yoki qaytaradi |
| marginRight | Elementning o‘ng tashqi bo‘shliqini (margin) o‘rnatadi yoki qaytaradi |
| marginTop | Elementning yuqori tashqi bo‘shliqini (margin) o‘rnatadi yoki qaytaradi |
| maxHeight | Elementning maksimal balandligini o‘rnatadi yoki qaytaradi |
| maxWidth | Elementning maksimal kengligini o‘rnatadi yoki qaytaradi |
| minHeight | Elementning minimal balandligini o‘rnatadi yoki qaytaradi |
| minWidth | Elementning minimal kengligini o‘rnatadi yoki qaytaradi |
| navDown | Pastga strelka navigatsiya tugmasi bosilganda qayerga o‘tishni o‘rnatadi yoki qaytaradi |
| navIndex | Element uchun tab tartibini o‘rnatadi yoki qaytaradi |
| navLeft | Chapga strelka navigatsiya tugmasi bosilganda qayerga o‘tishni o‘rnatadi yoki qaytaradi |
| navRight | O‘ngga strelka navigatsiya tugmasi bosilganda qayerga o‘tishni o‘rnatadi yoki qaytaradi |
| navUp | Yuqoriga strelka navigatsiya tugmasi bosilganda qayerga o‘tishni o‘rnatadi yoki qaytaradi |
| objectFit | Almashtiriladigan (replaced) element tarkibi uning balandligi va kengligi bilan belgilangan qutiga qanday moslashtirilishini belgilaydi |
| objectPosition | Almashtiriladigan (replaced) elementning o‘z qutisi ichidagi tekislanishini belgilaydi |
| opacity | Element uchun shaffoflik darajasini (opacity) o‘rnatadi yoki qaytaradi |
| order | Flex elementning qolganlariga nisbatan tartibini o‘rnatadi yoki qaytaradi |
| orphans | Element ichida sahifa uzilishi sodir bo‘lganda sahifa pastida qolishi kerak bo‘lgan qatorlarning minimal sonini o‘rnatadi yoki qaytaradi |
| outline | Barcha outline xususiyatlarini bitta e’londa o‘rnatadi yoki qaytaradi |
| outlineColor | Element atrofidagi kontur (outline) rangini o‘rnatadi yoki qaytaradi |
| outlineOffset | Konturni (outline) siljitadi va uni chegara chetidan tashqarida chizadi |
| outlineStyle | Element atrofidagi kontur (outline) uslubini o‘rnatadi yoki qaytaradi |
| outlineWidth | Element atrofidagi kontur (outline) kengligini o‘rnatadi yoki qaytaradi |
| overflow | Element qutisidan tashqariga chiqib ko‘rsatiladigan kontent bilan nima qilishni o‘rnatadi yoki qaytaradi |
| overflowX | Kontent element tarkibi sohasidan toshib chiqsa, uning chap/o‘ng chetlari bilan nima qilishni belgilaydi |
| overflowY | Kontent element tarkibi sohasidan toshib chiqsa, uning yuqori/pastki chetlari bilan nima qilishni belgilaydi |
| padding | Elementning ichki bo‘shliqini (padding) o‘rnatadi yoki qaytaradi (to‘rttagacha qiymatga ega bo‘lishi mumkin) |
| paddingBottom | Elementning pastki ichki bo‘shliqini (padding) o‘rnatadi yoki qaytaradi |
| paddingLeft | Elementning chap ichki bo‘shliqini (padding) o‘rnatadi yoki qaytaradi |
| paddingRight | Elementning o‘ng ichki bo‘shliqini (padding) o‘rnatadi yoki qaytaradi |
| paddingTop | Elementning yuqori ichki bo‘shliqini (padding) o‘rnatadi yoki qaytaradi |
| pageBreakAfter | Elementdan keyingi sahifa uzilishi xatti-harakatini o‘rnatadi yoki qaytaradi |
| pageBreakBefore | Elementdan oldingi sahifa uzilishi xatti-harakatini o‘rnatadi yoki qaytaradi |
| pageBreakInside | Element ichidagi sahifa uzilishi xatti-harakatini o‘rnatadi yoki qaytaradi |
| perspective | 3D elementlar qanday ko‘rinishini belgilovchi perspektivani o‘rnatadi yoki qaytaradi |
| perspectiveOrigin | 3D elementlarning pastki joylashuvini o‘rnatadi yoki qaytaradi |
| position | Element uchun ishlatiladigan joylashtirish usuli turini o‘rnatadi yoki qaytaradi (static, relative, absolute yoki fixed) |
| quotes | Ichki iqtiboslar uchun qo‘shtirnoq turini o‘rnatadi yoki qaytaradi |
| resize | Foydalanuvchi element o‘lchamini o‘zgartira olishi yoki olmasligini o‘rnatadi yoki qaytaradi |
| right | Joylashtirilgan (positioned) elementning o‘ng joylashuvini o‘rnatadi yoki qaytaradi |
| scrollBehavior | Foydalanuvchi aylantiriladigan quti ichidagi havolani bosganda, aylantirish holati to‘g‘ridan-to‘g‘ri sakrash o‘rniga silliq animatsiya bilan o‘zgarishini belgilaydi |
| tableLayout | Jadval kataklari, qatorlari va ustunlarini joylashtirish usulini o‘rnatadi yoki qaytaradi |
| tabSize | Tabulyatsiya belgisining uzunligini o‘rnatadi yoki qaytaradi |
| textAlign | Matnning gorizontal tekislanishini o‘rnatadi yoki qaytaradi |
| textAlignLast | text-align "justify" bo‘lganda blokning oxirgi qatori yoki majburiy qator uzilishidan oldingi qator qanday tekislanishini o‘rnatadi yoki qaytaradi |
| textDecoration | Matn bezagini o‘rnatadi yoki qaytaradi |
| textDecorationColor | Matn bezagi (text-decoration) rangini o‘rnatadi yoki qaytaradi |
| textDecorationLine | Matn bezagidagi (text-decoration) chiziq turini o‘rnatadi yoki qaytaradi |
| textDecorationStyle | Matn bezagidagi chiziq uslubini o‘rnatadi yoki qaytaradi |
| textIndent | Matn birinchi qatorining xat boshi chekinishini o‘rnatadi yoki qaytaradi |
| textJustify | text-align "justify" bo‘lganda ishlatiladigan tekislash usulini o‘rnatadi yoki qaytaradi |
| textOverflow | Matn o‘zini o‘rab turgan elementdan toshib chiqqanda nima sodir bo‘lishini o‘rnatadi yoki qaytaradi |
| textShadow | Matnning soya effektini o‘rnatadi yoki qaytaradi |
| textTransform | Matn harflarining katta-kichikligini o‘rnatadi yoki qaytaradi |
| top | Joylashtirilgan (positioned) elementning yuqori joylashuvini o‘rnatadi yoki qaytaradi |
| transform | Elementga 2D yoki 3D transformatsiyani qo‘llaydi |
| transformOrigin | Transformatsiya qilingan elementlarning joylashuvini o‘rnatadi yoki qaytaradi |
| transformStyle | Ichma-ich joylashgan elementlar 3D fazoda qanday render qilinishini o‘rnatadi yoki qaytaradi |
| transition | To‘rtta transition xususiyatini o‘rnatish yoki qaytarish uchun qisqartma (shorthand) xususiyat |
| transitionProperty | O‘tish (transition) effekti qaysi CSS xususiyati uchun ekanini o‘rnatadi yoki qaytaradi |
| transitionDuration | O‘tish (transition) effekti tugashi uchun necha soniya yoki millisoniya ketishini o‘rnatadi yoki qaytaradi |
| transitionTimingFunction | O‘tish (transition) effektining tezlik egri chizig‘ini o‘rnatadi yoki qaytaradi |
| transitionDelay | O‘tish (transition) effekti qachon boshlanishini o‘rnatadi yoki qaytaradi |
| unicodeBidi | Bitta hujjatda bir nechta tilni qo‘llab-quvvatlash uchun matnni qayta belgilash (override) kerakligini o‘rnatadi yoki qaytaradi |
| userSelect | Element matnini belgilash (tanlash) mumkin yoki mumkin emasligini o‘rnatadi yoki qaytaradi |
| verticalAlign | Element ichidagi kontentning vertikal tekislanishini o‘rnatadi yoki qaytaradi |
| visibility | Element ko‘rinishi kerakligini o‘rnatadi yoki qaytaradi |
| whiteSpace | Matndagi tabulyatsiyalar, qator uzilishlari va bo‘sh joylar qanday qayta ishlanishini o‘rnatadi yoki qaytaradi |
| width | Elementning kengligini o‘rnatadi yoki qaytaradi |
| wordBreak | CJK bo‘lmagan yozuvlar uchun qator uzilish qoidalarini o‘rnatadi yoki qaytaradi |
| wordSpacing | Matndagi so‘zlar orasidagi masofani o‘rnatadi yoki qaytaradi |
| wordWrap | Uzun, bo‘linmaydigan so‘zlarni bo‘lib, keyingi qatorga o‘tkazish imkonini beradi |
| widows | Sahifa yuqorisida ko‘rinishi kerak bo‘lgan element qatorlarining minimal sonini o‘rnatadi yoki qaytaradi |
| zIndex | Joylashtirilgan (positioned) elementning qatlam tartibini (stack order) o‘rnatadi yoki qaytaradi |
Style obyektiga murojaat qilish
Style obyektiga hujjatning head bo‘limidan yoki muayyan HTML element(lar)dan murojaat qilish mumkin.
Hujjatning head bo‘limidan style obyekt(lar)iga murojaat qilish:
Ko‘rsatilgan elementning style obyektiga murojaat qilish:
Style obyektini yaratish
document.createElement() metodi yordamida <style> elementini yaratishingiz mumkin:
Shuningdek, mavjud elementning uslub xususiyatlarini ham o‘rnatishingiz mumkin:
Tegishli sahifalar
HTML darsligi: HTML CSS
CSS darsligi: CSS darsligi
HTML ma’lumotnomasi: HTML <style> tegi
CSS ma’lumotnomasi: CSS xususiyatlari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!