Internet Derazalar Android
Kengaytirmoq

CSS qo'shni elementlar. CSS-da maxsus tanlovchilar

Vlad Merzehevich

Qo'shimcha, ular bir-birlaridan bir-birlaridan keyin o'zlariga amal qilishda o'zlariga rioya qilganda, qo'shimcha sahifa elementlari. Elementlarning o'zaro munosabatlariga bir nechta misollarni ko'rib chiqing.

Lorem Ipsum. dog ' O'tirish Amet.

Ushbu misolda yorliq Yorliqga nisbatan filial

Bu idishda bo'lgani uchun. Mos ravishda

Ota-ona sifatida ishlaydi .

Lorem Ipsum. dog ' o'tirmoq Amet.

Bu erda teglar va Bir-biriga zid kelmang va qo'shni elementlardir. Ular idish ichida nima deyishadi

Bu ularning munosabatiga ta'sir qilmaydi.

Lorem. ipsm. Dolor o'lik Amet, kontektsioner. AliPisting. elit..

Mana bu erda teglar va , va yana va . Qayerda va Qo'shni elementlar ular orasida konteyner mavjudligi sababli tegishli emas .

Qo'shni elementlarning uslubini boshqarish uchun ikkita vanerlar o'rtasida o'rnatiladi, bu esa ikkita satrda o'rnatiladi. Keyingi sintaksis.

Selektor 1 + Selektor 2 (uslublar qoidalarining tavsifi)

Afsona atrofidagi bo'shliqlar talab qilinmaydi, bunday yozuvga ega uslub 2-selektorga nisbatan qo'llaniladi, ammo agar u selektor uchun ulashgan bo'lsa va undan keyin darhol bo'lishi kerak.

11.1-misolda ular orasidagi teglarning o'zaro ta'siri tarkibi ko'rsatilgan.

11.1-misol. Qo'shni salaynarorlardan foydalanish

HTML5 CSS 2.1 IE CR OP SA FX

Qo'shni tanlovchilar

Lorem. ipsm. Dolor o'lik Amet, kontektsioner. Alipaistik elit.

Lorem Ipsum Dolor ST Amet, kontektsioner. Alipaistik elit.

Misolning natijasi rasmda keltirilgan. 11.1.

Anjir. 11.1. Qo'shni tanlovchilar yordamida matnni tanlash

Ushbu misolda konteyner tarkibidagi matn rang o'zgarishi yuzaga keladi. Qachonki u konteynerdan keyin darhol joylashgan bo'lsa . Birinchi xatboshida bu vaziyat tatbiq etiladi, shuning uchun brauzerdagi "konsultetuer" so'zi qizil rangda aks etadi. Ikkinchi xatboshida bo'lsa ham, yorliq mavjud Ammo keyingi eshik hech qanday teg yo'q Yo'q, shuning uchun bu konteynerning uslubi qo'llanilmaydi.

Biz yanada amaliy misolni tahlil qilamiz. Ko'pincha turli xil izohlar va eslatmalarni o'z ichiga olish uchun maqolaning matniga ehtiyoj bor. Odatda, bu maqsad uchun yangi uslublar sinfi yaratilgan va uni paragrafga xatboshi qilib, matn turini osongina o'zgartirishingiz mumkin. Ammo biz boshqa yo'l bilan boramiz va qo'shni salaynislar uchun foydalanamiz. Izohlarni ta'kidlash, yangi sinfni yarating, uni SICga qo'ng'iroq qiling va biz uni tegga qo'llaymiz

. Bunday sarlavhadan keyin birinchi xatboshi fonning rangi va yozuvi (11.2). Qolgan xatboshilarning ko'rinishi o'zgarishsiz qoladi.

11.2 misol. Paragraf uslubini o'zgartirish

HTML5 CSS 2.1 IE CR OP SA FX

Paragraf uslubini o'zgartirish

Cho'lda sher baliq ovlash usullari

Ichki yaxlitlik usuli

Li sherim L x W X H H h va u erda burnning uzunligi dumga dumli tog 'jinslari bilan, u sherning kengligi va uning balandligidir. Shundan so'ng, cho'l bir qator boshlang'ich to'rtburchaklarga bo'linadi, ularning o'lchami kengligi va uzunligi bilan to'g'ri keladi. Arslon ma'lum bir hududda qat'iy emas deb hisoblab, bir vaqtning o'zida baliq ovlash uchun kamera ko'payishi, ya'ni 2L x 2w-dan iborat bo'lishi kerak. Buning uchun biz xatolardan qochamizki, sherning atigi yarmi qafasda yoki undan yomoni, faqat dumi.

