uy
Sozlamalar 
CSS selektorlari. Selektor turlari. CSS selektorlari va ularning turlari Selektor turlari va ularning maqsadi

CSS selektorlari. Selektor turlari. CSS selektorlari va ularning turlari Selektor turlari va ularning maqsadi

Jami yetti turdagi selektor mavjud. Bu:

  • Teg selektori
  • Sinf selektori
  • ID selektori
  • Universal selektor
  • Atribut selektori
  • Psevdo-sinf selektori
  • Pseudo element selektori

Eng oddiyi teg nomi sifatida burchakli qavslarsiz yoziladi. Masalan, div.

Ushbu yozuv bilan biz barcha teglarning butun mazmunini aytamiz

hujjatimiz yoki hujjatlarimiz qizil shrift bilan yoziladi.

Agar biz bitta xatboshini berishimiz kerak bo'lsa, masalan, fon. Keyin biz sinf selektoridan foydalanishimiz mumkin. Lekin qoidalarni yozishdan oldin, biz tegda kerak

Ushbu paragrafning atributini yozing sinf, uning ma'nosida siz xohlagan narsani yozishingiz mumkin (lotin harflaridan tashqari, siz defis va raqamlardan foydalanishingiz mumkin), ammo keyinroq u nimani nazarda tutayotgani sizga tushunarli bo'lishi uchun selektorimizga nom berishingiz kerak. . Keyin uslublar jadvalida yoki tegda o'rtasidagi hujjatimizning biz nuqta yozamiz va undan keyin atribut qiymati sinf, va jingalak qavslarda biz ushbu paragraf uchun qoidalarni o'rnatamiz.
Agar hujjatda:

Bu
uslublar jadvalida:

Pravilo (
…
}

Shu bilan birga, turli hujjat elementlari bir xil sinf atributlari qiymatlariga ega bo'lishi mumkin. Ya'ni, biz bir sinfga bir nechta teglarni belgilashimiz mumkin va ularning mazmuni qandaydir tarzda rasmiylashtiriladi. Bu bizga universal qoida yaratish imkonini beradi, masalan, matnning muhim qismlarini ajratib ko'rsatish va shunchaki hujjatga atribut qo'shish. sinf teglarda.

Shuni ta'kidlash kerakki, HTML-dagi id atributining qiymati noyobdir. Sinfdan farqli o'laroq, biz uni biron bir tegga tayinlay olmaymiz, faqat bittasiga! Uslublar jadvalida u hash belgisi sifatida tasvirlangan va hujjatda tegga qandaydir qiymatga ega bo'lgan id atributini qo'shishingiz kerak.
Agar hujjatda:

Bu
uslublar jadvalida:
#pravilo(
…
}

Universal selektor yulduzcha sifatida yozilgan. Jadvalda ushbu selektor uchun qoidalarni o'rnatgan bo'lsangiz, u holda bu qoida barcha teglar tarkibiga qo'llaniladi.
*{
…
}

Ushbu to'rtta selektor turi bugungi kunda barcha brauzerlarda ishlaydi. Ammo hamma joyda ham ishlamaydigan selektorlar mavjud, masalan Internet Explorer 7.6 va undan past versiyalar.

Ular shunday yozilgan:

{
…
}

Ushbu yozuv bilan biz atributga ega bo'lgan teglar tarkibidagi hamma narsani aytamiz sarlavha, jingalak qavs ichida yozilgan shaklga ega bo'ladi. Bundan tashqari, bu atributning ma'nosi bor-yo'qligi umuman muhim emas. U bo'sh bo'lishi va shunday yozilishi mumkin:

Qanday bo'lmasin, tegga

Selektorda yozilgan qoidalar qo'llaniladi.
Agar siz atributga qoidalar qo'llanilishini istasangiz (masalan, sarlavha) ma'lum bir qiymatga ega bo'lsa, uni quyidagicha yozishingiz kerak:

{
…
}

Agar biron bir atributga ega bo'lgan ma'lum bir teg tarkibiga qoidalar qo'llanilishini istasangiz (masalan, sarlavha), ma'lum bir ma'noga ega bo'lsa, u quyidagicha yozilishi kerak:

p(
…
}

Agar atributli teglar tarkibiga qoidalar qo'llanilishini istasak sarlavha(yoki boshqasi), uning ma'nosi butun so'zni o'z ichiga oladi, keyin uni shunday yozishingiz kerak:

