Hammasi emas, lekin etarli

XHTMLni, shuningdek CSS -ni kitoblardan o'rganadigan odamlar, ko'pincha CSS voqealari to'liq tasvirlanmaganligini payqashadi. Xususan, faqat voqealar hover, faol, tashrif buyurilgan. Ko'p boshqa CSS tadbirlari bor va ular taqdim etadigan imkoniyatlar juda katta.

Bu voqealarning to'liq ro'yxati emas, faqat zamonaviy veb -dizaynerga kerak bo'ladigan voqealar.

Agar siz blokdan keyin hodisani tayinlasangiz, blokdan keyin uslublar jadvalida aniqlangan kod ko'rsatiladi. Kodni aniqlash uchun CSS buyrug'idan foydalaning - kontent sintaksisi mazmunli: "XHTML kodi".

Bular. butun jamoa shunday ko'rinishi mumkin:
#someId: keyin
(kontent: "XHTML kodi"): oldin Keyingi kabi ishlaydi, lekin kodni elementdan oldin chiqaradi: first-child Boshqa elementning birinchi bolasi uchun uslubni belgilaydi.

Faraz qilaylik, bu hodisani h1 tagiga qo'llagan holda, birinchi darajadagi birinchi va birinchi sarlavha tegishli uslub bilan ko'rsatiladi. Ayniqsa, ushbu hodisani ichki tag uslublari (qatlamli) uchun ishlatish, masalan, quyidagi kabi:

body ol li: first-child (...) (ya'ni, barcha ro'yxatlarda, birinchi li element, lekin ul emas, berilgan uslub sozlamalari bilan ko'rsatiladi)

: last-child Boshqa elementlarning oxirgi bolasi uchun uslubni belgilaydi. : focus Fokuslanadigan shakl elementlari uslubini belgilaydi, ya'ni. siz bosganlar. Masalan, siz faol matn kiritish maydonini faol bo'lmagan maydondan farqli ravishda qilishingiz mumkin. : hover Hover elementining uslubi. Barcha bloklar va matnlar bilan foydalanish mumkin (ilgari biz faqat havolalarni ko'rib chiqardik). : lang ( x) Elementning tarkibini hech qanday o'zgartirmagan holda, elementni ma'lum tilga xaritaga joylashtiradi. Bunday teg, masalan, turli manbalarga havolalarni ajratib ko'rsatish uchun ishlatilishi mumkin. O'rniga x ikki raqamli xalqaro til belgisini qo'ying yoki boshqacha qilib aytganda, domen zonasi nomi. Masalan, Rossiya uchun ru, Amerika uchun Biz, va boshqalar. Agar element bir vaqtning o'zida bir nechta tilni belgilashi kerak bo'lsa, ular bo'sh joysiz defis bilan ajratilishi kerak (har bir til belgilaydigan uslublarning ahamiyatini kamaytirish maqsadida). : tashrif buyurilgan havola uslubini belgilaydi: nth-child (x) Maxsus elementlar yoki bitta aniq elementlar uchun uslubni belgilaydi. x ifodalanishi mumkin:

• raqam. Bunday holda, faqat 1 ta element tanlanadi.
• g'alati (barcha toq elementlar) yoki hatto (barcha juft elementlar) ifodalar.
• a + b ifodasi, bu erda n o'zgarmaydi, a va b ixtiyoriy sonlardir. Masalan, 7n + 4. 7 ga bo'linib, qolgan 4ni beradigan barcha elementlar ajratib ko'rsatiladi. (4, 11, 18, va hokazo). Agar a yoki b 0 ga teng bo'lsa, ularni olib tashlash mumkin. N elementlar 0 dan n-1 gacha sanaladi

Diqqat! Bu xatti -harakatlar (selektor) faqat yangi CSS 3 standartida mavjud va faqat zamonaviy brauzerlar tomonidan qo'llab -quvvatlanadi. : nth-last-child (x) nth-child (x) bilan bir xil, lekin oxirgi n-1 elementdan 0gacha hisoblash: emply hech qanday avlodlari bo'lmagan elementga uslub qo'shadi, ya'ni. bo'sh tegga. : yoqilgan Tanlangan, tekshirilgan shakl elementi uchun uslub. Tugma, kirish, guruh, variant, tanlash, faqat matnli maydon elementlari uchun. Bu va keyingi ikkita selektor faqat CSS 3-da: o'chirilgan Yoqilgani bilan bir xil, lekin faol bo'lmagan shakl elementlari uchun: faqat radio va belgilash katagiga belgilandi. Tanlangan elementlarning uslubini belgilaydi. : birinchi harf Matndagi birinchi harfning uslubini belgilaydi (qalpoqcha deb ham ataladi). Faqat CSS uslublash buyruqlari qo'llab -quvvatlanadi, belgilash emas. : birinchi qator Yuqoridagi kabi, lekin matnning birinchi qatori uchun.

CSS tanlovchilarini chuqur ko'rib chiqish

Yuqorida tasvirlangan materiallar ko'pchilik uchun etarli bo'ladi, lekin hamma uchun emas. Katta kompaniyalar saytlari, ommaviy loyihalar, ijtimoiy tarmoqlar juda murakkab CSS tanlovchilaridan foydalanadi va ba'zida yuqorida tavsiflangan funksiyalar etarli emas. Bundan tashqari, CSS server tomonidagi dasturlash tillari bilan o'zaro ishlashi kerak, ya'ni. ko'pincha CSS -ga ma'lum sahifalar avtomatik tarzda yaratilgan. Shu bilan birga, u to'g'ri va muammosiz ishlashi kerak.

Biz elementlarning irsiyligi haqida aytib o'tdik. Endi biz uni yanada chuqurroq tahlil qilamiz.

CSS har xil turdagi meros yoki elementlarni tarbiyalash qoidalarini belgilashi mumkin. Ularning barchasi faqat qoida qo'llaniladigan elementlarni tanlash uchun xizmat qiladi.

Kombinatorlar (merosga asoslangan uslublar o'rtasida bog'lanishlar yaratish)
Qo'shni aka -uka (+)	Bu kombinator bir -birini zudlik bilan ta'qib etadigan 2 elementni belgilaydi (ular o'rtasida o'sha 2 element bilan bir xil ota -ona bo'lgan boshqa elementlar yo'q, lekin ulardan meros bo'lib o'tgan elementlar bo'lishi mumkin) va bir xil ota -onaga ega. Uslub bir vaqtning o'zida ikkala elementga ham qo'llaniladi. Belgilar sintaksisi (bo'shliqlar e'tiborga olinmaydi) E + F (...) bu erda E - birinchi element, F - ikkinchi element. Masalan, h1 + h2 (shrift oilasi: serif) Bu yozuv faqat bitta ota -onaga ega bo'lgan ketma -ket h1 va h2 elementlarining uslubini belgilaydi. Agar h2dan keyin boshqa h2 yorlig'i bo'lsa, uslub unga qo'llanilmaydi.
Bola (>) Kombinator	Kombinator bitta elementning bevosita avlodlari bo'lgan barcha elementlarni aniqlaydi. Uyalashning bir necha darajalarini qo'llab -quvvatlaydi, masalan: tana> div> p (...) Ya'ni, uslub, uslub faqat tananing tagiga tegishli bo'lgan barcha divlarning avlodlari bo'lgan paragraflarga qo'llaniladi.
Avlod	Elementlar orasidagi ixtiyoriy munosabatni belgilaydi. Ya'ni, elementlar to'g'ridan -to'g'ri avlod emas, balki bitta elementning avlodlari bo'lishi kerak. Sintaksis (bo'sh joy kerak): E F (...) Masalan: table.table1 td [...] Ya'ni, uslub jadvalning 1 -sinfli jadvalining barcha keyingi ustunlarida aniqlanadi, hatto bu jadvalda boshqa jadvallar bo'lsa ham. Uslub meros qilib olingan jadval ustunlariga ham qo'llaniladi.
Umumiy aka -uka (~)	Sintaksis E ~ F. Kombinator qo'shni opa -singil bilan bir xil funktsiyani bajaradi, faqat E va F o'rtasida bir xil darajadagi elementlar bo'lishi mumkin, F esa bir nechta bo'lishi mumkin.
Atributlar. Atributlarni tanlash. O'zingizning atributlaringizni yaratish
Tenglik [=]	Har bir teg atributga ega bo'lishi mumkin (masalan, deyarli har qanday teg bo'lishi mumkin bo'lgan id atributi yoki kenglik atributi (faqat bloklar uchun)). Siz o'zingizning atributingizni yaratishingiz mumkin, bu matnli satr. Masalan attr. O'zingizning atributlaringizni yaratish CSS -da atributlarni tanlash uchun juda qulaydir. Atributlar kombinatorlar bilan birgalikda ishlatilishi mumkin. Tenglik, ko'rsatilgan atribut aniq ko'rsatilgan qiymatga teng bo'lgan barcha elementlarning uslubini belgilaydi. Sintaksis: {...} Ko'rib turganingizdek, bu erda teglar aniqlanmagan. Uslublar atributga ega bo'lgan barcha elementlar uchun belgilanadi att qiymatiga teng val... Att va val identifikatorlarning qiymatlarini olishi mumkin (masalan, att uchun har qanday o'rganilgan atributlar bo'lishi mumkin, val - hech kim, blok va boshqalar uchun) va string qiymatlari, ya'ni. faqat bir so'z (masalan, yozuv bilan barcha elementlarni belgilaydi<... attr="test" ...="">).
Mavjudlik	Qiymatidan qat'i nazar, atributga ega bo'lgan barcha elementlarni belgilaydi. Sintaksis: {...} att - atribut (yoki satr qiymati, ya'ni o'ziga xos atribut)
Prefiks [^ =]	Val bilan boshlanadigan att atributiga ega elementlarni belgilaydi. Sintaksis: {...} att - atribut (yoki satr qiymati, ya'ni o'z atributi), val - atribut qiymati Juda yaxshi misol: Vikipediya. Bu saytda Vikipediyadan boshqa saytlarning barcha havolalari ortida belgi (o'q) bor. Mana bu uslubni yozishga imkon beruvchi postning misoli: : keyin (kontent) "}
Sufiks [$ =]	Val bilan tugaydigan att atributiga ega bo'lgan elementlarni belgilaydi. Sintaksis {...} Bunday atribut yaqinda rasmlarni har xil havolalar oldiga qo'yish uchun ishlatila boshlandi, bu esa foydalanuvchiga qaysi faylga, qaysi havola yuborilishini ko'rsatib beradi. Masalan, havoladan oldin PDF fayllar PDF belgisini qo'yishingiz mumkin. Misol: : oldin (kontent: " "}
Substring [* =]	Yozuv sintaksisi: {...} Val pastki satrini o'z ichiga olgan att atributiga ega bo'lgan barcha elementlarni tanlaydi. Masalan, "54" - "132 54 6 "," val " -" qiymat "pastki satri va boshqalar.
Bo'sh joy [~ =]	Bo'shliq Substring bilan bir xil, lekin pastki satr so'z bo'lishi kerak, ya'ni. qatorda bo'sh joylar bilan o'ralgan.
Defis [| =]	Substring bilan bir xil, lekin pastki satr atributning bir qismi bo'lishi va boshqa qismi (lar) bilan defis bilan ajratilishi kerak. Misol: {...} lang atributiga ega bo'lgan barcha teglarni tanlaydi, ularning qiymati en, masalan en-ru, ru-de-en va boshqalarni o'z ichiga oladi.

Bu sizning XHTML + CSS haqidagi bilimingizni yakunlaydi. Keyingi darslar JavaScript haqida bo'ladi.

Selektorlar CSS -ning eng muhim qismi bo'lmasa ham. Ular kaskad qiladi va sahifa elementlariga uslublar qanday qo'llanilishini aniqlaydi.

Yaqin vaqtgacha CSS -ning diqqat markazida hech qachon selektsionerlar bo'lmagan. Vaqti -vaqti bilan tanlovchilar spetsifikatsiyasida kichik yangilanishlar bo'lgan, lekin hech qachon haqiqiy yaxshilanishlar bo'lmagan. Yaxshiyamki, oxirgi paytlarda selektsionerlarga ko'proq e'tibor qaratilmoqda, shuning uchun har xil turdagi elementlar va elementlarni har xil shtatlarda qanday tanlashni ko'rib chiqaylik.

CSS3 yangi tanlovchilarni olib keldi, yangi imkoniyatlar olamini ochdi va mavjud amaliyotni takomillashtirdi. Bu erda biz ham eski, ham yangi tanlovchilarni va ulardan qanday yaxshiroq foydalanishni muhokama qilamiz.

Oddiy tanlovchilar

CSS3 -da taklif qilinadigan murakkabroq tanlovchilarga chuqurroq kirishdan oldin, bugungi kunda eng keng tarqalgan selektorlarni ko'rib chiqaylik. Bu selektorlarga tur tanlagichlar, sinflar va identifikatorlar kiradi.

Tanlovchi turi elementni uning turiga qarab aniqlaydi, xususan bu element HTML -da qanday e'lon qilinadi. Tanlovchi sinf kerak bo'lganda bir nechta elementlarga qayta qo'llanilishi mumkin bo'lgan sinf atributining qiymatiga asoslangan elementni aniqlaydi va mashhur uslublarni bo'lishishga yordam beradi. Va nihoyat, identifikator id atributining qiymatiga asoslangan elementni belgilaydi, u noyob va har sahifada faqat bir marta ishlatilishi kerak.

H1 (...) .tagline (...) #intro (...)

Bolalar tanlovchilari

Bolalar selektorlari bir -birining elementlarini tanlash imkoniyatini beradi, bu ularni ota -onasining farzandlari qiladi. Bu tanlov ikki xil usulda, bola selektori yoki to'g'ridan -to'g'ri bola selektori yordamida amalga oshirilishi mumkin.

Avlod tanlash

Eng keng tarqalgan bola selektor - bu ma'lum bir ajdoddan keyingi har bir elementga mos keladigan avlod selektori. Bola hujjat daraxtidagi ota-bola munosabati kabi, ota-bobodan keyin darhol kelishi shart emas, lekin ota-boboning har qanday joyida bo'lishi mumkin. Selektsioner elementlar orasidagi bo'sh joy tanlab olinadigan avlod selektorlari ro'yxatning har bir elementi uchun yangi ierarxiya darajasini yaratadi.

H2 selektor maqolasi - avlod selektori va faqat elementlarni tanlaydi

bu element ichida

... E'tibor bering, element qaerda yashamasin

u element ichida bo'lsa

, u har doim tanlanadi. Bundan tashqari, har qanday element

elementdan tashqarida

tanlanmaydi.

Quyida 3 va 5 -qatorlar tanlangan sarlavhalar keltirilgan.

H2 -modda [...]

...

Bu sarlavha tanlanadi

Bu sarlavha tanlanadi

Bolalarni to'g'ridan -to'g'ri tanlash

Ba'zida avloddan kelgan selektsionerlar haddan oshib ketishadi va xohlaganidan ko'proq narsani tanlaydilar. Ba'zida faqat ota -ona elementlarining to'g'ridan -to'g'ri bolalarini tanlash kerak bo'ladi, bu elementlarning har bir nusxasi ajdodning ichki qismiga joylashmagan. Bunday holda, to'g'ridan -to'g'ri bola selektoridan tanlashda ota -ona va bola o'rtasida katta (>) belgisini qo'yish orqali foydalanish mumkin.

Misol uchun, maqola> p faqat elementlar bo'lganda, to'g'ridan -to'g'ri bola tanlagichi

To'g'ridan -to'g'ri element ichida topilgan

... Har qanday element<р>elementdan tashqarida joylashtirilgan

yoki boshqa element ichida joylashtirilgan

tanlanmaydi.

Quyida, 3 -satrdagi xatboshi uning ota -onasining yagona bevosita avlodidir

shuning uchun u tanlanadi.

Maqola> p (...)

Bu paragraf tanlanadi

Tegishli tanlovchilar

Bolalarni qanday tanlashni bilish juda foydali va juda keng tarqalgan. Biroq, birodaru opa -singillar, ya'ni umumiy ajdodlarga tegishli bo'lgan narsalarni ham tanlash kerak bo'lishi mumkin. Bunday namuna olish umumiy opa -singil va qo'shni selektorlar yordamida amalga oshirilishi mumkin.

Birodaru opa -singillar uchun umumiy tanlov

Birodaru opa -singillarning umumiy tanlovi sizga opa -singillariga qarab tanlanadigan elementlarni tanlash imkonini beradi, ya'ni bir xil umumiy ota -onaga ega. Ular selektor ichidagi ikkita element o'rtasida tilde belgisi (~) bilan yaratilgan. Birinchi element shuni ko'rsatadiki, ikkinchi element unga bog'liq bo'lishi kerak va ikkalasi ham bir xil ota -onaga ega bo'lishi kerak.

H2 ~ p selektor - bu umumiy opa -singil, u elementlarni qidiradi

Bu har qanday elementlarga mos keladi

bir xil ota -onada. Elementga

Tanlangan, u har qanday elementdan keyin kelishi kerak

.

5 va 9 -satrlardagi xatboshilar tanlangan, chunki ular hujjat daraxtidagi sarlavhadan keyin keladi va birodar va opa -singillar sarlavhasi bilan bir xil bo'ladi.

H2 ~ p (...)

...

Bu paragraf tanlanadi

Bu paragraf tanlanadi

Qo'shni selektorlar

Ba'zan, bir oz ko'proq nazoratga ega bo'lish maqsadga muvofiq bo'lishi mumkin, shu jumladan birodar va opa -singilni tanlash imkoniyati. Qo'shni selektor faqat opa -singil elementlarini boshqa opa -singil elementidan keyin darhol tanlaydi. Tilda belgi o'rniga, oddiy opa -singil singari, qo'shni selektor selektordagi ikkita element o'rtasida ortiqcha (+) belgidan foydalanadi. Shunga qaramay, birinchi element shuni ko'rsatadiki, ikkinchi element darhol unga ergashishi va u bilan bog'liq bo'lishi kerak va ikkala element ham bir xil ota -onaga ega bo'lishi kerak.

Keling, h2 + p qo'shni selektorini ko'rib chiqaylik. Faqat elementlar tanlanadi

To'g'ridan -to'g'ri elementlardan keyin

... Ikkalasining ham ota -onasi bir bo'lishi kerak.

5 -satrdagi paragraf tanlangan, chunki u birodarlik sarlavhasiga to'g'ri keladi va bir xil ota -onaga ega.

H2 + p (...)

...

Bu paragraf tanlanadi

Qo'shni selektorlarga misol

☰

Kirish (ko'rsatish: yo'q;) yorlig'i, ul (chegara: 1 piksel qattiq # cecfd5; chegara radiusi: 6 piksel;) yorlig'i (rang: # 0087cc; kursor: ko'rsatgich; ko'rsatish: inline-blok; shrift o'lchami: 18 piksel; to'ldirish: 5px 9px; o'tish: hamma .15s osonlik;) yorliq: hover (rang: # ff7b29;) kirish: belgilangan + yorliq (quti-soya: qo'shilgan 0 1px 2px rgba (0, 0, 0, 0.15); rang: # 9799a7 ;) nav (maksimal balandlik: 0; to'lg'azish: yashirin; o'tish: hamma .15s osonlik;) kirish: tekshirilgan ~ nav (maksimal balandlik: 500 piksel;) ul (ro'yxat uslubi: yo'q; chegara: 8px 0 0 0); to'ldirish: 0; kenglik: 100 piksel;) li (chegara-pastki: 1 piksel qattiq # cecfd5;) li: oxirgi bola (chegara-pastki: 0;) a (rang: # 0087cc; ko'rsatish: blok; to'ldirish: 6 piksel 12 piksel; matnni bezatish: yo'q;) a: hover (rang: # ff7b29;)

Atributlarni tanlash

Yuqorida muhokama qilingan umumiy selektorlarning ba'zilari atributlarni tanlash sifatida ham belgilanishi mumkin, bunda element sinf yoki id qiymatiga qarab tanlanadi. Bu sinf va id atributlari tanlovchilari keng qo'llaniladi va juda kuchli, lekin bu faqat boshlanish. Boshqa atributlar tanlovchilari so'nggi yillarda paydo bo'ldi, xususan, CSS3 bilan katta qadam tashladi. Elementlar atributning mavjudligiga va uning qiymatiga qarab tanlanishi mumkin.

Atributlar mavjudligini tanlash

Birinchi atributlar tanlagichi, uning haqiqiy qiymatidan qat'i nazar, bu atributning kiritilishi yoki qo'shilmasligiga qarab elementni aniqlaydi. Agar atribut mavjud yoki yo'qligiga qarab elementni tanlash uchun atribut nomini tanlagichga kvadrat qavs ichida () qo'shing. Kerakli o'ziga xoslik darajasiga qarab kvadrat qavslar har qanday turdagi yoki sinf selektoridan keyin kelishi mumkin.

A (...)

...

Atribut tanlash =

Aniq va aniq belgilangan qiymatga ega bo'lgan elementni aniqlash uchun avvalgidek selektordan foydalanish mumkin, lekin bu safar atribut nomidan keyin kerakli qiymat kvadrat qavs ichiga kiritiladi. Atributning nomi kvadrat qavs ichida bo'lishi kerak, so'ngra tirnoq ichida atributning kerakli qiymati yozilgan teng belgi (=) bo'lishi kerak.

A (...)

...

Atribut tanlash * =

Agar biz atribut qiymatining bir qismiga asoslangan elementni topishga harakat qilsak, lekin aniq mos kelmasa, yulduzcha (*) belgisini selektor qavsida ishlatish mumkin. Yulduzcha atribut nomidan keyin, tenglik belgisidan oldin o'tishi kerak. Bu shuni anglatadiki, quyidagi qiymat faqat atribut qiymatida ko'rsatilishi yoki bo'lishi kerak.

A (...)

...

Atributlar tanlovi ^ =

Belgilangan matnni o'z ichiga olgan atribut qiymatiga asoslangan elementni tanlashdan tashqari, atribut qiymati qaerdan boshlanishiga qarab elementni tanlashingiz mumkin. Atribut nomi va tenglik orasidagi selektorning kvadrat qavsida sirkumfleks belgisini (^) ishlatish atribut qiymati ko'rsatilgan matndan boshlanishi kerakligini bildiradi.

A (...)

...

$ = Atributlarni tanlash

Oldingi selektorga qarama -qarshi - atributlarni tanlash, bu erda qiymat ko'rsatilgan matn bilan tugaydi. ^ Belgisini ishlatish o'rniga, atribut nomi va tenglik belgisi orasidagi tanlagich qavsida dollar belgisi ($) ishlatiladi. Dollar belgisidan foydalanish atribut qiymati ko'rsatilgan matn bilan tugashi kerakligini bildiradi.

A (...)

...

Atribut tanlash ~ =

Ba'zida atribut qiymatlari bir -biridan ajratilishi mumkin, bunda so'zlardan faqat bittasi namuna olish uchun mos bo'lishi kerak. Bu holda, atribut nomi va teng belgisi orasidagi selektorning kvadrat qavsidagi tilde belgisini (~) ishlatish atribut qiymati bo'shliqlar bilan ajratilganligini bildiradi, shundan bitta so'z ko'rsatilgan qiymatga to'liq mos keladi.

A (...)

...

Atribut tanlash | =

Agar atribut qiymati bo'sh joy o'rniga chiziqcha bilan ajratilsa, vertikal chiziq belgisi (|) atribut nomi va teng belgisi orasidagi selektorning kvadrat qavsida ishlatilishi mumkin. Vertikal chiziq atribut qiymatini defis bilan ajratish mumkinligini anglatadi, lekin so'zlar belgilangan qiymatdan boshlanishi kerak.

A (...)

...

Atributlarni tanlashga misol

• PDF hujjat
• Word hujjati
• Rasm
• Audio
• Video

Ul (ro'yxat uslubi: yo'q; chegara: 0; to'ldirish: 0;) a (fon pozitsiyasi: 0 50%; fon-takrorlash: takrorlanmaydi; rang: # 0087cc; to'ldirish-chap: 22 piksel; matnni bezatish: yo'q;) a: hover (rang: # ff7b29;) a (fon tasviri: url ("tasvirlar / pdf.png");) a (fon tasviri: url ("tasvirlar / doc.png");) a (fon tasviri: url ("tasvirlar / image.png");) a (fon tasviri: url ("tasvirlar / audio.png");) a )))

Atribut tanlovchilariga umumiy nuqtai

Misol	Ism	Tavsif
a	Atributlar mavjudligini tanlash	Agar berilgan atribut mavjud bo'lsa, elementni tanlaydi.
a	Atribut tanlash =	Agar berilgan atributning qiymati ko'rsatilganiga to'liq mos kelsa, elementni tanlaydi.
a	Atributlarni tanlash * =	Agar bu atribut qiymati ko'rsatilgan matnning kamida bitta nusxasini o'z ichiga olsa, elementni tanlaydi.
a	Atributlar tanlovi ^ =	Agar bu atribut qiymati ko'rsatilgan matndan boshlanadigan bo'lsa, elementni tanlaydi.
a	$ = Atributlarni tanlash	Agar berilgan atribut qiymati ko'rsatilgan matn bilan tugasa, elementni tanlaydi.
a	Atribut tanlash ~ =	Agar berilgan atributning qiymati bo'shliqlar bilan ajratilgan bo'lsa va bitta ko'rsatilgan so'zga to'liq mos kelsa, elementni tanlaydi.
a	Atribut tanlash | =	Agar berilgan atributning qiymati tire qo'yilsa va ko'rsatilgan so'zdan boshlanadigan bo'lsa, elementni tanlaydi.

Psevdo-sinflar

Psevdo-sinflar HTML-dagi oddiy sinflarga o'xshaydi, lekin ular belgilashda to'g'ridan-to'g'ri ko'rsatilmagan; aksincha, ular foydalanuvchilarning o'zaro ta'siri yoki hujjatlar tuzilishi natijasida dinamik tarzda o'rnatiladi. Eng keng tarqalgan psevdo-sinf, va siz buni ilgari ko'rgan bo'lishingiz mumkin: hover. E'tibor bering, bu psevdo-klass boshqa soxta sinflar kabi ikki nuqta (:) bilan boshlanadi.

Psevdo-sinflarni bog'lash

Asosiy psevdo-sinflarga havolalar atrofida aylanadigan ikkita psevdo-sinf kiradi. Bular: havola va: tashrif buyurilgan soxta sinflar va ular havolaga tashrif buyurilganmi yoki yo'qligini aniqlaydilar. Hali tashrif buyurilmagan havolani uslublash uchun: psevdo-klass havolasi ishga tushadi va: tashrif buyurilgan psevdo-klass foydalanuvchining brauzer tarixiga asoslanib allaqachon tashrif buyurgan havolalar uslubini bildiradi.

A: havola (...) a: tashrif buyurilgan (...)

Psevdo-sinflar foydalanuvchilari harakati

Har xil psevdo-sinflar foydalanuvchi harakatlariga asoslangan elementga dinamik tarzda qo'llanilishi mumkin, ular: hover ,: faol va: fokus. : Hover psevdo-klassi, foydalanuvchi kursorni element ustida harakatlantirganda, odatda havolalarda ishlatiladi. : Faol psevdo-klass foydalanuvchi elementni faollashtirganda, masalan, uni bosish paytida qo'llaniladi. Nihoyat,: element psevdo-klassi elementga, agar foydalanuvchi elementni sahifaning markaziga aylantirsa, ko'pincha Tab tugmachasi yordamida bir elementdan ikkinchisiga o'tadi.

A: hover (...) a: faol (...) a: diqqat (...)

Psevdo-sinflar holati

Havolalarga o'xshab, UI elementlarining holati, xususan, shakllar bilan bog'liq ba'zi soxta sinflar ham mavjud. Bu soxta sinflarga quyidagilar kiradi: yoqilgan,: o'chirilgan ,: tekshirilgan va: noaniq.

: Faollashtirilgan psevdo-klass faollashtirilgan va foydalanish mumkin bo'lgan maydonlarni tanlaydi, va: o'chirilgan psevdo-klass o'zlari bilan bog'langan o'chirilgan atributga ega bo'lgan maydonlarni tanlaydi. Ko'pgina brauzerlar ushbu o'chirilgan maydonlarni sukut bo'yicha o'chirib qo'yishadi, shunda foydalanuvchilar o'zaro ta'sir qilish uchun maydon mavjud emas, lekin ularni xohlagan uslubda: o'chirilgan psevdo-klass orqali sozlash mumkin.

Kirish: yoqilgan (...) kirish: o'chirilgan (...)

Oxirgi ikkita interfeys holatining elementlari: tekshirilgan va: noaniq soxta sinflar, tasdiqlash qutilari va radio tugmalari atrofida aylanadi. : Belgilangan psevdo-klass siz kutgan katakchalar yoki radio tugmalarini belgilaydi. Hech qanday katakcha yoki radio tugmasi belgilanmagan yoki tanlanmagan bo'lsa, u aniqlanmagan holatda yashaydi, buning uchun: noaniq psevdo-klass shu kabi elementlarni nishonga olish uchun ishlatilishi mumkin.

Kirish: tekshirilgan (...) kirish: noaniq [...]

Psevdo-sinflarning tuzilishi va joylashuvi

Bir nechta soxta sinflar hujjat daraxti elementlari joylashgan joyiga qarab tuzilishi va joylashuvi bilan bog'liq. Bu soxta sinflar har xil shakl va o'lchamlarda bo'ladi, ularning har biri o'ziga xos funktsiyani ta'minlaydi. Ba'zi psevdo-sinflar boshqalarga qaraganda uzoqroq bo'lgan, ammo CSS3 mavjudlaridan tashqari, yangi psevdo-sinflarning yangi to'plamini olib keldi.

: birinchi bola ,: oxirgi bola va: faqat bola

Siz duch keladigan birinchi tizimli psevdo-sinflar: birinchi bola ,: oxirgi bola va: faqat bola. The: first-child pseudo-class elementni tanlaydi, agar u ota-onaning birinchi bolasi bo'lsa,: last-child pseudo-class elementni ota-onada oxirgi bo'lsa. Bu psevdo-sinflar ro'yxatdagi birinchi yoki oxirgi elementni va boshqalarni tanlash uchun juda mos keladi. Bundan tashqari, agar faqat ota-ona elementi bo'lsa, faqat-bola elementni tanlaydi. Shu bilan bir qatorda, "yolg'iz bola" soxta sinfini quyidagicha yozish mumkin: birinchi bola: oxirgi bola, ammo: faqat bola o'ziga xos xususiyatlarga ega.

Bu erda li: birinchi bola selektori ro'yxatning birinchi elementini, li: last-child ro'yxatning oxirgi elementini belgilaydi, shuning uchun 2 va 10-qatorlar tanlanadi.

, boshqa ota -onasi bo'lmagan yagona bola. Bunday holda, 4 -qator tanlanadi, chunki bu yagona

bu ro'yxat bandida.

Li: birinchi bola (...) li: oxirgi bola (...) div: faqat bola (...)

• Bu element tanlanadi
• Bu div tanlanadi
• ...
  ...
• Bu element tanlanadi

: birinchi turdagi ,: oxirgi turdagi va: faqat turdagi

Ota -onasi bilan birinchi, oxirgi va yagona bolani topish juda foydali va ko'pincha talab qilinadigan narsadir. Biroq, ba'zida siz faqat bitta element turidagi birinchi, oxirgi yoki yagona bolani tanlashni xohlaysiz. Masalan, siz maqola ichidagi faqat birinchi yoki oxirgi paragrafni yoki, ehtimol, maqoladagi rasmni tanlashni xohlaysiz. Yaxshiyamki, bunga: birinchi turdagi ,: oxirgi turdagi va: faqat turdagi psevdo-sinflar yordam beradi.

: Birinchi turdagi psevdo-klass ota-ona ichida o'z turining birinchi elementini tanlaydi, oxirgi turidagi psevdo-klass esa ota-ona ichidagi oxirgi turdagi elementni tanlaydi. The: only-of-type pseudo-class elementni tanlaydi, agar u ota-ona turidagi yagona element bo'lsa.

Quyidagi misolda, p: birinchi turdagi va p: oxirgi turdagi soxta sinflar, maqolaning birinchi yoki oxirgi bolalari bo'lishidan qat'i nazar, maqolaning birinchi va oxirgi paragraflarini tanlaydi. maqola. 3 va 6 -qatorlar shu selektorlar tomonidan tanlanadi. Img: faqat turdagi selektor 5-satrdagi tasvirni maqolada ko'rinadigan yagona tasvir sifatida belgilaydi.

P: birinchi turdagi (...) p: oxirgi turdagi (...) img: faqat turdagi (...)

...

Bu paragraf tanlanadi

Bu paragraf tanlanadi

...

Nihoyat, elementlar soniga yoki algebraik ifodaga qarab tanlanadigan bir nechta tuzilish va pozitsiya psevdo-sinflari mavjud. Bu psevdo-sinflarga quyidagilar kiradi: n-bola (n) ,: nchi-oxirgi bola (n) ,: tipdagi n-chi (n) va: n-sonli turdagi (n). Bu noyob psevdo-sinflarning barchasi n-chidan boshlanadi va qavs ichida n bilan ko'rsatilgan raqam yoki ifodani oladi.

Qavs ichida ko'rsatilgan raqam yoki ifoda aynan qaysi element yoki elementlarni tanlash kerakligini ko'rsatadi. Muayyan raqam yordamida hujjat daraxti boshidan yoki oxiridan bitta element hisoblab chiqiladi va keyin tanlanadi. Ifodadan foydalanish hujjat daraxtining boshidan yoki oxiridan boshlab ko'plab elementlarni baholaydi va ularning guruhini yoki takrorlanishini tanlaydi.

Psevdo-sinflarda raqamlar va ifodalarni ishlatish

Yuqorida aytib o'tilganidek, soxta sinfda ma'lum bir raqamdan foydalanish hujjat daraxtining boshidan yoki oxiridan baholanadi va mos keladigan bitta elementni tanlaydi. Masalan, li: nth-child (4) selektori ro'yxatning to'rtinchi bandini tanlaydi. Hisoblash ro'yxatning birinchi bandidan boshlanadi va ro'yxatdagi har bir element uchun bittaga ko'payadi, toki u to'rtinchi bandni topib, uni tanlaydi. Muayyan raqamni ko'rsatganda, u ijobiy bo'lishi kerak.

Soxta sinflar uchun ifodalar an, an + b, an -b, n + b, -n + b va -an + b formatida bo'ladi. Xuddi shu iborani (a × n) ± b deb tarjima qilish va o'qish mumkin. A o'zgaruvchisi elementlar hisoblanadigan multiplikatorni bildiradi, b o'zgarmaydigan sanash qaerdan yoki qaerdan boshlanishini bildiradi.

Masalan, li: nth-child (3n) selektori ro'yxat elementining har uchinchi elementini aniqlaydi. Bu ifodani ishlatish 3 × 0, 3 × 1, 3 × 2 va boshqalarga mos keladi. Ko'rib turganingizdek, bu ifoda natijalari uchinchi, oltinchi va har uchtadan ko'plarni tanlaydi.

Bundan tashqari, toq va hatto kalit so'zlar qiymat sifatida ishlatilishi mumkin. Siz kutganingizdek, ular mos ravishda toq yoki juft narsalarni tanlaydilar. Agar kalit so'zlar jozibali bo'lmasa, 2n + 1 ifodasi barcha toq elementlarni, 2n ifodasi esa barcha juft elementlarni tanlaydi.

Li: nth-child (4n + 7) tanlovchisi ettinchi banddan boshlab ro'yxatning har to'rtinchi bandini belgilaydi. Shunga qaramay, bu ifodani ishlatish (4 × 0) +7, (4 × 1) +7, (4 × 2) +7 va boshqalarga teng. Bu ifoda natijalari ettinchi, o'n birinchi, o'n beshinchi va har to'rtinchi elementni tanlashga olib keladi.

N argumentini oldida raqami bo'lmagan holda ishlatganda, a o'zgaruvchisi 1 ga baholanadi. Li: nth-child (n + 5) tanlagichi ro'yxatning har bir bandini beshinchisidan boshlab tanlaydi va birinchi to'rtta elementni belgilashsiz qoldiradi. Ifodada bu (1 × 0) +5, (1 × 1) +5, (1 × 2) +5 va hokazolarga bo'linadi.

Salbiy raqamlardan murakkab narsalarni yaratish uchun foydalanish mumkin. Masalan, li: nth-child (6n-4) selektori ro'yxatning har oltinchi elementini -4 dan boshlab sanab, ikkinchi, sakkizinchi, o'n to'rtinchi ro'yxat elementlarini va boshqalarni tanlaydi. Xuddi shu li: n-bola (6n-4) selektori b manfiy o'zgaruvchisiz, li: nth-bola (6n + 2) sifatida ham yozilishi mumkin.

Manfiy o'zgaruvchi yoki manfiy n argumentdan keyin musbat b o'zgaruvchi bo'lishi kerak. Agar argument n dan oldin a manfiy o'zgarmaydigan bo'lsa, b o'zgaruvchisi hisobning qanchalik yuqori bo'lishini aniqlaydi. Masalan, li: nth-child (-3n + 12) selektori birinchi o'n ikkita elementdagi har uchinchi ro'yxat elementini tanlaydi. Li: nth-child (-n + 9) tanlagichi ro'yxatning birinchi to'qqiz elementini tanlaydi, chunki e'lon qilinmagan raqamsiz a o'zgaruvchisi sukut bo'yicha -1.

: n-bola (n) va: n-oxirgi bola (n)

Psevdo-sinflarda raqamlar va iboralar qanday ishlashini umumiy tushungan holda, keling, bu raqamlar va iboralar ishlatilishi mumkin bo'lgan foydali psevdo-sinflarni ko'rib chiqaylik, birinchi bo'lib: n-bola (n) va: n-oxirgi- bola (n). Bu psevdo-sinflar xuddi shunday ishlaydi: birinchi bola va: oxirgi bola, chunki ular ota-onadagi barcha elementlarga qaraydilar va sanaydilar va faqat ma'lum bir elementni tanlaydilar. : nth-child (n) hujjat daraxti boshidan ishlaydi va: nth-last-child (n) hujjat daraxti oxiridan ishlaydi.

Nth-child (n) soxta sinfidan foydalanib, li: nth-child (3n) selektorini ko'rib chiqaylik. U ro'yxatning har uchinchi elementini belgilaydi, shuning uchun 4 va 7 -qatorlar tanlanadi.

Li: n-bola (3n) [...]

• Bu element tanlanadi
• Bu element tanlanadi

Nth-child (n) soxta sinfida boshqa ifodani ishlatish boshqa tanlovni beradi. Li: nth-child (2n + 3) selektori, masalan, ro'yxatning har bir ikkinchi elementini, uchinchisidan boshlab belgilaydi. Bu 4 va 6 -qatorlardagi elementlarni tanlaydi.

Li: n-bola (2n + 3) [...]

• Bu element tanlanadi
• Bu element tanlanadi

Ifodani yana o'zgartirish, bu safar manfiy qiymat bilan, yangi tanlov beradi. Bu erda li: nth-child (-n + 4) selektori ro'yxatning eng yaxshi to'rtta elementini belgilaydi, qolganlari tanlanmagan holda qoldiriladi, shuning uchun 1 dan 4 gacha qatorlar tanlanadi.

Li: n-bola (-n + 4) [...]

• Bu element tanlanadi
• Bu element tanlanadi
• Bu element tanlanadi
• Bu element tanlanadi

N argumentidan oldin manfiy sonni qo'shish tanlovni yana o'zgartiradi. Bu erda li: nth-child (-2n + 5) selektori birinchi beshta elementlar ro'yxatidagi har ikkinchi elementni belgilaydi, shuning uchun 2, 4 va 6-satrlardagi elementlar tanlanadi.

Li: n-bola (-2n + 5) [...]

• Bu element tanlanadi
• Bu element tanlanadi
• Bu element tanlanadi

Soxta sinfni o'zgartirish: nth-child (n): nth-last-child (n) hisoblash yo'nalishini o'zgartiradi, endi hisoblash hujjat daraxtining oxiridan boshlanadi. Li: nth-last-child (3n + 2) selektori, masalan, ro'yxatning har uchinchi elementini belgilaydi, ikkinchisidan oxirigacha, ro'yxatning boshiga qarab harakat qiladi. 3 va 6 -qatorlardagi ro'yxat elementlari bu erda tanlangan.

Li: oxirgi bola (3n + 2) [...]

• Bu element tanlanadi
• Bu element tanlanadi

: n-turdagi (n) va: n-turdagi oxirgi (n)

Soxta sinflar: n-toifa (n) va: n-turning oxirgi turi (n): n-bola (n) va: n-oxirgi bola (n) ga juda o'xshaydi, lekin o'rniga ota-ona ichidagi har bir elementni hisobga olganda: n-toifa (n) va: n-turning oxirgi (n) soxta sinflari faqat o'z turidagi elementlarni hisobga oladi. Masalan, maqoladagi paragraflarni sanashda psevdo-sinflar: n-tip (n) va: n-tur oxirgi (n) har qanday sarlavhani o'tkazib yuboradi,

yoki paragraf bo'lmagan boshqa elementlar, shu bilan birga: nth-child (n) va: nth-last-child (n) har bir elementni turidan qat'i nazar sanaydi, faqat ko'rsatilgan selektordagi elementga mos keladiganlarni tanlaydi. Bundan tashqari,: n-bola (n) va: n-oxirgi-bola (n) so'zlarida ishlatiladigan bir xil mumkin bo'lgan iboralar psevdo-sinflarda ham mavjud: n-tur (n) va: n-oxirgi- turdagi (n).

P: n-toifa (3n) selektoridagi: n-turdagi (n) psevdo-klassdan foydalanib, biz ota-ona ichidagi boshqa aka-uka va opa-singillarimizdan qat'i nazar, ota-onaning har uchinchi xatboshisini aniqlashimiz mumkin. Bu erda 5 va 9 -qatorlardagi xatboshilar tanlanadi.

P: n-turdagi (3n) [...]

...

Bu paragraf tanlanadi

...

Bu paragraf tanlanadi

Psevdo-sinflarda bo'lgani kabi: n-bola (n) va: n-oxirgi bola (n), asosiy tur: n-toifa (n) va: n-tur oxirgi tur (n) o'rtasidagi asosiy farq bu: n-toifa (n) hujjat daraxti boshidan elementlarni hisoblaydi va: n-turi oxirgi (n) hujjat daraxti oxiridan elementlarni hisoblaydi.

Pseudo-class: nth-end-of-type (n) yordamida biz har bir ikkinchi paragrafni bosh elementning oxiridan boshlab belgilaydigan p: nth-last-of-type (2n + 1) selektorini yozishimiz mumkin. oxirgi xatboshi bilan. Bu 4, 7 va 9 -qatorlardagi paragraflarni tanlaydi.

P: n-oxirgi turdagi (2n + 1) [...]

...

Bu paragraf tanlanadi

...

Bu paragraf tanlanadi

Bu paragraf tanlanadi

The: maqsadli soxta sinf

Id: atribut qiymati URI fragment ko'rsatgichiga mos kelganda, elementlarni uslublash uchun: maqsadli psevdo-klass ishlatiladi. URI -dagi bunday bo'lak xash (#) belgisi va undan keyin keladigan narsa bilan tan olinadi. Http://example.com/index.html#hello URL manziliga salom ko'rsatgichi kiradi. Agar u sahifadagi elementning id atributining qiymatiga mos kelsa, masalan:

Soxta sinf: bo'sh

The: bo'sh soxta sinf bolalarni yoki matnni o'z ichiga olmaydigan elementlarni tanlash imkonini beradi. Sharhlar, ishlov berish ko'rsatmalari va bo'sh matn bolalar deb hisoblanmaydi va ularga munosabat bildirilmaydi.

Psevdo-class div: empty yordamida aniqlanadi

na bolalar, na matn. Quyida tanlangan

2 va 3 -qatorlarda, chunki ular butunlay bo'sh. Ikkinchisiga qaramay

izohni o'z ichiga oladi, u bola deb hisoblanmaydi, shuning uchun tark etadi

bo'sh Birinchisi

matnni o'z ichiga oladi, uchinchisi bitta bo'sh joyni, oxirgi qismi esa bolani o'z ichiga oladi shuning uchun hammasi chiqarib tashlanmagan va tanlanmagan.

Div: bo'sh [...]

Hey

Soxta sinf: yo'q

The: not (x) soxta klassi argumentni oladi va tanlovni filtrlaydi. P: not (.intro) tanlagichi har bir paragrafni kirish sinfisiz aniqlash uchun: not pseudo-class dan foydalanadi. Paragraf elementi selektor boshida aniqlanadi, keyin: (x) soxta sinf emas. Qavslar ichida inkorni tanlash, bu holda kirish sinfi joylashgan.

Quyida ikkala div tanlovchilari: emas (. Ajoyib) va: emas (div): not (x) soxta sinfidan foydalanadilar. Div: not (.awesome) selektori har qanday narsani aniqlaydi

ajoyib sinfsiz, lekin: not (div) selektori bo'lmagan elementni belgilaydi

... Natijada, biz tanlaymiz

1 -qatorda, shuningdek 3 va 4 -satrlarda ikkita bo'lim. Faqat tanlanmagan element

ajoyib sinf bilan, chunki u ikkita soxta sinfdan tashqarida.

Div: emas (. Ajoyib) (...): emas (div) (...)

Bu div tanlanadi

...

Bu bo'lim tanlanadi Bu bo'lim tanlanadi

Psevdo-sinflarga misol

...

Raqam	O'yinchi	Lavozim	Balandlik	Og'irligi
8	Marko Belinelli	G	6-5	195
5	Karlos Boozer	F	6-9	266

Jadval : birinchi bola th: birinchi bola (chegara-yuqori-chap radiusi: 6 piksel;) tr: birinchi bola th: oxirgi bola (chegara-tepa-o'ng radiusi: 6 piksel;) td (chegara-o'ng: 1 piksel) qattiq # c6c9cc; chegara-pastki: 1 piksel qattiq # c6c9cc;) td: birinchi bola (chegara-chap: 1 piksel qattiq # c6c9cc;) tr: n-bola (hatto) td (fon: # eaeaed;) tr: oxirgi- bola td: birinchi bola (chegara-pastki-chap radiusi: 6 piksel;) tr: oxirgi bola td: oxirgi bola (chegara-pastdan-o'ngga radiusi: 6 piksel;)

Psevdo-sinflar haqida umumiy ma'lumot

Misol	Ism	Tavsif
a: havola	Psevdo-klassga ulanish	Foydalanuvchi ko'rmagan havolalarni tanlaydi.
a: tashrif buyurdi	Psevdo-klassga ulanish	Foydalanuvchi tashrif buyurgan havolalarni tanlaydi.
a: hover	Psevdo-klassdagi harakat	Foydalanuvchi uning ustida turganida elementni tanlaydi.
a: faol	Psevdo-klassdagi harakat	Foydalanuvchi uni faollashtirganda tanlaydi.
a: diqqat	Psevdo-klassdagi harakat	Foydalanuvchi uni qiziqtiradigan joyga aylantirganda, uni tanlaydi.
kirish: yoqilgan	Davlat psevdo-klassi	Ob'ektni mavjud holatda tanlaydi.
kirish: o'chirilgan	Davlat psevdo-klassi	O'chirilgan atribut orqali o'chirilgan holatdagi elementni tanlaydi.
kirish: tekshirildi	Davlat psevdo-klassi	Belgilangan katakchani yoki radio tugmachasini tanlaydi.
kirish: noaniq	Davlat psevdo-klassi	Belgilanmagan holatda qoldirilmagan yoki belgilanmagan katakchani yoki radio tugmachasini tanlaydi.
li: birinchi farzand	Strukturaviy soxta sinf	Ota -onadagi birinchi elementni tanlaydi.
li: oxirgi bola	Strukturaviy soxta sinf	Ota -onadagi oxirgi elementni tanlaydi.
div: yolg'iz bola	Strukturaviy soxta sinf	Ota -onadagi yagona elementni tanlaydi.
p: birinchi turdagi	Strukturaviy soxta sinf	Ota -ona turidagi birinchi elementni tanlaydi.
p: oxirgi turdagi	Strukturaviy soxta sinf	Ota -ona turidagi oxirgi elementni tanlaydi.
img: faqat turdagi	Strukturaviy soxta sinf	Ota -ona turidagi bitta elementni tanlaydi.
li: n-bola (2n + 3)	Strukturaviy soxta sinf	Hujjat daraxti boshidan boshlab barcha elementlarni sanab, ko'rsatilgan raqam yoki ifodaga mos keladigan elementni tanlaydi.
li: n-oxirgi bola (3n + 2)	Strukturaviy soxta sinf	Belgilangan raqam yoki ifodaga mos keladigan elementni tanlaydi, barcha elementlarni hujjat daraxti oxiridan sanaydi.
p: n-turi (3n)	Strukturaviy soxta sinf	Hujjat daraxti boshidan faqat shu turdagi elementlarni sanab, ko'rsatilgan raqam yoki ifodaga mos keladigan elementni tanlaydi.
p: n-oxirgi turdagi (2n + 1)	Strukturaviy soxta sinf	Belgilangan raqam yoki ifodaga mos keladigan elementni tanlaydi, hujjat daraxtining oxiridan faqat shu turdagi elementlarni hisoblaydi.
bo'lim: maqsad	The: maqsadli soxta sinf	Id atribut qiymati URI fragment ko'rsatgichiga mos keladigan elementni tanlaydi.
div: bo'sh	Soxta sinf: bo'sh	Hech qanday bola yoki matn bo'lmagan elementni tanlaydi.
div: emas (. ajoyib)	Soxta sinf: yo'q	Taqdim etilgan argument bilan ifodalanmagan elementni tanlaydi.

Soxta elementlar

Psevdo-elementlar-bu hujjat daraxtida mavjud bo'lmagan dinamik elementlar va selektorlar bilan ishlatilganda, bu psevdo-elementlar sahifaning uslubini o'zgartirish mumkin bo'lgan noyob qismlarini beradi. Shuni ta'kidlash kerakki, selektorda bir vaqtning o'zida faqat bitta soxta element ishlatilishi mumkin.

Psevdo-elementli matn

Birinchi psevdo-elementlar: birinchi harf va: birinchi qatorli psevdo-elementlar. : Birinchi harfli psevdo-element element ichidagi matnning birinchi harfini belgilaydi, shu bilan birga: birinchi satr element ichidagi matnning birinchi qatorini belgilaydi.

Quyidagi demoda alfa -paragrafning birinchi harfi bravo paragrafining birinchi qatori kabi katta shrift o'lchamiga va to'q sariq rangga o'rnatiladi. Bu tanlov psevdo-sinflar matni yordamida amalga oshiriladi: navbati bilan birinchi harf va: birinchi qator.

Alfa: birinchi harf, .bravo: birinchi qator (rang: # ff7b29; shrift o'lchami: 18 piksel;)

Lorem ipsum dolor ...

Bu butun son ...

Matn psevdo-elementlarining namoyishi

Tarkib tomonidan yaratilgan psevdo-elementlar

The: before va: after soxta elementlar yangi tanlangan psevdo-elementlarni faqat tanlangan element ichida yaratadi. Ko'pincha, bu soxta elementlar sahifaga kichik ma'lumotlarni qo'shish uchun kontent xususiyati bilan birgalikda ishlatiladi, lekin bu har doim ham shunday emas. Ushbu soxta elementlardan qo'shimcha foydalanish hujjatni semantik bo'lmagan elementlar bilan bezovta qilmasdan UI komponentlarini sahifaga qo'shishi mumkin.

The: pseudo-element tanlangan elementdan oldin yoki uning oldida psevdo-element yaratadi, while: after tanlangan elementdan keyin yoki orqasida soxta element yaratadi. Bu psevdo-elementlar tanlangan elementning tashqarisida emas, balki joylashtirilgan holda ko'rsatiladi. Quyida: keyin soxta element havolaning href atributining qiymatini havoladan keyin qavs ichida ko'rsatish uchun ishlatiladi. Bu ma'lumot foydali, lekin oxir-oqibat, har bir brauzer bu soxta elementlarni qo'llab-quvvatlamaydi.

A: keyin (rang: # 9799a7; tarkib: "(" attr (href) ")"; shrift o'lchami: 11px;)

Internetda qidirish Qanday qilib veb -sayt yaratishni bilib oling

Tarkib tomonidan yaratilgan soxta elementlarning namoyishi

Pseudo element :: tanlash

:: tanlash psevdo-elementi hujjatning foydalanuvchi tomonidan tanlangan qismini aniqlaydi. Tanlovni uslub, lekin faqat rang, fon, fon-rang va matn-soya xossalari bilan bajarish mumkin. Ta'kidlash joizki, background-image xususiyati e'tiborga olinmaydi. Shu bilan birga, fon stsenariysi rang qo'shish uchun ishlatilishi mumkin, lekin har qanday tasvirga e'tibor berilmaydi.

Ikki nuqta (:) va ikki nuqta (: :)

:: tanlash psevdo-elementi CSS3-da soxta elementlarni psevdo-elementlardan soxta elementlarga qo'shilgan ikki nuqta bilan ajratish maqsadida qo'shilgan. Yaxshiyamki, ko'pchilik brauzerlar soxta elementlar uchun bitta va ikkita nuqta qo'yishni qo'llab-quvvatlaydi, lekin :: tanlash psevdo-elementi har doim ikki nuqta bilan boshlanishi kerak.

Quyidagi demodan istalgan matnni tanlaganingizda, :: tanlash psevdo-elementi tufayli fon to'q sariq rangga aylanadi. Shuningdek, :: - moz -tanlashga qarang. Barcha brauzerlarni yaxshiroq qo'llab -quvvatlash uchun Mozilla prefiksi qo'shildi.

:: - moz -tanlash (fon: # ff7b29;) :: tanlash (fon: # ff7b29;)

Soxta elementlarning namoyishi

O'qishni davom ettiring

Ok (fon: # 2db34a; rang: #fff; displey: inline-blok; balandlik: 30px; chiziq balandligi: 30px; to'ldirish: 0 12px; pozitsiya: nisbiy; matnli bezak: yo'q;). O'q: oldin,. o'q: keyin (tarkib: ""; balandlik: 0; pozitsiya: mutlaq; kenglik: 0;). o'q: oldin (chegara-pastki: 15px qattiq # 2db34a; chegara-chap: 15 piksel qattiq shaffof; chegara tepasi: 15 piksel qattiq # 2db34a; chapda: -15px;). O'q: keyin (chegara-pastki: 15px qattiq shaffof; chegara-chap: 15px qattiq # 2db34a; chegara tepasi: 15px qattiq shaffof; o'ng: -15px;). O'q: hover ( fon: # ff7b29;) .arrow: hover: oldin (chegara-pastki: 15px qattiq # ff7b29; border-top: 15px qattiq # ff7b29;) .arrow: hover: keyin (chegara-chap: 15px qattiq # ff7b29;)

Brauzer tanlashni qo'llab -quvvatlash

Bu selektsionerlar haqiqatan ham ajoyib narsalarni qilish uchun turli xil imkoniyatlar va qobiliyatlarni taklif qilsa -da CSS yordamida, ular ba'zida brauzerning yomon qo'llab -quvvatlashidan aziyat chekishadi. Juda muhim ishni bajarishdan oldin, eng mashhur brauzerlarda ishlatmoqchi bo'lgan selektorlarni tekshiring va keyin ular sizga mos keladimi yoki yo'qmi degan xulosaga keling.

CSS3.info CSS3 Selectors Test vositasini taklif qiladi, bu sizga qaysi selektorlar brauzer tomonidan qo'llab -quvvatlanishi haqida ma'lumot beradi. To'g'ridan -to'g'ri brauzerni qo'llab -quvvatlashni sinab ko'rish yaxshidir.

Smashing jurnali haqida

Tushunish: SitePoint-dagi psevdo-sinfning uchinchi bolasi

Smashing jurnalida ilg'or CSS tanlovchilarini o'rgatish

CSS tanlovchilari CSS qoidalari to'plami qo'llaniladigan elementlarni aniqlang.

Asosiy tanlovchilar

Universal tanlash barcha elementlarni tanlaydi. Ixtiyoriy ravishda, u ma'lum bir nom maydoniga yoki barcha nom maydonlariga cheklanishi mumkin.
Sintaksis:* ns | * * | *
Misol:* hujjatning barcha elementlariga mos keladi. Type selector Berilgan tugun nomiga ega bo'lgan barcha elementlarni tanlaydi.
Sintaksis: element nomi
Misol: Kirish har qanday elementga mos keladi, foydalanuvchidan ma'lumotlarni qabul qilish uchun veb-shakllar uchun interaktiv boshqaruv elementlarini yaratish uchun ishlatiladi; qurilma va foydalanuvchi agentiga qarab, kirish ma'lumotlari va boshqaruv vidjetlarining turlarining xilma -xilligi mavjud. "> element. Class Selector berilgan sinf atributiga ega bo'lgan barcha elementlarni tanlaydi.
Sintaksis:... sinf nomi
Misol:.index "indeks" sinfiga ega bo'lgan har qanday elementga mos keladi. ID tanlash elementini id atributining qiymatiga qarab tanlaydi. Hujjatda identifikator berilgan bitta element bo'lishi kerak.
Sintaksis:# idname
Misol:#toc "toc" identifikatoriga ega bo'lgan elementga mos keladi. Atributlar tanlovchisi berilgan atributga ega bo'lgan barcha elementlarni tanlaydi.
Sintaksis:[attr] [attr = qiymat] [attr ~ = qiymat] [attr | = qiymat] [attr ^ = qiymat] [attr $ = qiymat] [attr * = qiymat]
Misol: autoplay atributlari o'rnatilgan barcha elementlarga mos keladi (har qanday qiymatga).

Tanlovchilarni guruhlash

Tanlovchilar ro'yxati - bu guruhlash usuli bo'lib, u barcha mos keladigan tugunlarni tanlaydi.
Sintaksis: A, B.
Misol: div, span ikkalasiga ham mos keladi va) oqim mazmuni uchun umumiy konteyner. CSS -dan foydalanilmaguncha uning mazmuni yoki tartibiga hech qanday ta'siri bo'lmaydi. ">

elementlar.

Kombinatorlar

Avlod kombinatori (bo'sh joy) kombinatori birinchi element avlodlari bo'lgan tugunlarni tanlaydi.
Sintaksis: A B
Misol: div span a) tarkibidagi barcha elementlarga mos keladi. CSS -dan foydalanilmaguncha uning mazmuni yoki tartibiga hech qanday ta'siri bo'lmaydi. ">

element. Bolalar kombinatori> kombinator birinchi elementning bevosita bolalari bo'lgan tugunlarni tanlaydi.
Sintaksis: A> B
Misol: ul> li mos keladi, barcha elementlar ro'yxatdagi elementni ko'rsatish uchun ishlatiladi. ">

To'g'ridan -to'g'ri element ichiga joylashtirilgan elementlar, odatda, markerlangan ro'yxat sifatida ko'rsatiladigan, tartiblanmagan elementlar ro'yxatini ko'rsatadi. ">

element. Umumiy aka -uka kombinatori ~ kombinator aka -ukalarni tanlaydi. Bu shuni anglatadiki, ikkinchi element birinchisiga to'g'ri keladi (lekin darhol emas) va ikkalasi ham bitta ota -onani bo'lishadi.
Sintaksis: A ~ B
Misol: p ~ span elementni ta'qib qiladigan barcha elementlarga mos keladi. ">

, darhol yoki yo'q. Qo'shni aka -uka kombinatori + kombinatori qo'shni aka -ukalarni tanlaydi. Bu shuni anglatadiki, ikkinchi element to'g'ridan -to'g'ri birinchi elementga to'g'ri keladi va ikkalasi ham bitta ota -onani bo'lishadi.
Sintaksis: A + B
Misol: h2 + p hamma elementga mos keladi, paragrafni ifodalaydi. ">

to'g'ridan -to'g'ri ta'qib qiluvchi elementlar

... Ustun kombinatori || kombinator ustunga tegishli tugunlarni tanlaydi.
Sintaksis: A || B
Misol: kol || td barcha elementlarga mos keladi, bu ma'lumotlar o'z ichiga olgan jadval hujayrasini belgilaydi. U jadval modelida ishtirok etadi. "> element doirasiga kiruvchi elementlar jadval ichidagi ustunni belgilaydi va barcha umumiy kataklarda umumiy semantikani aniqlash uchun ishlatiladi. U odatda a ichida topiladi element. "> .

Soxta

Psevdo sinflar: psevdo hujjat daraxti bo'lmagan holat ma'lumotlari asosida elementlarni tanlash imkonini beradi.
Misol: a: tashrif buyurilgan barcha elementlarga (yoki anchor elementiga) mos keladi, href atributi bilan veb -sahifalarga, fayllarga, elektron pochta manzillariga, o'sha sahifadagi joylashuvlarga yoki URL manzili bo'lishi mumkin bo'lgan boshqa narsalarga giperhavola yaratadi. "> foydalanuvchi tashrif buyurgan. Soxta elementlar :: soxta HTMLga kirmagan ob'ektlarni ifodalaydi.
Misol: p :: birinchi qator barcha elementlarning birinchi satriga mos keladi. ">

elementlar.

Xususiyatlar

Xususiyat	Holat	Sharh

Selektor - bu CSS qoidasining bir qismi bo'lib, u brauzerga veb -sahifaning qaysi elementiga (yoki elementlariga) uslub qo'llanilishini aytib beradi.

Selektor atamasi oddiy selektor, birikma tanlash, murakkab tanlash yoki tanlovchilar ro'yxatini bildirishi mumkin.

TO oddiy tanlovchilar bog'liq:

• turdagi tanlovchi
• universal selektor
• atributlarni tanlash
• id tanlagich
• sinf tanlagichi
• soxta sinflar

CSS tanlovchisi	Misol	Tavsif	CSS
sinf	Mening sinfim	MyClass sinfidagi barcha elementlarni tanlaydi (class = "myClass").	1
#id	#asosiy	Id main bo'lgan elementni tanlaydi (id = "main").	1
	*	Barcha elementlarni tanlash.	2
element	oraliq	Barcha elementlarni tanlash .	1
element, element	div, span	Barcha elementlarni tanlash va barcha elementlar .	1
[xususiyat]		Sarlavha atributiga ega bo'lgan barcha elementlarni tanlaydi.	2
[atribut = "qiymat"]		Sarlavha atributiga ega bo'lgan barcha elementlarni tanlaydi, ularning qiymati selektorda ko'rsatilgan qiymatga to'liq mos keladi (sarlavha = "(! LANG: xarajat)"). !}	2
[atribut ~ = "qiymat"]		Sarlavha atributiga ega bo'lgan barcha elementlarni tanlaydi, ularning qiymatida (istalgan joyda) "bitta" (bitta so'z sifatida) pastki qatori mavjud (sarlavha = "(! LANG: bir va ikkita)"). !}	2
[atribut | = "qiymat"]		"Ru" dan boshlanadigan lang atributli barcha elementlarni tanlaydi.	2
[atribut ^ = "qiymat"]	a	Har bir elementni tanlash "https" bilan boshlanadigan href atributi bilan.	3
[$ attribute = "qiymat"]		".Png" (src = "some_img.png") bilan tugaydigan src atributli barcha elementlarni tanlaydi.	3
[atribut * = "qiymat"]		Sarlavha atributiga ega bo'lgan barcha elementlarni tanlaydi, ularning qiymati (istalgan joyda) "bitta" (bitta so'z yoki uning bir qismi) pastki qatorini o'z ichiga oladi (sarlavha = "(! LANG: bir va ikkita)"). !}	3

Murakkab tanlovchi- bu kombinatorlar bilan ajratilmagan oddiy selektorlar ketma -ketligi, ya'ni bir selektordan keyin keyingisi darhol keladi. U tarkibidagi barcha oddiy selektorlarga mos keladigan elementni tanlaydi. Bu ketma -ketlikda birinchi navbatda kompozit selektorga kiritilgan tip selektor yoki universal selektor joylashtirilishi kerak. Murakkab selektorda faqat bitta turdagi yoki universal selektorga ruxsat beriladi.

Span.className p.className1.className2 # someId: hover

Murakkab tanlovchi- kombinatorlar bilan ajratilgan selektorlar ketma -ketligi.

Tanlovchilar ro'yxati ular vergul bilan ajratilgan selektorlardir.

Kombinatorlar

CSS -ning oddiy selektorlarini birlashtirish uchun kombinatorlar oddiy selektorlar o'rtasidagi munosabatni ko'rsatish uchun ishlatiladi. CSS2 -da bir nechta turli kombinatorlar mavjud va CSS3 -da bitta qo'shimcha, agar siz ulardan foydalansangiz, ular selektorning tabiatini o'zgartiradi.

Psevdo-sinflar

Psevdo-klass-bu boshqa selektorlar bilan tanlab bo'lmaydigan, yoki tanlab olinadigan, lekin juda qiyin bo'lgan narsani tanlash uchun ishlatiladigan oddiy selektor.

Psevdo-sinf	Misol	Tavsif	CSS
: havola	a: havola	Barcha ko'rilmagan havolalarni tanlash.	1
: tashrif buyurdi	a: tashrif buyurdi	Barcha tashrif buyurilgan havolalarni tanlash.	1
: faol	a: faol	Faol havolani tanlash.	1
: hover	a: hover	Sichqoncha kursorini olib kelganda havolani tanlash.	1
: diqqat	kirish: diqqat	Element tanlash bu diqqat markazida.	2
: birinchi bola	p: birinchi bola	Har bir elementni tanlash Bu ota -onasining birinchi farzandi.	2
: til (til)	p: til (ru)	Har bir elementni tanlash "Ru" dan boshlanadigan lang atributi bilan.	2
: birinchi turdagi	p: birinchi turdagi	Har bir elementni tanlash Bu elementlarning birinchisi	3
: oxirgi turdagi	p: oxirgi turdagi	Har bir elementni tanlash Qaysi elementlar oxirgi Uning asosiy elementi.	3
: faqat turdagi	p: faqat turdagi	Har bir elementni tanlash Qaysi yagona element Uning asosiy elementi.	3
: faqat bola	p: faqat bola	Har bir elementni tanlash Bu ota -onasining yagona farzandi.	3
: n-bola (n)	p: n-bola (2)	Har bir elementni tanlash Uning asosiy elementi.	3
: n-oxirgi bola (n)	p: oxirgi bola (2)	Har bir elementni tanlash Qaysi biri oxirgi farzandidan ota -onasining ikkinchi farzandi.	3
: n-turdagi (n)	p: n-turdagi (2)	Har bir elementni tanlash Qaysi ikkinchi bola Uning asosiy elementi.	3
: n-oxirgi turdagi (n)	p: n-oxirgi turdagi (2)	Har bir elementni tanlash Qaysi ikkinchi bola Uning ota -onasi, oxirgi farzandidan.	3
	3
: emas (selektor)	: emas (p)	Elementlardan tashqari barcha elementlarni tanlash .	3

Soxta elementlar

Pseudo element-bu hujjatning elementlar daraxtida aniq mavjud bo'lmagan virtual element. Psevdo-elementlar elementni boshqa selektorlar yordamida tanlab bo'lmaydigan qismlarini tanlashda, shuningdek butun elementni emas, balki uning alohida qismlarini uslublashda ishlatiladi.

CSS (kaskadli uslublar jadvallari)- uslublar jadvalining tili, bu uslubni (shrift va rang kabi) tuzilgan hujjatlarga (masalan HTML hujjatlari va XML ilovalari). Odatda, CSS uslublari HTML va XHTML -da yozilgan veb -sahifa elementlari va foydalanuvchi interfeyslari uslubini yaratish va o'zgartirish uchun ishlatiladi, lekin XML, SVG va XUL kabi har qanday XML hujjatiga ham qo'llanilishi mumkin. Hujjatlarning taqdimot uslubini hujjatlar tarkibidan ajratib, CSS veb -sahifalar yaratish va saytlarni yuritishni osonlashtiradi.

CSS ommaviy axborot vositalariga xos uslublar jadvalini yuritadi, shuning uchun mualliflar o'z hujjatlari taqdimotini moslashtirishi mumkin vizual brauzerlar, eshitish apparatlari, printerlar, brayl qurilmalari, portativ qurilmalar va boshqalar.

Kaskadli uslublar jadvallari elementlardan foydalanib xususiyatlarni formatlash qoidalarini va bu xususiyatlar uchun ruxsat etilgan qiymatlarni tavsiflaydi. Har bir element uchun cheklangan xususiyatlar to'plamidan foydalanish mumkin, qolgan xususiyatlar unga ta'sir qilmaydi.

Uslub deklaratsiyasi ikki qismdan iborat: tanlovchi va reklamalar... HTMLda element nomlari katta -kichik harflarga sezgir emas, shuning uchun "h1" "H1" bilan bir xil ishlaydi. Deklaratsiya ikki qismdan iborat: mulk nomi (masalan, rang) va mulk qiymati (kulrang). Tanlovchi brauzerga qaysi elementni formatlash kerakligini aytadi va deklaratsiya bloki (jingalak qavsli kod) formatlash buyruqlari - xususiyatlari va ularning qiymatlarini ro'yxatlaydi.

Guruch. 1. Deklaratsiyaning tuzilishi

Yuqoridagi misol faqat HTML hujjatni ko'rsatish uchun zarur bo'lgan bir nechta xususiyatlarga ta'sir ko'rsatishga harakat qilsa -da, u o'z -o'zidan uslublar jadvaliga to'g'ri keladi. Boshqa uslublar jadvallari bilan birlashganda (CSS -ning asosiy xususiyatlaridan biri shundaki, uslublar jadvallari birlashtirilgan), qoida hujjatning yakuniy taqdimotini belgilaydi.

Kaskadli uslublar jadvalining turlari va ularning o'ziga xos xususiyatlari

1. Uslublar jadvalining turlari

1.1. Tashqi uslublar jadvali

Tashqi uslublar jadvali CSS elementlari uslublari to'plamini o'z ichiga olgan .css kengaytmali matnli fayl. Fayl HTML -sahifa kabi kod muharririda yaratilgan. Faylda faqat uslublar bo'lishi mumkin, HTML formatlashi yo'q. Tashqi uslublar sahifasi teg yordamida veb -sahifaga ulanadi bo'lim ichida joylashgan ... Bu uslublar saytdagi barcha sahifalar uchun ishlaydi.

Har bir veb -sahifaga bir nechta teglar ketma -ket qo'shilishi bilan bir nechta uslublar varaqlari biriktirilishi mumkin media tag atributida ushbu uslublar varag'ining maqsadini ko'rsatish orqali. rel = "uslublar jadvali" havola turini ko'rsatadi (uslublar jadvalining havolasi).

HTML5 standartida = "text / css" atributi ixtiyoriy, shuning uchun uni bo'sh qoldirishingiz mumkin. Agar atribut etishmayotgan bo'lsa, asl qiymati = "text / css".

1.2. Ichki uslublar

Ichki uslublar bo'limiga joylashtirilgan HTML hujjati va teg ichida belgilanadi... Ichki uslublar tashqi uslublardan ustun turadi, lekin ichki uslublardan pastroq (uslublar atributi orqali ko'rsatilgan).

...



1.3. Ichki uslublar

Biz yozganimizda ichki uslublar, biz CSS kodini HTML fayliga yozamiz, to'g'ridan -to'g'ri element atributiga uslub atributidan foydalanamiz:

Ushbu matnga e'tibor bering.

Bu uslublar faqat ular ko'rsatilgan elementga ta'sir qiladi.

1.4. @Import qoidasi

@Import qoidasi tashqi uslublar jadvallarini yuklash imkonini beradi. @Import direktivasi ishlashi uchun u boshqa barcha qoidalardan oldin uslublar jadvalida (tashqi yoki ichki) paydo bo'lishi kerak:

@Import qoidasi veb -shriftlarni kiritish uchun ham ishlatiladi:

@import url (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Selektorlarning turlari

Tanlovchilar veb -sahifaning tuzilishini aks ettiradi. Ular veb -sahifaning elementlarini formatlash qoidalarini tuzishda ishlatiladi. Selektorlar elementlar, ularning sinflari va identifikatorlari, shuningdek psevdo-klasslar va psevdo-elementlar bo'lishi mumkin.

2.1. Universal tanlovchi

Har qanday HTML elementiga mos keladi. Masalan, * (margin: 0;) saytning barcha elementlari uchun chekkalarni nol qiladi. Tanlovchini soxta sinf yoki soxta element bilan birgalikda ishlatish mumkin: *: keyin (CSS uslublari), *: belgilangan (CSS uslublari).

2.2. Element tanlagichi

Element tanlagichlari saytning barcha sahifalarida berilgan turdagi barcha elementlarni formatlash imkonini beradi. Masalan, h1 (font-family: Lobster, cursive;) barcha h1 sarlavhalari uchun umumiy formatlash uslubini o'rnatadi.

2.3. Sinf tanlagichi

Sinf tanlagichlari bir xil yoki bir nechta elementlar uchun uslublarni bir xil nomdagi sahifaning turli joylarida yoki saytning turli sahifalarida o'rnatish imkonini beradi. Masalan, sarlavha klassi bilan sarlavha yaratish uchun, ochiladigan tegga qiymat sarlavhasi bo'lgan sinf atributini qo'shing.

va belgilangan sinf uchun uslubni o'rnating. Sinf bilan yaratilgan uslublar bu turdagi emas, balki boshqa elementlarga ham qo'llanilishi mumkin.

sarlavha (matnni o'zgartirish: katta harf; rang: ochiq ko'k;)

Agar element bir nechta sinf atributlariga ega bo'lsa, ularning qiymatlari bo'shliqlar bilan birlashtiriladi.

Shaxsiy kompyuterdan foydalanish bo'yicha ko'rsatmalar

2.4. Identifikatorni tanlash

Id tanlash vositasi formatlash imkonini beradi bitta aniq element. Id qiymati noyob bo'lishi kerak, bitta sahifada faqat bir marta paydo bo'lishi va kamida bitta belgidan iborat bo'lishi kerak. Qiymatda bo'sh joy bo'lmasligi kerak.

Idning qanday shakli bo'lishi mumkinligi haqida boshqa cheklovlar yo'q, xususan, identifikatorlar faqat raqamlar bo'lishi mumkin, raqam bilan boshlanishi, pastki chiziq bilan boshlanishi, faqat tinish belgilari bo'lishi mumkin va hokazo.

Elementning o'ziga xos identifikatori turli maqsadlarda ishlatilishi mumkin, masalan, fragment identifikatorlari yordamida hujjatning muayyan qismlariga murojaat qilish, skriptda elementni nishonga olish usuli va CSS -dan ma'lum elementni uslublash usuli. .

#yon panel (kenglik: 300 piksel; suzish: chap;)

2.5. Avlod tanlash

Avlod tanlovchilar konteyner elementidagi elementlarga uslublarni qo'llaydilar. Masalan, ul li (matnni o'zgartirish: katta harf;) barcha ul elementlarning avlodlari bo'lgan barcha li elementlarni tanlaydi.

Agar siz ma'lum bir elementning avlodlarini formatlashni xohlasangiz, ushbu element uchun uslublar sinfini o'rnatishingiz kerak:

p.birinchisi (rang: yashil;) - berilgan uslub birinchi sinfga ega bo'lgan paragrafning avlodlari bo'lgan barcha havolalarga qo'llaniladi;

p .birinchidan a (rang: yashil;) - agar siz bo'sh joy qo'shsangiz, u holda har qanday sinf tegining ichida joylashgan havolalar .birinchisi, elementning bolasi,

Birinchidan (rang: yashil;) - bu uslub .first sinf tomonidan belgilangan boshqa element ichida joylashgan har qanday havola uchun qo'llaniladi.

2.6. Bolalar tanlovchisi

Bola elementi uning tarkibidagi elementning bevosita avlodidir. Bir elementda bir nechta bola bo'lishi mumkin va har bir elementda faqat bitta ota -ona bo'lishi mumkin. Bola tanlagichi, agar bola elementi ota -ona elementiga zudlik bilan ergashsa va ular orasida boshqa elementlar bo'lmasa, ya'ni bola endi ichki bo'lmagan bo'lsa, uslublarni qo'llashga imkon beradi.
Masalan, p> strong p elementining bolalari bo'lgan barcha kuchli elementlarni tanlaydi.

2.7. Tanlovchi opa

Oddiy ota -ona bilan elementlar o'rtasida opa -singil munosabatlari paydo bo'ladi. Aka -uka selektorlari sizga opa -singillar guruhidan narsalarni tanlash imkonini beradi.

h1 + p - har qanday tegdan so'ng barcha birinchi paragraflarni tanlaydi

qolgan paragraflarga ta'sir qilmasdan;

h1 ~ p - har bir h1 sarlavhasi va undan keyin birodar bo'lgan barcha paragraflarni tanlaydi.

2.8. Atributlarni tanlash

Atribut tanlovchilari element nomini yoki atribut qiymatiga qarab tanlaydi:

[atribut] - ko'rsatilgan atributni o'z ichiga olgan barcha elementlar - alt atribut o'rnatilgan barcha elementlar;

selector [attribut] - ko'rsatilgan atributni o'z ichiga olgan ushbu turdagi elementlar, img - faqat alt atributi o'rnatilgan rasmlar;

selector [attribute = "value"] - ma'lum bir qiymatga ega ko'rsatilgan atributni o'z ichiga olgan ushbu turdagi elementlar, img - ismlari gul so'zi bo'lgan barcha rasmlar;

selektor [atribut ~ = "qiymat"] - bu qiymatni qisman o'z ichiga olgan elementlar, masalan, bo'sh joy bilan ajratilgan element uchun bir nechta sinflar belgilansa, p - sinf nomi xususiyatga ega bo'lgan paragraflar;

selektor [atribut | = "qiymat"] - atribut qiymatlari ro'yxati ko'rsatilgan so'z bilan boshlanadigan elementlar, p - sinf nomi xususiyati bo'lgan yoki xususiyat bilan boshlanadigan xatboshilar;

selector [attribute ^ = "value"] - atribut qiymati belgilangan qiymatdan boshlanadigan elementlar, a - http: // bilan boshlanadigan barcha havolalar;

selektor [atribut $ = "qiymat"] - atribut qiymati ko'rsatilgan qiymat bilan tugaydigan elementlar, img - png formatidagi barcha rasmlar;

selektor [atribut * = "qiymat"] - atribut qiymati har qanday joyda ko'rsatilgan so'zni o'z ichiga olgan elementlar, a - nomi kitob bo'lgan barcha havolalar.

2.9. Psevdo sinf tanlash

Psevdo-sinflar-bu HTML teglariga biriktirilmagan sinflar. Ular sizga biron bir voqea sodir bo'lganda yoki ma'lum bir qoidaga bo'ysunganda elementlarga CSS qoidalarini qo'llash imkonini beradi. Psevdo-sinflar quyidagi xususiyatlarga ega bo'lgan elementlarni tavsiflaydi:

: hover - sichqoncha kursori ustida turgan har qanday element;

: fokus - klaviatura yordamida harakatlangan yoki sichqoncha yordamida faollashtirilgan interaktiv element;

: faol - foydalanuvchi tomonidan faollashtirilgan element;

: haqiqiy - brauzerda ko'rsatilgan ma'lumotlar turiga muvofiqligi tekshirilgan shakl maydonlari;

: yaroqsiz - tarkibi ko'rsatilgan ma'lumotlar turiga to'g'ri kelmaydigan shakl maydonlari;

: yoqilgan - barcha faol shakl maydonlari;

: o'chirilgan - o'chirilgan shakl maydonlari, ya'ni faol bo'lmagan holatda bo'lish;

: diapazonda - qiymatlari belgilangan diapazonda bo'lgan maydon maydonlari;

: diapazondan tashqarida-qiymatlari belgilangan diapazonga kiritilmagan shaklli maydonlar;

: lang () - ko'rsatilgan tilda matnli elementlar;

: not (selektor) - belgilangan selektorni o'z ichiga olmaydigan elementlar - sinf, identifikator, forma maydonining nomi yoki turi -: not ();

: maqsad - hujjatda havola qilingan # belgisi bo'lgan element;

: tekshirildi - tanlangan (foydalanuvchi tomonidan tanlangan) shakl elementlari.

2.10. Strukturaviy psevdo-klass selektori

Strukturaviy psevdo-sinflar bolalarni qavs ichida ko'rsatilgan parametr bo'yicha tanlaydi:

: n -bola (g'alati) - g'alati bolalar;

: n -bola (hatto) - hatto bolalar;

: nth -bola (3n) - bolalar orasida har uchinchi element;

: nth -bola (3n + 2) - ikkinchi boladan boshlanadigan har uchinchi elementni tanlaydi (+2);

: nth -bola (n + 2) - ikkinchisidan boshlab barcha elementlarni tanlaydi;

: nth -bola (3) - uchinchi bolani tanlaydi;

: nth-last-child ()-bolalar ro'yxatida ko'rsatilgan joyga o'xshash elementni tanlaydi: nth-child (), lekin oxiridan boshlab, teskari yo'nalishda;

: birinchi bola - sizga tegning faqat birinchi bolasini uslublash imkonini beradi;

: last -child - tegning oxirgi bolasini formatlash imkonini beradi;

: only -child - yagona bola bo'lgan elementni tanlaydi;

: bo'sh - bolasiz elementlarni tanlaydi;

: root - hujjatning ildizi bo'lgan elementni tanlaydi - html elementi.

2.11. Psevdo-sinflarning konstruktiv tipini tanlash

Bolalar yorlig'ining o'ziga xos turini ko'rsating:

: nth-of-type ()-elementlarni o'xshashlik bo'yicha tanlaydi: nth-child (), faqat element turini hisobga oladi;

: birinchi turdagi-berilgan turdagi birinchi bolani tanlaydi;

: oxirgi turdagi-berilgan turdagi oxirgi elementni tanlaydi;

: nth-last-of-type ()-oxiridan boshlab, ko'rsatilgan joyga qarab, elementlar ro'yxatida berilgan turdagi elementni tanlaydi;

: faqat turdagi-ota-ona elementlari farzandlari orasida belgilangan turdagi yagona elementni tanlaydi.

2.12. Pseudo element tanlash

Psevdo-elementlar tarkib xususiyati yordamida yaratilgan tarkibni qo'shish uchun ishlatiladi:

: birinchi harf - har bir xatboshining birinchi harfini tanlaydi, faqat blok elementlariga taalluqlidir;

: birinchi qator - element matnining birinchi qatorini tanlaydi, faqat blokli elementlarga qo'llaniladi;

: oldin - elementdan oldin hosil qilingan tarkibni kiritadi;

: after - elementdan keyin hosil qilingan tarkibni qo'shadi.

3. Selektorlarning kombinatsiyasi

Formatlash uchun elementlarni aniqroq tanlash uchun siz tanlovchilar kombinatsiyasidan foydalanishingiz mumkin:

img: nth-of-type (even)-muqobil matni css so'zini o'z ichiga olgan barcha juft rasmlarni tanlaydi.

4. Selektorlarni guruhlash

Xuddi shu uslub bir vaqtning o'zida bir nechta elementlarga qo'llanilishi mumkin. Buning uchun deklaratsiyaning chap tomonida kerakli tanlagichlarni vergul bilan ajratib yozing:

H1, h2, p, span (rang: pomidor; fon: oq;)

5. Meros va kaskad

Meros va kaskad CSS -da bir -biri bilan chambarchas bog'liq bo'lgan ikkita asosiy tushunchadir. Meros - bu elementlarning xususiyatlarini ota -onasidan (ularni o'z ichiga olgan element) meros qilib olishini bildiradi. Kaskad hujjatda har xil uslublar jadvalining qanday qo'llanilishi va qarama -qarshi qoidalar bir -birini bekor qilishida namoyon bo'ladi.

5.1. Meros olish

Meros olish muayyan xususiyatlarning ajdoddan avlodlariga o'tishi mexanizmidir. CSS spetsifikatsiyasi rang, shrift, harflar oralig'i, satr balandligi, ro'yxat uslubi, matnni tekislash, matnni chizish, matnni o'zgartirish, ko'rish, oq kabi sahifadagi matn tarkibiga tegishli xususiyatlarni meros qilib olishni ta'minlaydi. - bo'shliq va so'z oralig'i. Bu ko'p hollarda qulay, chunki veb -sahifadagi har bir element uchun shrift hajmini va shrift turkumini o'rnatish shart emas.

Blokni formatlash xususiyatlari meros qilib olinmagan. Bular fon, chegara, displey, suzuvchi va aniq, balandlik va kenglik, chegara, min-max balandlik va kenglik, kontur, to'ldirish, to'ldirish, pozitsiya, matnni bezatish, vertikal tekislash va z-indeks.

Majburiy meros

Yordamida kalit so'z irsiyat Siz elementni har qanday xususiyat qiymatini ota -ona elementidan majburan majburlashingiz mumkin. Bu hatto sukut bo'yicha meros bo'lmagan mulklar uchun ham ishlaydi.

CSS uslublari qanday o'rnatiladi va ishlaydi

1) uslublar ota -elementdan meros bo'lishi mumkin (meros qilib olingan xususiyatlar yoki meros qiymati yordamida);

2) Quyidagi uslublar jadvalida joylashgan uslublar yuqoridagi jadvalda joylashgan uslublarni bekor qiladi;

3) Turli manbalardan olingan uslublar bitta elementga qo'llanilishi mumkin. Brauzerni ishlab chiqish rejimida qaysi uslublar qo'llanilishini tekshirishingiz mumkin. Buni amalga oshirish uchun elementning ustiga bosing. o'ng tugmasini bosing sichqonchani bosing va "Kodni ko'rish" -ni tanlang (yoki shunga o'xshash). O'ng ustunda ushbu element uchun o'rnatilgan yoki asosiy elementdan meros bo'lib o'tgan barcha xususiyatlar, shuningdek ular ko'rsatilgan uslub fayllari va kod qatorining tartib raqami ko'rsatiladi.


Guruch. 2. Ishlab chiquvchi rejimi Google brauzeri Chrome

4) Uslubni belgilashda siz har qanday selektor kombinatsiyasidan foydalanishingiz mumkin - element tanlash, psevdo -klass elementi, sinf yoki element identifikatori.

div (chegara: 1 piksel qattiq #eee;) #o'rash (kengligi: 500 piksel;). quti (suzish: chap;). aniq (aniq: ikkalasi ham)

5.2. Kaskad

Kaskad Xuddi shu elementga har xil CSS qoidalari qo'llaniladigan vaziyatda yakuniy natijani boshqaruvchi mexanizm. Xususiyatlarning qo'llanilish tartibini belgilaydigan uchta mezon bor - muhim qoida, o'ziga xoslik va uslublar jadvalining kiritilish tartibi.

! Muhim qoida

Qoidalarning og'irligi! Muhim kalit so'z yordamida o'rnatilishi mumkin, u xususiyat qiymatidan so'ng darhol qo'shiladi, masalan, span (shrift-vazn: qalin! Muhim;). Qoidani deklaratsiyaning oxirida, yopilish qavsidan oldin, bo'sh joysiz qo'yish kerak. Bunday e'lon boshqa barcha qoidalardan ustun bo'ladi. Ushbu qoida sizga uslublar bilan faylga to'g'ridan -to'g'ri kirish imkoni bo'lmaganda, xususiyatlar qiymatini bekor qilish va elementlar guruhidan yangisini o'rnatish imkonini beradi.

O'ziga xoslik

Har bir qoida uchun brauzer hisob -kitob qiladi selektorning o'ziga xosligi va agar element ziddiyatli mulk deklaratsiyasiga ega bo'lsa, eng o'ziga xosligi bo'lgan qoida hisobga olinadi. O'ziga xoslik qiymati to'rt qismdan iborat: 0, 0, 0, 0. Tanlovchining o'ziga xosligi quyidagicha aniqlanadi:

id uchun 0, 1, 0, 0 qo'shiladi;
Sinf uchun 0, 0, 1, 0 qo'shiladi;
Har bir element va soxta element uchun 0, 0, 0, 1 qo'shiladi;
to'g'ridan -to'g'ri elementga qo'shilgan inline uslub uchun - 1, 0, 0, 0;
universal tanlovchining o'ziga xosligi yo'q.

H1 (rang: ochiq ko'k;) / * o'ziga xoslik 0, 0, 0, 1 * / em (rang: kumush;) / * o'ziga xoslik 0, 0, 0, 1 * / h1 em (rang: oltin;) / * o'ziga xoslik: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # asosiy p.haqida (rang: ko'k;) / * o'ziga xoslik: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .sidebar (rang: kulrang;) / * o'ziga xoslik 0, 0, 1, 0 * / #sidebar (rang: to'q sariq;) / * o'ziga xoslik 0, 1, 0, 0 * / li # yon panel (rang: suv;) / * o'ziga xoslik: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

Natijada, bu qoidalar o'ziga xosligi katta bo'lgan elementga qo'llaniladi. Masalan, agar element 0, 0, 0, 2 va 0, 1, 0, 1 qiymatlari bilan ikkita o'ziga xos xususiyatga bo'ysunsa, ikkinchi qoida g'alaba qozonadi.

Qo'shilgan jadvallarning tartibi

Siz bir nechta tashqi uslublar jadvallarini yaratishingiz va ularni bitta veb -sahifaga ulashingiz mumkin. Agar har xil jadvallar bitta element uchun har xil xususiyatli qiymatlarni o'z ichiga oladigan bo'lsa, unda quyidagi ro'yxatdagi uslublar jadvalida topilgan qoida elementga qo'llaniladi.