Muhim eslatma

Hisob-kitoblarni soddalashtirish uchun dumni o'lchash xatosi sifatida tashlanishi va hisobga olinmaydi.

Ushbu misol natijasi rasmda keltirilgan. 11.2.

Anjir. 11.2. Qo'shni tanlovchilar yordamida paragraf turini o'zgartirish

Ushbu misolda matn paragraflardan foydalangan holda formatlanadi (yorliq)

) lekin rekord H2.SIC + P ni faqat yorliqning birinchi paragrafi uchun o'rnatadi

SIC deb nomlangan sinf.

Qo'shni tanlovchilar ushbu teglar uchun foydalanish uchun qulaydir, bunda insentratsiya hajmini belgilash uchun avtomatik ravishda qo'shilgan. Masalan, agar qatorda teglar bo'lsa

va

, Qo'shni salaflar yordamida mos keladigan masofa osonlashishi oson. Shunga o'xshab, bu ish ham kelgusi teglar uchun

va

Shuningdek, boshqa kabi holatlarda. 11.3-misolda, ushbu usul ko'rsatilgan teglar orasidagi ko'rsatkichlarning kattaligini o'zgartiradi.

11.3 misol. Sarlavhalar va matn o'rtasida

HTML5 CSS 2.1 IE CR OP SA FX

Qo'shni tanlovchilar

1-chi.

2-chi unvoni.

Paragraf!

Qo'shni saralash vositalarini ishlatishda uslub faqat ikkinchi elementga nisbatan qo'llaniladi, narxlarning o'lchamlari marjali-top mulkda salbiy qiymatni kiritish natijasida kamayadi. Bunday holda, matn oldingi elementga yaqinroq ko'tariladi.

Tekshirish uchun savollar

1. Ushbu koddagi qaysi teglar ulashgan?

Sulfat kislota formulasi:H. 2Shunday qilib. 4

  1. Va

  2. va
  3. va
  4. va
  5. va

2. Quyidagi HTML-kod mavjud.:

Buyuk Teorem Fermat


X. n. + Y. n.
\u003d Z. n.


bu erda n bu butun son\u003e 2

Qaysi matn qizil rangda qizil rangda ajratilgan (rang: qizil; qizil;)?

  1. Ikkinchi "n"
  2. Ikkinchi va uchinchi "n".

Salom, aziz o'quvchilar! CSS-ning mavzularini davom ettiring va bugun nima ekanligini tushuntirishga harakat qilaman qo'shni CSS tanlovlari, shuningdek, qanday rol o'ynaydi universal selektor. CSS barcha turlaridan foydalanish mexanizmini bilish, uni muvaffaqiyatli ilgari surishning uyg'unligini tavsiflovchi hujjatning maqbul va ixcham mazmuniga erishadi, bu uning resurslarini muvaffaqiyatli targ'ib qilish tarkibiy qismlaridan biri bo'lib, hech qanday e'tibor bermaslik uchun Selektorning kontseptsiyasi va uning turdagi turlari to'g'risida foydali ma'lumotlarni olish imkoniyati.

Agar eslasangiz va puxta adabiyotlarni diqqat bilan kuzatsangiz va o'tkazib qo'yilgan tang'ichlar ko'rib chiqildi; ; . Yana bir bor CSS asoslarini o'rganishni mensimaslikka undayman, chunki kelajakda sizga juda ko'p afzalliklar beradi.

Universal selektor

Endi to'g'ridan-to'g'ri bugungi nashrning mohiyatiga o'ting. Universal selektorga kelsak, bu juda oddiy, shuning uchun men uzoq vaqt to'xtatmayman. Universal tanqid qiluvchilarni ishlatadigan CSS qoidalarini yozishning sintaksisi quyidagilar:


Bu erda "*" operatori va biz universal tanqidchi borligini anglatadi. Veb-sahifada barcha narsalar uchun bitta uslubni o'rnatish kerak bo'lganda ishlatiladi. Ba'zan universal selektor har doim shart emas. Masalan, yozib olish. Ushbu holatlarda sinf I.Class to'liq bir xil. Endi, albatta, misol. Odatda, eng keng tarqalgan bitta shrift, o'lcham va rangning ta'rifi, shuningdek, Blog sahifasida yoki saytdagi odatiy matnning joylashuvi.

