Assalomu alaykum, aziz o'quvchilar. Oldingi maqolalarda biz asosan CSS uslubi atributlarini o'rganib chiqdik. Ularning ko'pi bor. Ba'zilar shrift parametrlarini, boshqalari fon parametrlarini, boshqalari esa chekinish va ramkalar parametrlarini o'rnatadilar.
Ushbu maqolada biz uslublar tanlovi haqida gapiramiz. Maqolalardan birida biz allaqachon gaplashdik. Bugun biz uslub qoidasini veb-sahifa elementiga aniq bog‘lamaydigan yana bir qancha selektor turlarini ko‘rib chiqamiz. Bular maxsus selektorlar deb ataladi. Ularning bir necha turlari mavjud.
Kombinatorlar boshqa elementlarga nisbatan joylashuvi asosida veb-sahifa elementiga uslub qoidasini bog'laydigan CSS selektorlarining bir turi.
Birinchi kombinator belgisi ortiqcha(+) yoki qo'shni selektor. Plyus ikkita selektor o'rtasida o'rnatiladi:
<селектор 1> + <селектор 2> { <стиль> }
Bu holatda uslub qo'llaniladi selektor 2, lekin faqat u bilan qo'shni bo'lsa selektor 1 va undan keyin darhol keladi. Keling, bir misolni ko'rib chiqaylik:
kuchli + men (
}
...
Bu oddiy matn. Bu eskiz, Oddiy matn, qizil matn
Bu oddiy matn. Bu qalin matn, Oddiy matn, va bu oddiy matn.
Natija:
Misolda tasvirlangan uslub faqat tegga kiritilgan birinchi matnga qo'llaniladi , chunki tegdan keyin darhol keladi .
Kombinator tilda(~) qo'shni selektorlar uchun ham amal qiladi, lekin bu safar ular orasida boshqa elementlar bo'lishi mumkin. Bunday holda, ikkala selektor bir xil asosiy tegga joylashtirilishi kerak:
<селектор 1> ~ <селектор 2> { <стиль> }
Uslub qo'llaniladi selektor 2 qaysi biri ergashishi kerak selektor 1. Bir misolni ko'rib chiqing:
kuchli~i(
rang: qizil; /* Qizil matn rangi */
}
...
Bu oddiy matn. Bu qalin matn, Oddiy matn, qizil matn unga qo'llanilgan qo'shni selektor qoidasi.
Bu oddiy matn. Bu qalin matn, Oddiy matn, va bu qizil matn.
Natija:
Ko'rib turganingizdek, bu safar uslub qoidasi tegga kiritilgan ikkala matn uchun ham ishladi , ikkinchi holatda teg o'rtasida bo'lishiga qaramasdan Va tegga arziydi .
Kombinator > ga tegishli bolalar tanlovchilari. CSS uslubini to'g'ridan-to'g'ri boshqa element ichiga joylashtirilgan veb-sahifa elementiga bog'lash imkonini beradi:
<селектор 1> > <селектор 2> { <стиль> }
Uslub ga bog'langan bo'ladi selektor 2, bu to'g'ridan-to'g'ri joylashtirilgan selektor 1.
div > kuchli (
}
...
Bu oddiy matn. Va bu oddiy qalin matn.
Va natija:
Rasmda ko'rib turganingizdek, uslub qoidasi faqat birinchi tegga ta'sir qildi
, bu to'g'ridan-to'g'ri teg ichida joylashgan
, shuning uchun qoida unga taalluqli emas. Keyinchalik ko'rib chiqamiz kontekst selektori<пробел>
. Bu sizga CSS uslubini boshqa element ichida joylashgan elementga ulash imkonini beradi va har qanday joylashtirish darajasi bo'lishi mumkin: <селектор 1> <селектор 2> { <стиль> } Uslub qo'llaniladi selektor 2, agar u qandaydir tarzda o'rnatilgan bo'lsa selektor 1. Oldingi misolni ko'rib chiqaylik, faqat agar CSS tavsifi qoidalar kontekst selektorini qo'llaydi: div kuchli( Bu oddiy matn. Va bu ham kursiv qalin matn. Oddiy matn va shunchaki qalin matn Natija: Ko'rib turganingizdek, bu safar qoida ikkala tegga ham ta'sir qildi
, hatto konteynerga joylashtirilgan
. Belgilash uchun
, bu oddiygina xatboshi ichiga joylashtirilgan
CSS qoidasi umuman ishlamaydi. Atribut selektorlari - bu ma'lum bir atributni o'z ichiga olgan yoki ma'lum bir qiymatga ega bo'lganligi asosida uslubni elementga bog'laydigan maxsus selektorlar. Bunday selektorlardan foydalanishning bir nechta variantlari mavjud. Kabi ko'rinadi: <селектор>[<имя атрибута тега>] { <стиль> } Va uslubni belgilangan atribut qo'shilgan elementlarga bog'laydi. Masalan: kuchli( Avtomobil bu izsiz mexanik vosita yo'l transporti kamida 4 g'ildirak bilan. Natija: Rasmda elementga CSS qoidasi (qizil matn rangi) qo'llanilganligini ko'rishingiz mumkin kuchli, atribut qo'shilgan sarlavha. Ushbu selektorning sintaksisi quyidagicha: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Bog'laydi uslub teglari ko'rsatilgan atributga ega bo'lgan elementlarga nomi Va ma'nosi. Misol: a( Natija: Ko'rib turganingizdek, giperhavola turining ikkala elementi ham atributga ega maqsad, lekin tegga havola matnini bir yarim marta kattalashtirib, rangini qizil rangga o'zgartiruvchi CSS qoidasi qo'llaniladi.
kimning atributi maqsad ma'noga ega "_bo'sh". Ba'zi atribut qiymatlari bo'shliqlar bilan ajratilishi mumkin, masalan, sinf nomlari. Atribut qiymatlari roʻyxatida kerakli qiymat mavjud boʻlganda uslub qoidasini oʻrnatish uchun quyidagi selektordan foydalaning: [<имя атрибута тега>~=<значение>] { <стиль> } Agar atribut talab qilinadigan qiymatga ega bo'lsa yoki bo'sh joy bilan ajratilgan qiymatlar ro'yxatining bir qismi bo'lsa, uslub qo'llaniladi. Masalan: { Bizning telefonimiz: 777-77-77 Bizning manzil: Moskva st. Sovetskaya 5 Siz quyidagi natijaga erishasiz: Qoida atribut qiymatlari quyidagilarni o'z ichiga olgan elementga nisbatan qo'llaniladi: sinf ma'nosi bor tel. Identifikator va sinf qiymatlarida tire qo'yishga ruxsat beriladi. Atribut qiymatlarida chiziqcha bo'lishi mumkin bo'lgan elementlarga uslubni bog'lash uchun siz quyidagi konstruktsiyadan foydalanishingiz mumkin: [atribut|="qiymat"] (uslub) Uslub atribut qiymati belgilangan qiymatdan keyin defis bilan boshlanadigan elementlarga nisbatan qo'llaniladi. Masalan: { Natija: Misolda, uslub qoidasi faqat sinf nomi qiymat bilan boshlanadigan ro'yxat elementlari uchun amal qiladi "menyu- ". Teg atributi qiymati ma'lum bir qiymatdan boshlansa, ushbu selektor element uchun uslubni o'rnatadi. Ikkita variant bo'lishi mumkin: [<имя атрибута тега>^=<подстрока>] { <стиль> } Birinchi holda uslub teglari ko'rsatilgan atributga ega bo'lgan barcha elementlarga taalluqlidir nomi va belgilangan bilan boshlanadigan qiymat pastki qatorlar. Ikkinchi holda, xuddi shu narsa, faqat ko'rsatilgan ba'zi elementlarga asosiy selektor. Misol: a( Natija: Misol tashqi havolalarni va ichki havolalarni qanday qilib boshqacha ko'rsatishni ko'rsatadi. Tashqi havolalar har doim "http://" qatoridan boshlanadi. Shuning uchun, selektorda biz uslub faqat atributga ega bo'lgan havolalarga qo'llanilishini ko'rsatamiz href ma'no bilan boshlanadi http://. Uslubni atribut qiymati belgilangan matn bilan tugaydigan elementlarga bog‘laydi. Quyidagi sintaksisga ega: [<имя атрибута тега>$=<подстрока>] { <стиль> } Birinchi holda uslub mavjud bo'lgan barcha elementlarga taalluqlidir xususiyat belgilangan bilan nomi va belgilangan bilan tugaydigan ma'noga ega pastki qator. Ikkinchi holda, xuddi shu narsa, faqat ko'rsatilganlarga selektorlar. Shu tarzda, masalan, turli xil grafik tasvir formatlari turlicha ko'rsatilishi mumkin. Masalan: IMG ( GIF tasvir Rasm formati png Natija: Misolda, gif kengaytmali barcha rasmlar besh piksel qalinlikdagi qizil chegara bilan ko'rsatiladi. Ushbu selektor atribut qiymati ma'lum matnni o'z ichiga olgan teglarga uslubni bog'laydi. Sintaksis: [<имя атрибута тега>*=<подстрока>] { <стиль> } Uslub ega bo‘lgan elementlar bilan bog‘lanadi xususiyat belgilangan nom bilan va uning qiymati belgilangan o'z ichiga oladi pastki qator. Masalan: IMG ( Galereya papkasidan olingan rasm Boshqa jilddan rasm Natija: Misolda, uslub jilddan yuklangan rasmlarga qo'llaniladi "galereya". Bu atribut selektorlari haqida. Yuqoridagi barcha usullarni bir-biri bilan birlashtirish mumkin: Selektor[attribute1="value1"][attribute2="value2"] ( style ) Bundan tashqari, sizga maxsus CSS selektorlari haqida eslatib o'taman: Kelgusi maqolalarda biz uslublarni boshqarishning kuchli vositalarini ta'minlovchi psevdoelementlar va psevdosinflarni ham ko'rib chiqamiz. Hammasi shu, yana ko'rishguncha. Oldingi kichik boblarda biz HTML hujjatidagi teglar o‘rtasidagi munosabatlarni, jumladan, bola element selektorlarini ko‘rib chiqdik. Endi aka-uka selektorlari va qo'shni selektorlar bilan tanishish vaqti keldi. Qo'shni selektorlar (qo'shni selektorlar deb ham ataladi) umumiy ota-onasi bo'lgan va bir-biriga ulashgan veb-sahifa elementlarini tanlaydi. Uslub selektorda ko'rsatilgan oxirgi elementga qo'llaniladi. Misol:
Aytaylik, sizga har bir paragraf kerak Sarlavhadan keyin birinchi o'rinda turadi H1+p (shrift uslubi: kursiv; ) Ushbu qoidani yozishda siz birinchi navbatda birinchi qo'shnining ismini belgilashingiz kerak, keyin + belgisini va ikkinchi qo'shnining nomini qo'shishingiz kerak (biz uslubni qo'llamoqchi bo'lgan). Siz uzunroq kombinatsiyalarni yaratishingiz mumkin. Selektorni yozish sxemasi quyidagicha: selektor1+selektor2+…+selektorN () (uslub selektorNga qo'llaniladi). Yozish misollari: /* Abzatsdan rasmga chekinish 30px */ p+img (to‘ldiruvchi tepa: 30px; ) /* h3 dan keyingi paragraf uchun yashil rang h2 bilan birgalikda */ h2+h3+p (rang: yashil; ) Tegishli selektorlar (boshqa ismlar: opa, aka-uka) HTML sahifasining bir-biriga bog'langan elementlarini tanlash imkonini beradi (ya'ni umumiy ota-onaga ega bo'lish va bir xil darajada). Opa-singil selektorlari o‘zlarining aka-uka selektorlariga o‘xshash, lekin uslub faqat birinchisiga emas, balki tanlangan turning barcha elementlariga qo‘llanilishi bilan farqlanadi. + belgisi o'rniga tilda ~ belgisi qo'llaniladi. Misol:
keling, oldingi muammoni biroz o'zgartiramiz va barcha paragraflar uchun kursiv shrift qilish kerakligini tasavvur qilaylik. Sarlavhadan keyin keladi H1 ~ p (shrift uslubi: kursiv; ) ... va ba'zi HTML, masalan:
HTML kodini ko'rib chiqing: uslub barcha teglarga qo'llaniladi Qaysi ortidan keyin teg Unga uslub qo'llaniladi. Iltimos, teg ekanligini unutmang Qaysi joylashgan yuqorida Boshqa ota-onaga ega bo'lish Qo'shni selektorlardan foydalanib, siz boshqa element (yoki elementlar guruhi) darhol ergashsa, elementni uslublashingiz mumkin. Bu bir xil darajadagi va umumiy ota-onasi bo'lgan elementlar bilan ishlaydi. Qardosh selektorlar yordamida tanlangan turdagi barcha elementlarga boshqa element (yoki elementlar guruhi) darhol ergashsa, uslubni qo'llashingiz mumkin. Bu bir xil darajadagi va umumiy ota-onasi bo'lgan elementlar bilan ishlaydi. Xayrli kech, aziz hamkasblar, bugun biz ikkita qo'shimcha o'rganamiz selektor deb ataladi bola va qo'shni CSS selektorlari. Ko'proq darajada siz ularsiz qila olasiz, ammo rivojlanishingiz uchun siz ularni o'rganishingiz va ba'zan ularni xotirangizda qolishi uchun qo'llashingiz kerak. Shuning uchun, keling, nimani muhokama qilaylik selektorlar qo'shni va qaysi biri bolalar va biz ularni misol yordamida tahlil qilamiz.
Paragrafdagi matn Endi xatboshidagi asosiy matn Uslublardan foydalanib, biz teg uchun bir xil natijani qo'shamiz oraliq Div >span( p +oraliq( Ikkala holatda ham kodni bajarish natijasi tegga qo'llaniladi oraliq, chunki u tegning bolasi div va tegdan keyin p. Shunday qilib, shrift ikki barobar katta va qizil rangga aylandi. Endi biz butunlay hal qildik CSS-da bola va qo'shni selektorlari, va siz faqat bilimingizni amalda mustahkamlashingiz kerak, tez orada ko'rishguncha! Yaqinda Internet Explorer brauzerining yangi, sakkizinchi versiyasi chiqdi va barcha veb-ustalar yengil nafas olishdi. Nihoyat, Microsoft brauzeri katta kechikish bilan bo'lsa-da, HTML va CSS spetsifikatsiyalarini ko'proq yoki kamroq hurmat qila boshladi va veb-sahifalarni etarli darajada namoyish qila boshladi. Umuman olganda, hamma buni ettinchi versiyadan kutgan edi. Biroq, birinchi qarashda, u yorliqlardan foydalanishni qo'llab-quvvatlashdan tashqari yangi hech narsa keltirmadi. Lekin bu faqat bir qarashda... IE7-dagi yana bir juda muhim yangilik haqida kam odam biladi: aynan shu versiyada ushbu brauzer birinchi marta CSS selektorlarining yangi turlarini qo'llab-quvvatlay boshladi. Selektor - bu CSS qoidasining bir qismi bo'lib, uni qaysi elementlarga qo'llashni belgilaydi. Ularning asosiy turlari deyarli barcha webmasterlarga ma'lum. Ammo ko'pchilik bunday "ekzotik" narsalar haqida qo'shni va bolalar selektorlari, shuningdek atribut selektorlari haqida eshitmagan. Bu ularni uzoq vaqt davomida ishlatishning ma'nosi yo'qligi bilan izohlanadi, chunki eng mashhur brauzerlardan biri Internet Explorer ularni qo'llab-quvvatlamagan. Biroq, endi vaziyat o'zgardi va ochilgan yangi imkoniyatlarni chetga surib qo'yish juda oqilona bo'lmaydi. Shuning uchun men ushbu qisqa sharhni yozishga qaror qildim. Qo'shni selektorlar CSS qoidasi elementga faqat u boshqa elementga qo'shni bo'lganda qo'llanilishini bildiradi. Misol: Elementlar qo'shnilar deb ataladi, sahifa kodida ular qachon , va ular orasida boshqa elementlar yo'q
Bu erda qo'shni teglar Va , shuningdek Va . Teglar Va qo'shni emas, chunki ular o'rtasida begona element "tiqilib qolgan" . Qo'shni selektorni yozish sintaksisi quyidagicha: I element + II element (...) Keling, misolimiz uchun ushbu qoidani yarataylik: kuchli + em (rang: qizil; ) Natija shunday ko'rinadi: Ko'rib turganingizdek, uslub faqat teg uchun o'zgargan , va teg ta'sir qilmagan. Bu qo'shnilik qoidasini juda yaxshi ko'rsatadi. Keling, yana bir tajriba o'tkazaylik - bizning misolimizda almashtiring yoqilgan : Elementlar qo'shnilar deb ataladi, sahifa kodida ular qachon bir-birining yonida joylashgan, va ular orasida boshqa elementlar yo'q
Siz taxmin qilganingizdek, teglarning ikkinchisining uslubi O'zgarmaydi: Buning sababi, u endi qo'shni bo'lmaydi . Bolalar tanlovchilari CSS qoidasi elementga faqat u boshqa elementning bolasi bo'lganda qo'llanilishini bildiradi. Misol: Element, agar u o'rnatilgan bo'lsa, u joylashgan elementning bolasi deyiladi hisoblanadi bevosita avlod bu element Bu erda bolalar yorlig'i tegga nisbatan Shuningdek munosabatga ko'ra . teg tegga nisbatan Bu bola emas, chunki u uning bevosita ota-onasi emas. Yozuv sintaksisi quyidagicha: I element > II element (...) Child selektorlari taniqli kontekst selektorlariga juda o'xshaydi, yagona farq shundaki, kontekst selektorlari uchun elementlarning joylashtirish chuqurligi muhim emas. Bolalar uchun uya chuqurligi bir darajadan oshmasligi kerak. Keling, bularning barchasini misolimiz uchun bir nechta qoidalarni ishlab chiqish orqali ko'rsatamiz: p> Biz quyidagi natijaga erishamiz: Bizning holatda, teg farzandi emas Chunki unda uya qurishning ikkinchi darajasida. Tabiiyki, matnni ko'k rangga aylantirishi kerak bo'lgan uslub unga "ishlamadi". Endi bolalar selektorini kontekst selektori bilan almashtiramiz: p > kuchli (rang: qizil; ) /* Child selektor */ Natijani oldindan aytish mumkin: Boladan farqli o'laroq, bu holda kontekst selektori "ishladi", chunki u uchun joylash darajasining chuqurligi muhim emas. Atribut selektorlari CSS qoidasi faqat selektorda ko'rsatilgan atributni o'z ichiga olgan elementlarga tegishli ekanligini ko'rsating. Misol: CSS - bu juda muhim texnologiya bo'lib, usiz biron bir munosib veb-sayt yaratish mumkin emas CSS ning asosiy tushunchalari uslub qoidalari, selektorlar, xususiyatlar va ularning qiymatlaridir. Bu erda faqat birinchi xatboshida o'z-o'zidan aniqlangan parametr (yoki atribut, xuddi shu narsa) tekislanadi. Shuning uchun, align atribut selektori uchun CSS qoidasi birinchi xatboshiga va faqat unga nisbatan qo'llaniladi. Atribut selektorini yozish sintaksisi: [xususiyat] (...) Keling, misolimiz uchun qoida yarataylik (aniqlik uchun biz atributga qo'shimcha ravishda, uni hisobga olish kerak bo'lgan tegning o'zini ko'rsatamiz): p (rang: yashil; shrift og'irligi: qalin; ) Oxiri nima bo'lishini taxmin qilish qiyin emas: Hozirgacha men oddiy atribut selektori deb ataladigan narsani tasvirlab berdim. Uning uchun tegda faqat atributning mavjudligi muhim, ammo uning ma'nosi umuman muhim emas. Shu bilan birga, atribut selektorlarining boshqa turlari mavjud. Keling, ularni tezda ko'rib chiqaylik: [atribut = "qiymat"] (… ) Faqat ushbu atribut uchun belgilangan qiymatga ega bo'lgan elementlarga qo'llaniladi. [atribut^=”qiymat”] (… ) Deyarli bir xil narsa, faqat bu holda atribut faqat belgilangan qiymatdan boshlanishi kerak va uni to'liq o'z ichiga olishi shart emas. [atribut $ = "qiymat"] ( … ) Xuddi shunday, farq bilan, bu erda atribut belgilangan qiymat bilan tugashi kerak. [atribut*=”qiymat”] (… ) Ushbu belgi qiymat atributning istalgan joyida bo'lishi mumkinligini ko'rsatadi. Ko'rib turganingizdek, qo'shnilar, bolalar va atribut selektorlari bizga samarali CSS kodini yozish uchun ko'plab yangi imkoniyatlar beradi. Siz juda ko'p misollarni topishingiz mumkin, ularda ulardan foydalanish "an'anaviy" taniqli selektorlardan afzalroqdir. Shuning uchun, menimcha, bu usullarni qo'llash oqilona bo'lar edi. Ulardan qanday foydalanishni o'zingiz hal qilasiz.
. Va ikkinchi tegning bevosita ota-onasi
teg hisoblanadi
shrift uslubi: kursiv /* kursiv */
}
...
Bu oddiy matn. Bu qalin kursiv matn.
va paragrafga
Teg atributlari bo'yicha tanlovchilar
1. Oddiy atribut selektori
rang: qizil;
}
...
2. Qiymatli atribut selektori
rang: qizil;
shrift hajmi: 150%;
}
...
.ru" target="_blank">Yangi oynada havola
3. Bir nechta atribut qiymatlaridan biri
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
rang: qizil;
shrift hajmi: 150%;
}
...
4. Atribut qiymatidagi tire
Selektor[atribut|="qiymat"] ( uslub )
rang: qizil;
shrift hajmi: 150%;
}
...
5. Atribut qiymati aniq matndan boshlanadi
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
rang: yashil;
shrift vazni: qalin;
}
...
6. Atribut qiymati ma'lum matn bilan tugaydi
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
chegara: 5px qattiq qizil;
}
...
7. Atribut qiymati belgilangan qatorni o'z ichiga oladi
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
chegara: 5px qattiq qizil;
}
...
Qo'shni selektorlar
, kursiv shriftga ega edi. Bunga quyidagi kabi CSS kodi yordamida erishish mumkin:
Tegishli selektorlar
. CSS kodi quyidagicha ko'rinadi:
Sarlavha 1
Sarlavha 2
va bor oldin ota-ona yopilish yorlig'i
. Bizning versiyamizda 3 ta element mavjud
Bu hech qanday zarar qilmaydi. Shuni ham unutmangki, bu holda uslub bolmaydi bu tegga qo'llaniladi
, shuningdek tegga
.
xulosalar
Child css selektorlari- asosiy element ichida joylashgan elementlar. Bunga misol qilib quyidagicha bo'lishi mumkin. Bizda paragraf, boshqa blok va rasmni o'z ichiga olgan blok bor. Bu uchta element bolalardir. Agar bolalar blokida boshqa elementlar ham mavjud bo'lsa, ular endi birinchi blokning bolalari emas, balki ular bevosita joylashgan blokning bolalaridir. Umid qilamanki, siz fikrni tushunasiz.
Qo'shni CSS selektorlari- hujjat kodida birin-ketin joylashgan elementlar. Bunga misol qilib keltirish mumkin. Bizda paragraf va quyidagi teg mavjud oraliq. Hammasi aniq va biz hammasini haqiqiy misollar yordamida ko'rib chiqishimiz kerak.
Matn oralig'ida
shrift hajmi: 200%;
}
rang: qizil;
}
kuchli + ins (rang: ko'k; )
p > em (rang: ko'k; ) /* Child selektor */
p em (rang: ko'k; ) /* Kontekst selektori */
Maqola muallifi: Aleksey Antonov, www.lounwolf.ru veb-texnologiyalari haqidagi blog yaratuvchisi va administratori
=====================================================================
Tematik materiallar:
Yangilangan: 20.04.2021
103583
Agar xatolikni sezsangiz, matn qismini tanlang va Ctrl+Enter tugmalarini bosing
Sayt sarlavhalari