{
…
}

sarlavha(yoki boshqasi), uning ma'nosida butun so'z emas, balki shunchaki matnning bir qismi mavjud (masalan, Kaspiy so'zi Kaspiyni o'z ichiga oladi). Keyin uni quyidagicha yozishingiz kerak:

{
…
}

Agar atributga ega bo'lgan teg mazmuniga qoidalar qo'llanilishini istasak sarlavha(yoki boshqa), ma'nosi ba'zi belgilar (harflar) bilan boshlanadi. Keyin uni quyidagicha yozishingiz kerak:

{
…
}

Agar atributga ega bo'lgan teg mazmuniga qoidalar qo'llanilishini istasak sarlavha(yoki boshqa), ma'nosi ba'zi belgilar (harflar) bilan tugaydi. Keyin uni quyidagicha yozishingiz kerak:

{
…
}

Atribut selektorlari juda kuchli vosita bo'lib, afsuski, bugungi kunda unchalik keng qo'llanilmaydi, Microsoft va uning IE 6.7 va undan past versiyalari uchun "rahmat". Biroq, tez orada, IE 6.7 va undan past versiyalari nihoyat o'chib ketganda, bu selektorlar CSS-ning bir qismiga aylanadi va keng qo'llaniladi.

Pseudo-sinf selektorlari elementlarning mazmuni qandaydir holatda bo'lsa, uning ko'rinishi uchun javobgardir.
Bu selektorlar :link, :visited, :active, :hover, :focus va :first-child. Birinchi ikkitasi faqat havolalarga tegishli, ya'ni. teglar mazmuniga , qolganlari esa kontentga ega bo'lgan har qanday tegga qo'llanilishi mumkin.

:link foydalanuvchi teginadigan havolalarni formatlaydi.