* (Shrift-oilasi: tahoma, arifa, helvetka, Sans-Serif; / * shrift: № 646464; / * matn rangi * / * matn o'lchami * / matn o'lchamlari : chap; / * matn joylashuvi * /)

Shunday qilib, siz sahifada joylashgan barcha narsalar uchun matnni belgilashingiz mumkin. Shuni ta'kidlayman, ushbu holat uchun natijada universal selektor o'rniga barcha elementlarning teglarini o'z ichiga olgan tana yorlig'ining ismini ishlatadi.

Qo'shni CSS tanlovlari

Xo'sh, endi qo'shni salamalar uchun ko'proq vaqt to'laydi. O'z qo'shni hujjat kodeksida to'g'ridan-to'g'ri bir-birining yonida bo'lganida qo'shni qo'shni. Shu bilan birga, CSS uslublari sintaksisi quyidagilarga ega:

Endi biz B, i va katta teglar matnni formatlashni belgilaydigan P harfi bilan belgilangan matn paragrafini olamiz, ular matnni formatlashni va shriftni ko'paytirish orqali chiqishni anglatadi:

Ushbu paragraf foydalanadi b yorlig'i., tag I., katta teg.

Va barcha mashhur brauzerlarning so'nggi versiyalari (,) brauzer () brauzer () uchun taniqli plaginning so'nggi versiyalarining analogi bo'lgan CSS va HTML tahrirlash vositalaridan foydalanish Har qanday veb-sahifa (men birinchi paragrafning avvalgi sahifasida). Bu, masalan, F12 tugmachasini bosish orqali chaqiriladi. Buni "HTML" va "CSS-darslik asoslarini" tuzatish uchun ishlatilishi mumkin. Shunday qilib, men birinchi xatboshi shaklida bir parcha matnni kiritaman:


Ushbu paragraf eksperimental bo'lib, uning misolidan foydalanadi. qo'shni tanlovchilar. Men allaqachon aytganimdek, B, men va katta Tegs b va kattalar, ular to'g'ridan-to'g'ri P konteynerida. Bu erda qo'shnilar B va men, shuningdek, men va katta. Endi CSS-ning qo'shni salayversiyalar uchun qoida qo'llanmasi:

B + i (rang: qizil;) i + katta (rang: yashil;)

Ushbu uslublar qo'llanilgandan so'ng, paragraf quyidagicha ko'rinadi:


Bu barcha veb-yorliqlar uchun to'g'ri, unda b, i va katta elementlar mavjud. Bundan tashqari, boshqa kombinatsiyalar uchun B va men, i va men yaqinda bo'lishi kerak. Bu CSS ishlamaydi. O'ylaymanki, endi CSS hujjatini yozishda qo'shni sara qiluvchilar qanday qo'llashingiz aniq. Yana bir juda muhim eslatma: Agar sizga e'tibor bersangiz, unda tutun elementlari bo'lsa, belgilangan uslub faqat ikkinchi elementga tegishli.

Vizual deb hisoblangan va CSS-da qo'shni salaynisentlarning mohiyatini tezda tushunishga imkon beradigan paragrafga misol. Biroq, amalda, tannarlarni qo'llashning boshqa sohalari odatda qo'llaniladi. Aytingki, odatda maqolada, ayniqsa bezatilgan, ayniqsa bezatilgan, ayniqsa bezatilgan, ayniqsa bezatilgan matnni kiritish kerak. Izohlar, eslatmalar va boshqalar.

Shu maqsadda alohida sinf, odatda uni yaratadigan va qo'llash kerak. Ammo eng maqbul usul - bu qo'shni salaynarorlarni ishlatishdir. Masalan, mening blogimda X3 bo'yicha an'anaviy boshliqni ro'yxatdan o'tkazish uchun yaratilgan uslublar mavjud.

