Css dan darslar

Atribut selectorlar:

Siz shuningdek o’ziga xos atributlar bilan HTML elementlariga murojaat qila olasiz. Bu still qoidasi pastda barcha kiruvchi elementlarga moslashtiriladi (tip atributi matnning qiymatiga ega bo’lishiga).

input [type = “text”] {

color: #000000;

}

Bu usulning afzalligi elementi natija bermagan va bu rang faqatgina istalgan matn maydonlariga murojaat qilgan.

Atribut selectoriga murojaat qiladigan qoidalar quyidagilar.

p[lang] – lang atributi bilan barcha paragraph elementlarini tanlaydi.

p[lang=”fr”] – “fr” qiymatiga ega bo’lgan lang atributi barcha paragraph elementlarini tanlaydi.

p[lang~=”fr”] – barcha paragraph elementlarini tanlaydi. lang atributi “fr” so’zidan iborat.

p[lang|=”en”] – barcha parageaf elementlarini tanlaydi. lang atributi “en” yoki “en-” qiymatlaridan iborat bo’ladi.

Ko’p sonli stil (ko’rinish) qoidalari:

Bitta element uchun ko’p sonli ko’rinish qoidalarini aniqlashga to’g’ri kelishi mumkin. Siz bu qoidalarni ko’p sonli xossalar va mos keluvchi qiymatlarni birlashtirish orqali aniqlashingiz mumkin. Quyidagi misolda aniqlanganidek amalga oshiramiz.

h1 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}

Bu yerda barcha xossalar va qiymatlar juftliklari semi colon(;) orqali ajratiladi. Siz ularni bitta yoki ko’p sonli qatorlarda saqlashingi mumkin. yaxshiroq o’qilishi uchun biz ularni ajratilgan qatorlarda saqlaymiz.

Yuqoridagi blokda aytib o’tilgan xossalar haqida xavotir olmang. Bu xossalar kelgusi darslarda tushuntiriladi va bu xossalarni to’liq detallarini topishingiz mumkin.

Guruhlash selectori:

Agar yoqtirsangiz juda ko’p selectorlar ko’rinishiga murojaat qilishingiz mumkin. faqatgina bu selectorlar quyidagi misolda berilganidek vergul bilan ajratiladi.

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}

Bu ko’rinish qoidasi h1, h2 va h3 elementlarga uyg’unligini aniqlaydi. Ro’yxatning bu buyrug’i o’rinsiz. Selectordagi barcha elementlar ularga murojaat qiluvchi mos keluvchi avlodlarga ega bo’ladi.

Turli xil id selectorlar bilan birgalikda quyidagidek birlashtirish mumkin.

#content, #footer, #supplement {

position: absolute;

left: 510px;

width: 200px;

}