a: havola (rang: ko'k)

Ushbu yozuv bilan biz hujjatdagi yoki foydalanuvchi tegmagan hujjatlardagi barcha havolalar ko'k rangda bo'lishini aytamiz.

a:ziyorat qilingan (rang:qizil;)

:active faol elementni bezatadi (sichqonchani bosish paytida). Har qanday elementga qo'llanilishi mumkin, lekin IE 6 da faqat giperhavolalar uchun ishlaydi.

p: faol (rang: qizil)

Ushbu yozuv bilan biz sichqonchani bosish paytida barcha paragraflar qizil (harflar) bo'yalganligini aytamiz.

:hover – foydalanuvchi sichqonchani sichqoncha bilan olib kelganida elementni bezatadi. Har qanday elementga ham qo'llanilishi mumkin, lekin IE 6 da faqat giperhavolalar uchun ishlaydi.

p: fokus (rang: qizil;)

Tab tugmasini bosganingizda elementlardagi matn qizil rangda bo'ladi

:birinchi bola - barcha elementlarning birinchi "bolalari" uchun qoidalarni belgilaydi. IE 6 da ishlamaydi.
Biz boshqa maqolada bolalar va ota-onalar nima ekanligi haqida ko'proq gaplashamiz, ammo hozircha men boshqa teg ichidagi teg uning "bolasi" ekanligini aytaman. Masalan, bizda kod bor:

Brauzerda ko'rilganda, birinchi tegning mazmuni

Qizil rangga aylanadi.

Faqat ikkita psevdoelement selektori mavjud. Bular: birinchi qator va: birinchi harf
:birinchi qator - birinchi qator (satr)
:birinchi harf - birinchi belgi
Agar yozsak:

p: birinchi qator (rang: ko'k), keyin

Hujjat yoki hujjatlarning barcha paragraflarida birinchi qatorlar ko'k rangda bo'ladi.

Agar yozsak:

p: birinchi harf (rang: ko'k), keyin

barcha paragraflarda birinchi harflar ko'k rangda bo'ladi.
Ushbu selektorlarning ikkalasi ham IE 6 da ishlamaydi.

Agar biror narsani o'tkazib yuborgan bo'lsangiz yoki biror joyda xatoga yo'l qo'ygan bo'lsangiz, bularning barchasi tanlovchilarga tegishli bo'lib tuyuladi;

Xo'sh, boshlanuvchilar uchun aytamanki, selektor elementni noyob tarzda aniqlash uchun ishlatiladi html hujjati, biz ma'lum bir CSS uslubini qo'llamoqchimiz.

Element selektori

Shu paytgacha biz ushbu selektor bilan ishladik. Biz ushbu uslubni qo'llamoqchi bo'lgan html elementining nomi selektor sifatida ishlatilgan. Bular. Masalan, (P) xatboshi uchun sinf yozgandan so'ng, sahifadagi barcha paragraflar ushbu sinf uslubiga ega bo'ldi.

P{
shrift o'lchami: 12px
}

Endi birinchi xatboshini bitta uslubda, ikkinchisini boshqasida, uchinchisini uchinchisida va hokazo qilish kerak bo'lgan vaziyatni tasavvur qiling. Bu erda u bizga yordam beradi sinf bo'yicha selektor.

Sinf bo'yicha selektor

Keling, CSS-da umumiy sinfni qanday yaratishni ko'rib chiqaylik. Va buni qilish juda oddiy: avval biz nuqta qo'yamiz, so'ngra darhol bo'sh joysiz sinf nomini, so'ngra uslubni jingalak qavslarga yozamiz. Xo'sh, masalan:

.yashil {
shrift oilasi: arial, verdana, sans-serif;
shrift o'lchami: 12px; rang: yashil;
}

Ushbu uslubni qanday qo'llash kerak?

Aytaylik, biz ushbu uslubni hujjatning ma'lum bir bandiga qo'llamoqchimiz. Bu html da shunday ko'rinadi:

sinf = "yashil" > ... paragraf matni...

Ko'rib turganingizdek, atribut ishlatiladi sinf uslub nomining ma'nosi bilan. Tushunarli? Mana sizga yana bir misol:

Bu oddiy paragraf, u element selektoridan foydalanadi


Class = "yashil"> Ushbu paragraf yashil rangga ega, chunki unga sinf qo'llanilgan


Class = "katta_qizil" > Va bu paragraf kattaroq shrift va qizil rangda


Bu paragraf yana normal, element selektor klassi bo'yicha

p {
font-family:arial,verdana,sans-serif;
shrift o'lchami: 18px;
}
.yashil(rang: yashil;)
.katta_qizil{
shrift o'lchami: 28px;
rang: qizil;
}

Biz birinchi navbatda barcha paragraflar uchun asosiy uslubni belgilaymiz (element bo'yicha selektor), so'ngra biron bir paragrafda biror narsani o'zgartirmoqchi bo'lsak, u uchun maxsus uslub yaratamiz (sinf bo'yicha selektor) va uni ushbu paragrafga tayinlaymiz. Bu juda maxsus sinfni yaratganimizda, biz u erda faqat ushbu element uchun asosiy uslubga nisbatan qo'shmoqchi bo'lgan yoki o'zgartirmoqchi bo'lgan xususiyatlarni yozishimiz kerak.

Yuqoridagi misoldagi sinflar nafaqat paragrafga, balki, masalan, sarlavhalarga yoki masalan, jadval katakchasiga yoki qisqacha aytganda, ular biror narsaga ta'sir qilishi mumkin bo'lgan joyda qo'llanilishi mumkin; (bu holda, rang va matn varianti mavjud bo'lgan joyda).

Siz nuqtadan oldin element nomini ko'rsatib, sinfni faqat ma'lum bir elementga (masalan, paragraf) ta'sir qilishingiz mumkin:

P.yashil(rang: yashil;)

Endi yashil sinf P elementidan boshqa hech narsada harakat qilmaydi.

Yuqori

Identifikator bo'yicha tanlash

Hujjatdagi barcha boshqalardan noyob va farq qiladigan bitta elementni tanlash kerak bo'lsa, bu selektor ishlatiladi. Masalan, sahifadagi birinchi sarlavhani ma'lum bir tarzda ajratib ko'rsatamiz:

html qismi:

<Н1 id = "birinchi sarlavha" > Sahifaning birinchi sarlavhasi

css qismi:

H1#birinchi sarlavha { rang: qizil; shrift vazni: qalin; matnni tekislash: markaz }

Ko'rib turganingizdek, html qismida class atributi o'rniga id atributi, css da nuqta o'rniga # belgisi qo'llaniladi.

Aslini olganda, xuddi shu narsani kimni yoqtirishingizga qarab, sinf selektori yordamida qilish mumkin :)

Yuqori

Kontekst selektori

Bu juda foydali narsa. Aytaylik, bizda jadvallar va matn paragraflari mavjud va jadvalda ham, paragraflarda ham qalin harflar bilan yozilgan so'zlar mavjud. Shunday qilib, biz to'satdan paragrafdagi qalin harf bilan ta'kidlangan so'zlar yashil rangga aylanganiga ishonch hosil qilishimiz kerak edi. Demak, bu yerda.

Vlad Merzhevich

Identifikator (shuningdek, "ID selektori" deb ataladi) element uchun noyob nomni belgilaydi, uning uslubini o'zgartirish va skriptlar orqali unga murojaat qilish uchun ishlatiladi.

Identifikatordan foydalanish sintaksisi quyidagicha.

Universal selektor

Vlad Merzhevich

Ba'zan veb-sahifaning barcha elementlari uchun bir vaqtning o'zida bitta uslubni o'rnatishingiz kerak, masalan, shrift yoki matn uslubini o'rnatish. Bunday holda, veb-sahifaning istalgan elementiga mos keladigan universal selektor yordam beradi.

Yulduzcha belgisi (*) universal selektorni belgilash uchun ishlatiladi va umuman sintaksisi quyidagicha.

* (Uslub qoidalarining tavsifi)

Atribut selektorlari

Vlad Merzhevich

Ko'pgina teglar qanday atributlardan foydalanishiga qarab o'z ta'sirida farqlanadi. Masalan, teg tip atributining qiymatini o‘zgartirish orqali tugma, matn maydoni va boshqa shakl elementlarini yaratishi mumkin. Biroq, INPUT selektoriga uslub qoidalarini qo'shish ushbu teg yordamida yaratilgan barcha elementlarga uslubni bir vaqtning o'zida qo'llaydi. Bunday elementlarning uslubini moslashuvchan boshqarish uchun CSS-ga atribut selektorlari kiritildi.

Bolalar tanlovchilari

Vlad Merzhevich

To'liq element - bu to'g'ridan-to'g'ri asosiy element ichida joylashgan element. Hujjat elementlari orasidagi munosabatlarni yaxshiroq tushunish uchun kichik kodni ko'rib chiqamiz (misol 12.1).

12.1-misol. Hujjatdagi elementlarni joylashtirish

HTML5 CSS 2.1 IE Cr Op Sa Fx

Qo'shni selektorlar

Vlad Merzhevich

Veb-sahifaning elementlari hujjat kodida bir-birini darhol kuzatib borsa, ulashgan deb ataladi. Element munosabatlariga bir nechta misollarni ko'rib chiqaylik.

Lorem ipsum dolor amet o'tir.

Ushbu misolda teg tegning farzandidir

Chunki u shu idish ichida. Mos ravishda

Ota-ona vazifasini bajaradi .

Kontekst selektorlari

Vlad Merzhevich

Veb-sahifani yaratishda siz ko'pincha ba'zi teglarni boshqalarga joylashtirishingiz kerak. Ushbu teglar uchun uslublar to'g'ri ishlatilishini ta'minlash uchun faqat ma'lum bir kontekstda ishlaydigan selektorlar yordam beradi. Masalan, teg uchun uslubni o'rnating faqat idish ichida joylashganida

Shunday qilib, siz bir vaqtning o'zida individual teg uchun ham, boshqasining ichida joylashgan teg uchun uslubni o'rnatishingiz mumkin.

Selektor HTML hujjatidagi biz ma'lum bir CSS uslubini qo'llamoqchi bo'lgan elementni yagona aniqlash uchun ishlatiladi.

  • Element bo'yicha selektor;
  • Sinf bo'yicha selektor;
  • Id bo'yicha selektor;
  • Kontekst selektori;

Element selektori

Shu paytgacha biz ushbu selektor bilan ishladik. Biz ushbu uslubni qo'llamoqchi bo'lgan html elementining nomi selektor sifatida ishlatilgan. Bular. Masalan, (P) xatboshi uchun sinf yozgandan so'ng, sahifadagi barcha paragraflar ushbu sinf uslubiga ega bo'ldi.

P(
shrift o'lchami: 12px
}

Endi birinchi xatboshini bitta uslubda, ikkinchisini boshqasida, uchinchisini uchinchisida va hokazo qilish kerak bo'lgan vaziyatni tasavvur qiling. Bu erda u bizga yordam beradi sinf bo'yicha selektor.

Sinf bo'yicha selektor

Keling, CSS-da umumiy sinfni qanday yaratishni ko'rib chiqaylik. Va buni qilish juda oddiy: avval nuqta qo'yamiz, so'ngra darhol bo'sh joysiz sinf nomini, so'ngra uslubni jingalak qavslarga yozamiz. Masalan:

.yashil(
shrift oilasi: arial, verdana, sans-serif;
shrift o'lchami: 12px; rang: yashil;
}

Ushbu uslubni qanday qo'llash kerak?

Aytaylik, biz ushbu uslubni hujjatning ma'lum bir bandiga qo'llamoqchimiz. Bu html da shunday ko'rinadi:

Paragraf matni...

Ko'rib turganingizdek, atribut ishlatiladi sinf uslub nomining ma'nosi bilan.

MISOL:

Bu oddiy paragraf, u element selektoridan foydalanadi


Ushbu paragraf yashil rangda, chunki unga sinf qo'llanilgan


Va bu paragraf kattaroq shrift va qizil rangda


Bu paragraf yana normal, element selektor klassi bo'yicha

p(
font-family:arial,verdana,sans-serif;
shrift o'lchami: 18px;
}
.yashil (rang: yashil;)
.big_red(
shrift o'lchami: 28px;
rang: qizil;
}

Biz birinchi navbatda barcha paragraflar uchun asosiy uslubni belgilaymiz (element bo'yicha selektor), so'ngra biron bir paragrafda biror narsani o'zgartirmoqchi bo'lsak, u uchun maxsus uslub yaratamiz (sinf bo'yicha selektor) va uni ushbu paragrafga tayinlaymiz. Bu juda maxsus sinfni yaratganimizda, biz u erda faqat ushbu element uchun asosiy uslubga nisbatan qo'shmoqchi bo'lgan yoki o'zgartirmoqchi bo'lgan xususiyatlarni yozishimiz kerak.

Yuqoridagi misoldagi sinflar faqat paragrafga emas, balki, masalan, sarlavhalarga yoki, masalan, jadval katakchasiga yoki qisqasi, ular hamma joyda qo'llanilishi mumkin; biror narsaga ta'sir qiladi (bu holda rang va matn parametri bo'lgan joyda).

Siz nuqtadan oldin element nomini ko'rsatib, sinfni faqat ma'lum bir elementga (masalan, paragraf) ta'sir qilishingiz mumkin:

P.yashil (rang: yashil;)

Endi yashil sinf P elementidan boshqa hech narsada harakat qilmaydi.

Identifikator bo'yicha tanlash

Hujjatdagi barcha boshqalardan farq qiladigan yagona, yagona elementni tanlash kerak bo'lsa, bu selektor ishlatiladi. Masalan, sahifadagi birinchi sarlavhani ma'lum bir tarzda ajratib ko'rsatamiz:

html qismi:

<Н1 id="firstheader">Sahifaning birinchi sarlavhasi

css qismi:

H1#firstheader (rang: qizil; shrift og'irligi: qalin; matnni tekislash: markaz)

Ko'rib turganingizdek, html qismida class atributi o'rniga id atributi, css da nuqta o'rniga # belgisi qo'llaniladi.

Aslida, xuddi shunday J sinf bo'yicha selektor yordamida amalga oshirilishi mumkin

Kontekst selektori

Bu juda foydali narsa. Aytaylik, bizda jadvallar va matnning paragraflari bo'lgan sahifamiz bor va jadvalda ham, paragraflarda ham qalin harflar bilan yozilgan so'zlar mavjud. Abzasdagi qalin harf bilan belgilangan so'zlar yashil rangga aylanishiga ishonch hosil qilish kerak. Shunday qilib, bu erda:

p kuchli (rang: yashil)

Bular. boshida P keyin bo'sh joy, keyin KUCHLI, va shundan keyingina uslub. Bu satr shunday o'qiydi: Agar element ichida bo'lsa P element mavjud KUCHLI keyin kuchli elementga yashil uslubni belgilang.

Yuvalash har qanday darajada bo'lishi mumkin. Mana yana bir misol: “Agar to'satdan jadval katakchasi ichida ( td), paragraf ( P) , uning ichida qalin bilan ta'kidlangan so'z bo'ladi ( KUCHLI), keyin bu so'z qizil rangga aylansin! "

td p kuchli (rang: qizil;)

Hujjatning tashqi ko'rinishini tasvirlash tili, CSS, doimo rivojlanib bormoqda. Vaqt o'tishi bilan nafaqat uning kuchi va funksionalligi, balki moslashuvchanligi va foydalanish qulayligi ham oshadi.

Keling, buni aniqlashni boshlaylik. Har qanday CSS darsligini oching; kamida bitta bo'lim selektor turlariga bag'ishlangan. Buning ajablanarli joyi yo'q, chunki ular eng ko'plaridan biri qulay usullar sahifa tarkibini boshqarish. Ularning yordami bilan siz mutlaqo hamma bilan muloqot qilishingiz mumkin HTML elementlari. Hozirgi vaqtda 7 turdagi selektor mavjud:

  • teglar uchun;
  • sinflar uchun;
  • ID uchun;
  • universal;
  • atributlar;
  • psevdo-sinflar bilan o'zaro aloqada bo'lish;
  • psevdoelementlarni boshqarish uchun.

Sintaksis oddiy. Uni qanday ishlatishni o'rganish uchun ular haqida o'qing. Sizning holatingizda kontentni boshqarish uchun qaysi variantni tanlash yaxshidir? Keling, buni tushunishga harakat qilaylik.

Teg selektorlari

Bu yozib olish uchun maxsus bilim talab qilmaydigan eng oddiy variant. Teglarni boshqarish uchun siz ularning nomidan foydalanishingiz kerak. Faraz qilaylik, saytingiz sarlavhasi teg bilan o'ralgan

. Uni CSS-da boshqarish uchun siz header() selektoridan foydalanishingiz kerak.

Afzalliklari: foydalanish qulayligi, ko'p qirrali.

Kamchiliklari - moslashuvchanlikning to'liq yo'qligi. Yuqoridagi misolda barcha sarlavha teglari bir vaqtning o'zida tanlanadi. Lekin faqat bittasini boshqarish kerak bo'lsa-chi?

Sinf selektorlari

Eng keng tarqalgan variant. Sinf atributiga ega teglarni boshqarish uchun mo'ljallangan. Aytaylik, sizning kodingizda uchta blok bor

, ularning har biriga ma'lum bir rang berilishi kerak. Buni qanday qilish kerak? Standart CSS teglar bo'yicha selektorlar mos kelmaydi, ular bir vaqtning o'zida barcha bloklar uchun parametrlarni ko'rsatadi. Yechim oddiy. Elementlarga sinf tayinlang. Masalan, birinchi div class=‘red’, ikkinchisi – class=‘blue’, uchinchisi – class=‘green’ oldi. Endi ularni CSS jadvallari yordamida tanlash mumkin.

Sintaksis quyidagicha: biz nuqtani (“.”) ko'rsatamiz, shundan so'ng biz sinf nomini yozamiz. Birinchi blokni boshqarish uchun biz .red konstruksiyadan foydalanamiz. Ikkinchisi .blue va boshqalar.

Muhim! Sinf atributi uchun aniq qiymatlardan foydalanish tavsiya etiladi. Transliteratsiya (masalan, krasiviy-blok) yoki harflar/raqamlarning tasodifiy birikmalaridan (ojfh834871) foydalanish yomon shakl hisoblanadi. Siz, albatta, sizdan keyin loyihada ishlaydiganlar duch keladigan qiyinchiliklarni hisobga olmaganda, bunday kodda chalkashib ketasiz. Eng yaxshi variant - BEM kabi ba'zi metodologiyalardan foydalanish.

Afzalliklari: ancha yuqori moslashuvchanlik.

Kamchiliklari - bir nechta elementlar bir xil sinfga ega bo'lishi mumkin, ya'ni ular bir vaqtning o'zida tahrirlanadi. Muammo metodologiya yordamida, shuningdek, preprotsessorlarni meros qilib olish orqali hal qilinadi. Kamroq, sass yoki boshqa protsessorni o'zlashtirganingizga ishonch hosil qiling, ular sizning ishingizni sezilarli darajada soddalashtiradi.

ID bo'yicha tanlovchi

Dizaynerlar va dasturchilarning ushbu variant bo'yicha fikrlari noaniq. Ba'zi darsliklarCSSumuman foydalanish tavsiya etilmaydiID,chunki beparvo ishlatilsa, ular meros bilan bog'liq muammolarga olib kelishi mumkin. Biroq, ko'plab mutaxassislar ularni markirovka bo'ylab faol ravishda joylashtiradilar. Sen Qaror qabul qil. Sintaksis: xesh belgisi ("# "), keyin blok nomi. Masalan,#qizil.

IDsinfdan bir necha jihatdan farq qiladi. Birinchidan, bir sahifada ikkita bir xil bo'lishi mumkin emas.ID.Ularga noyob nomlar berilgan. Ikkinchidan, bunday selektor yuqoriroq ustuvorlikka ega. Bu shuni anglatadiki, agar siz blokka sinf bersangizqizilva jadvallarda ko'rsatingCSSqizil va keyin unga tayinlangid ko'kva ko'k rangni belgilang, blok ko'kka aylanadi.

Afzalliklar - teglar va sinflar uchun uslublarga e'tibor bermasdan, ma'lum bir elementni boshqarishingiz mumkin.

Kamchiliklari - ko'p miqdorda chalkashib ketish osonIDVasinf.

Muhim! Agar siz BEM metodologiyasidan (yoki uning analoglaridan) foydalansangiz,IDUmuman olganda, sizga kerak emas. Ushbu tartib texnikasi noyob sinflardan foydalanishni o'z ichiga oladi, bu ancha qulayroqdir.

Universal selektor

Sintaksis: yulduzcha ("*") va jingalak qavslar, ya'ni *{}.

Bir vaqtning o'zida barcha sahifa elementlariga ma'lum atributlarni belgilash uchun foydalaniladi. Bu qachon foydali bo'lishi mumkin? Misol uchun, agar siz sahifa xususiyatini o'rnatmoqchi bo'lsangizquti o'lchami: chegara qutisi.Hujjatning barcha komponentlarini boshqarish uchun emas, balki ma'lum bir blokning barcha pastki elementlarini boshqarish uchun ham foydalanish mumkin, masalan.div *().

Afzalliklar - bir vaqtning o'zida ko'p sonli elementlarni boshqarishingiz mumkin.

Kamchiliklari - etarlicha moslashuvchan emas. Bundan tashqari, ushbu selektordan foydalanish ba'zi hollarda sahifani sekinlashtirishi mumkin.

Atributlar bo'yicha

Muayyan atributga ega elementni boshqarish imkonini beradi. Masalan, sizda har xil turdagi atributga ega bo'lgan bir nechta kiritish teglari mavjud. Ulardan biri matn, ikkinchisi parol, uchinchisi raqam. Albatta, siz har biriga sinflar yoki identifikatorlarni belgilashingiz mumkin, ammo bu har doim ham qulay emas. CSS atribut selektorlari aniq teglar uchun qiymatlarni maksimal aniqlik bilan belgilash imkonini beradi. Masalan, bu kabi:

kiritish()

Ushbu atribut selektori matn turi bilan barcha kirishlarni tanlaydi.

Asbob juda moslashuvchan; u atributlarga ega bo'lishi mumkin bo'lgan har qanday teglar bilan ishlatilishi mumkin. Lekin bu hammasi emas! CSS spetsifikatsiyasi elementlarni yanada qulayroq boshqarish imkonini beradi!

Tasavvur qilaylik, sizning sahifangizda atribut to'ldiruvchisi = "Ismni kiriting" va kiritish to'ldiruvchisi = "Parolni kiriting" bilan kiritish mavjud. Ularni selektor yordamida ham tanlash mumkin! Buning uchun quyidagi qurilish qo'llaniladi:

input() yoki kiritish

Atributlar bilan yanada moslashuvchan ishlash mumkin. Aytaylik, sizda o'xshash nom atributlariga ega bo'lgan bir nechta teglar mavjud (masalan, "Kaspiy" va "Kaspiy"). Ikkalasini tanlash uchun quyidagi selektorlardan foydalaning:

CSS sarlavhasi "Kaspiysk", ya'ni "Kaspiyskiy" va "Kaspiyskaya" belgilarini o'z ichiga olgan barcha elementlarni tanlaydi.

Shuningdek, atributlari ma'lum belgilar bilan boshlanadigan teglarni tanlashingiz mumkin:

yoki ular bilan tugating:

{}.

Afzalliklar - maksimal moslashuvchanlik. Siz mavjud sahifa elementlarini sinflar bilan aralashmasdan tanlashingiz mumkin.

Kamchiliklari - nisbatan kamdan-kam hollarda, faqat muayyan holatlarda qo'llaniladi. Ko'pgina tartib dizaynerlari metodologiyani afzal ko'radilar, chunki sinfni belgilash ko'p va teng belgilarni tartibga solishdan osonroq bo'lishi mumkin. Bundan tashqari, bu selektorlar Internetda ishlamaydi Explorer versiyalari 7 va undan past. Biroq, endi eski Internet Explorer kimga kerak?

Psevdo-sinf selektorlari

Pseudo-sinf elementning holatini bildiradi. Masalan, :hover - kursor kursorni olib kelganda sahifaning bir qismi bilan sodir bo'ladigan hodisa, :visited - tashrif buyurilgan havola. Bunga:birinchi bola va:oxirgi bola kabi elementlar ham kiradi.

Ushbu turdagi selektor zamonaviy tartibda faol qo'llaniladi, chunki uning yordamida siz sahifani "jonli" qilishingiz mumkin. JavaScript ilovalari. Masalan, btn klassi bo'lgan tugma ustiga kursorni olib kelganingizda uning rangi o'zgarishiga ishonch hosil qilishni xohlaysiz. Buning uchun biz quyidagi konstruktsiyadan foydalanamiz:

Btn: suring (

Fon rangi: qizil;

Go'zallik uchun siz ushbu tugmaning asosiy xususiyatlarida o'tish xususiyatini belgilashingiz mumkin, masalan, 0,5 soniyada - bu holda tugma bir zumda qizil rangga aylanmaydi, lekin yarim soniya davomida.

Afzalliklar - ular sahifalarni "jonlantirish" uchun faol ishlatiladi. Foydalanish oson.

Kamchiliklari - yo'q. Bu haqiqatan ham qulay vosita. Biroq, tajribasiz maket dizaynerlari psevdo-sinflarning ko'pligi bilan adashib qolishlari mumkin. Muammo o'rganish va amaliyot bilan hal qilinadi.

Pseudo element selektorlari

"Pseudo elementlar" bu sahifaning HTML-da mavjud bo'lmagan, ammo baribir boshqarilishi mumkin bo'lgan qismlari. Hech narsani tushunmayapsizmi? Hamma narsa tuyulganidan ko'ra oddiyroq. Misol uchun, siz matnning qolgan qismini kichik va qora qoldirib, satrning birinchi harfini katta va qizil qilishni xohlaysiz. Albatta, siz ushbu xatni ma'lum bir sinf bilan oraliqda qo'shishingiz mumkin, ammo bu uzoq va zerikarli. Butun paragrafni tanlash va psevdoelement::birinchi harfdan foydalanish ancha oson. Bu sizga birinchi harfning ko'rinishini nazorat qilish imkonini beradi.

Juda bor katta miqdorda psevdo-elementlar. Ularni bitta maqolada sanab o'tishning iloji yo'q. Sevimli qidiruv tizimida tegishli ma'lumotlarni topishingiz mumkin.

Afzalliklar - moslashuvchan sozlash imkonini beradi tashqi ko'rinish sahifalar.

Kamchiliklari - yangi boshlanuvchilar ko'pincha ular haqida chalkashib ketishadi. Ushbu turdagi ko'plab selektorlar faqat ma'lum brauzerlarda ishlaydi.

Xulosa qiling

Selektor - kuchli vosita hujjat aylanishini nazorat qilish. Buning yordamida siz sahifaning mutlaqo har bir komponentini tanlashingiz mumkin (hatto shartli ravishda mavjud bo'lganlar ham). Barcha variantlarni o'rganishni unutmang yoki hech bo'lmaganda ularni yozib oling. Agar siz zamonaviy dizayn va ko'plab interaktiv elementlarga ega murakkab sahifalarni yaratsangiz, bu ayniqsa muhimdir.

Sozlamalar 

Sizga ham yoqishi mumkin