H3 (Shrift-o'lchamlari: / * shrift o'lchami: / * Matnni joylashtirish * / * Matnni joylashtirish * / * Oddiy matnli dizayni * / FONT-FOYDALANADI Sans-serif; / * shrift uslubi * / Rang: # 646464; / * matn rangi * /)

Sarlavha eslatmalarini yoki izohlarini ta'kidlash uchun maxsus sinf qo'ying, ayting:

H3.UT (Rang: / * matn rangi * / * matnli rang * / * chap tomonda: 0.5em; / Finddddlding: 10px; / * Atrofdagi maydonlar Matn * / Matn-a'lpi: chapga / * matnning joylashuvi * /)

Endi biz qo'shni sanachilardan jumlalar paragrafining maxsus uslubini yaratish uchun foydalanamiz, ushbu paragraf to'g'ridan-to'g'ri "H3.UTTUPT" uslubi bilan sarlavha ostida joylashtiriladi:

H3.UTO + P (FFFD5; / * Orqa fon rangi * / * Chapdan o'ngga: / * orqaga chekinish * / * Chiqish * / marjali em; / * yuqoridan * / to'ldirilgandan ajratish: 5px; / * matn atrofida * /)

Yana, barcha quloqlaringiz (lekin bunga arziydi), siz uchun sarlavhalarni sinama tomonidan qo'yishni unutmaslik, izohlarni yozma, izohlarni kiritmang.

Diqqat!

Keyin izohning o'zi matnini yozing:

Ushbu nashrda keltirilgan materiallar CSS asoslarini o'rganish nuqtai nazaridan juda muhimdir (kaskadli uslublar jadvallari)

.

Ushbu televizorlardan so'ng biz veb-sahifada izohlarning paragrafini olamiz (sizga ushbu paragraf mening folalarim va kontekstual saralashlarim haqidagi maqolamning oxirida men kiritdim):


Endi H3 yorlig'iga "qo'yish" ni bog'lashda blogi yoki saytda veb-sahifada izoh beriladi. Bundan tashqari, u "klass \u003d" "BILAN" BILAN H3 yorlig'idan keyin faqat birinchi paragrafni maxsus tartibda bezatiladi. Ammo biz bunga erishdik, to'g'rimi?

Shu bilan birga, bugungi kunda o'z ichiga qo'shni, shuningdek, universal saralashlar uchun algoritm bo'lgan qo'llanmani tugatishga ijozat bering. Umid qilamanki, ushbu maqola sizni xafa qiladi, aziz o'quvchilar Subscribe

2015 yil 1 iyun.

Qo'shni ishlatilganidan farqli o'laroq, kamroq ishlatiladi. Asosiy farq shundaki, ular boshqasiga ergashishlari kerak. Ushbu mavzuni o'rganishingiz uchun siz ushbu mavzuni qismlarga ajratishni taklif qilaman:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

Siz avvalgi darsdan, 2, 3, 4, 5, 6 teglaridan kelib chiqqan holda, ushbu teglar yorliq1. O'z navbatida, qo'shni salamalar quyidagilar: tag2 va Tag3, teg4 va Tag5, Lekin bir vaqtning o'zida tag2. va tag4. qo'shni emas. Uslublarning xususiyatlari oxirgi elementga quyidagi jadvalni ko'rsatadigan oxirgi elementga qo'llaniladi. Siz faqat tanlovni tanlashingiz kerak. Yozuvning umumiy sintaksisi:

Selektor1 + Selektor2 + ... + Tanlangan Santorn (mulk: qiymat; qiymat; qiymat; qiymat; Qiymat: Qiymat)

Keling, ushbu misolni ko'rib chiqaylik:

Qo'shni tanlovchilar

Sarlavha

Yorliq p. qo'shni selektor yorlig'i h1.

Ushbu matn yashil bo'lishi kerak

Qo'shni elementni selektor hujjat kodida to'g'ridan-to'g'ri boshqa elementdan keyin joylashgan elementni tanlaydi. Masalan, bir parcha html kodini olamiz.

Paragraf va unda yog'li element va bu erda moyil element.

Uch yorliq mavjud:

, va . Teglar va Konteynerga joylashtirilgan

Ular unga sho''ba qilishdi. Ammo bir-birlariga nisbatan ular qo'shni.

Qo'shni tanlagichning sintaksisi: Oldingi elementning selektori, "+" belgisi va tanlangan elementning tanlangan tizimi. Keling, yaqin atrofdagi selektorda ishlaylik:

CSS-da qo'shni selektor.

Paragraf va unda yog'li element va bu erda moyil element.

Bu yerda yog'li va puxta bajarilgan Elementlar, orqaga moyil.

Masalan, uni qo'shni element sellagi birinchi xatboshida ishlaganini tanlash mumkin. Bu erda teglar va Bir-biringizga boring. Va ularning o'rtalarida yorliq ishlatilgan , endi boshqa ikkita qo'shni juft teglar mavjud: + va + .

Ushbu holatda xato yorliqni ko'rib chiqadi Yorliqqa tutash

Bu erda teg Yorliqga nisbatan filial

Va u, o'z navbatida, ota-ona .

Quyidagi misol ishlamaydi:

CSS-da qo'shni selektor.

Paragraf va unda yog'li element va bu erda moyil element.

Bu yerda yog'li va puxta bajarilgan Elementlar, orqaga moyil.

Yanada haqiqiy misol

Keling, qo'shni tanlagichning ishini yanada haqiqiy misolda ko'rib chiqaylik. Katta moddalarda bir nechta qismlar ko'rsatilgan teglar ko'rsatilgan

Yuqori qismni (marj-eng yuqori mulk) ko'paytirish maqsadga muvofiqdir. 30px-ga kiritilgan ma'lumot matnni o'qishni beradi. Ammo tegda bo'lsa

Darhol o'tib keting

va bu maqolaning boshida bo'lishi mumkin, Veri tegga kiradi

Bu ortiqcha bo'ladi. Siz qo'shni elementni o'zgartirishektor yordamida bunday vazifani hal qilishingiz mumkin.

Mana, qo'shni elementi tanlagichining namunasi bilan HTML kod.

CSS-da qo'shni selektor

Hey!

H2 samolyoti.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

Shuningdek, qo'shni selektor asbobidan foydalanib, bo'limning sarlavhasi va birinchi xatboshi orasidagi belgilarni qulay sozlash, masalan, yorliqlar

va

Shuningdek, salbiy qiymatlardan foydalanish qulay bo'lganligini ta'kidlash uchun buni ta'kidlash kerak.

CSS-da qo'shni selektor

Hey!

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

H2 samolyoti.

Paragraf matni aql bovar qilmaydigan sarguzashtlarda.

Endi qo'shni selektorning yordami bilan birinchi navbatda ro'yxatdagi barcha ro'yxatdagi barcha ro'yxatlarni tanlang.

CSS-da qo'shni selektor

  • 1 raqamini ro'yxatlash.
  • 2 raqamini ro'yxatlash.
  • 3 raqamini ro'yxatlash.
  • 4 raqam raqamini ro'yxatlang.

Bu misolning ishiga olib keladi:

1-rasm. Namuna №5 misolidan foydalanish.

Xayrli oqshom aziz hamkasblar, bugun biz siz bilan ikkinchisini qo'shimcha ravishda o'rganamiz selektorchaqqon cSS filiallari va qo'shni sanachilar. Ko'proq darajada, ularsiz qilishingiz mumkin, ammo sizning rivojlanishingiz uchun ular o'zlashtirish kerak va ba'zan ular sizning xotirangizda qolishlariga murojaat qilishadi. Shuning uchun biz nimalarni muhokama qilamiz testchilar Ular qo'shni va uning filiallari nima va masalani tushunadi.
CSS filiallari - ota-ona elementi ichida joylashgan elementlar. Bunga misol quyidagicha bo'lishi mumkin. Bizda paragraf bor, boshqa blok va rasm mavjud. Bu uchta element - bu filiallar. Agar boshqa elementlar bola blokida joylashgan bo'lsa, unda ular endi birinchi blokda filiallar emas, balki to'g'ridan-to'g'ri blokda filiallar. Umid qilamanki, siz mohiyatni ushladingiz.
Qo'shni CSS tanlovlari - elementlar hujjat kodeksida bir-birlarida joylashgan. Buning misoli. Bizda paragraf va quyidagi yorliq mavjud qormoq. Hammasi juda aniq, ammo biz bularning barchasini haqiqiy misollarda ochishimiz kerak.








Paragrafda matn


Spanda matn.

Endi paragrafda bola matn yo'q






Uslublar yordamida yorliq uchun bir xil natija qo'shadi qormoq

Div \u003e Span (
shrift hajmi: 200%;
}

p. + Span (
rang: qizil;
}

Kodning natijasi ikkala holatda ham tegga qo'llaniladi qormoqchunki bu yorliq bilan bog'liq bo'lgan filial div va yorliqdan keyingi keyingi p.. Shuning uchun shrift yana ikki baravar va qizil rangga aylandi. Endi biz to'liq ishladik cSS-da filiallar va qo'shni sanachilarVa yaqin orada siz o'z bilimingizni amalda mustahkamlashingiz mumkin!