Bună seara, dragi colegi, astăzi vom studia împreună cu voi încă doi selectorcare se numesc selectoare CSS pentru copii și frați... Într-o măsură mai mare, puteți face fără ele, cu toate acestea, pentru dezvoltarea dvs. trebuie să le învățați și, uneori, să le aplicați astfel încât să rămână în memoria voastră. Prin urmare, vom discuta care selectoare sunt adiacente și care copii și vom analiza cu un exemplu.
Selector de copii CSS - elemente care se află în interiorul elementului părinte. Un exemplu în acest sens poate fi după cum urmează. Avem un bloc care conține un paragraf, un alt bloc și o imagine. Aceste trei elemente sunt copii. Dacă blocul copil conține și alte elemente, atunci nu mai sunt copii ai primului bloc, ci sunt copii ai blocului în care sunt localizați direct. Sper să înțelegi.
Selectoare CSS adiacente - elemente situate unul după altul în codul documentului. Un exemplu în acest sens este. Avem un paragraf urmat de o etichetă span... Totul este destul de clar, dar trebuie doar să distingem toate acestea cu exemple reale.
Text într-un paragraf
Text extensiv
Nu mai este text copil într-un paragraf
Folosirea stilurilor pentru a adăuga același rezultat pentru etichetă span
Div \u003e span (
dimensiunea fontului: 200%;
}
p + span (
culoarea rosie;
}
Rezultatul executării codului în ambele cazuri va fi aplicat etichetei spandeoarece este un copil al etichetei div și apoi după etichetă p... Prin urmare, fontul a devenit de două ori mai mare și roșu. Acum ne-am ocupat complet selectori pentru copii și frați în CSS, și trebuie doar să vă consolidați cunoștințele în practică, ne vedem în curând!
Sintaxa CSS este simplă și nu aveți nevoie de un doctorat în IT pentru ao înțelege. Cu toate acestea, este una dintre puținele limbi populare care nu este logică în sensul cel mai adevărat al cuvântului. Spre deosebire de alte limbaje de programare web, cum ar fi JavaScript și PHP, CSS nu rezolvă probleme cu logică obișnuită. Algoritmi precum „dacă X atunci faceți Y, altfel faceți Z” sau „selectați tot Y, apoi faceți X cu ei” nu pot fi implementați într-o limbă precum CSS. Mai simplu spus, este un limbaj construit pentru design, un limbaj pentru designeri, nu pentru dezvoltatori. Unii dintre programatorii cu experiență cu care am lucrat au depus mult efort în învățarea CSS tocmai din acest motiv.
Învățarea CSS începe cu clase și ID-uri, precum și cu utilizarea. și # pentru a indica direct elemente. Acest lucru este suficient pentru a construi un site web complet funcțional, dar nu suficient de flexibil în cazul unei reproiectări complete. Să aruncăm o privire la o abordare alternativă a gestionării unor astfel de articole greu accesibile.
Combinator frate adiacent
Să începem cu un selector care este util în situații dificile - combinatorul de frați adiacent. Un combinator frate învecinat este notat prin unirea a două elemente folosind semnul +:H1 + p
Aceasta selectează următorul element p imediat după elementul h1 din DOM. Teoria tipografică sugerează că ar trebui să folosim indentarea în paragrafele textului, dar numai dacă urmează un alt paragraf. În practică, acest lucru poate fi folosit pentru a indenta toate, cu excepția primului paragraf:
p + p (text-indent: 1em;)
Acest lucru este mult mai convenabil decât evidențierea primului paragraf cu class \u003d "first". Trei linii, fără clase și suport complet pentru browser. Dacă puneți etichete img legate de conținutul site-ului în etichetele p (așa cum ar trebui), puteți pur și simplu împinge marginile din stânga înapoi cu o valoare negativă de -1em:
p + p img (margin-stânga: -1em;)
Destul de simplu, nu? Dar dacă vrem să selectăm primul rând al tuturor paragrafelor imediat după titluri, fără a modifica toate celelalte paragrafe? Din nou, putem folosi clasa de vizualizare. Un selector simplu realizat dintr-un combinator compus adiacent și un pseudo-element va face treaba:
h1 + p :: prima linie (font-variantă: majuscule;)
Notă: pseudo-elementul: prima linie este adoptat în CSS 2.1, CSS 3 folosește notația :: pentru a distinge între pseudo-clase și pseudo-elemente.
Combinator ereditar
Protocolul obișnuit de marcare este plasarea secțiunilor într-un element numit în #page sau #wrap:În capitolele anterioare, am analizat relațiile dintre etichete într-un document HTML, inclusiv examinarea selectorilor copii. Acum este timpul să vă familiarizați cu selectorii fraților și cu selectorii fraților.
Selectoare adiacente
Selectoarele adiacente (numite și selectoare adiacente) selectează elemente de pe o pagină web care au un părinte comun și sunt adiacente unul cu celălalt. Stilul este aplicat ultimului element specificat în selector.
Exemplu: să presupunem că ai nevoie de fiecare paragraf pentru
Care vine primul după titlu
, avea un font italic. Acest lucru poate fi realizat cu un cod CSS ca acesta:
H1 + p (stil font: italic;)
Când scrieți această regulă, mai întâi de toate, trebuie să specificați numele primului vecin, apoi adăugați simbolul + și numele celui de-al doilea vecin (cel căruia dorim să-l aplicăm stilului). Se pot crea și combinații mai lungi. Schema pentru scrierea unui selector este după cum urmează: selector1 + selector2 + ... + selectorN () (stilul este aplicat selectorului N).
Exemple de scriere:
/ * Indentare de la paragraf la imaginea 30px * / p + img (padding-top: 30px;) / * Verde pentru paragraful care urmează h3 împreună cu h2 * / h2 + h3 + p (culoare: verde;)
Selectoare conexe
Selectorii de frate (alte nume: frate, frate) vă permit să selectați elemente ale unei pagini HTML care sunt legate între ele (adică au un părinte comun și sunt la același nivel). Selectorele surori sunt similare cu selectorele învecinate, dar diferă prin faptul că stilul se aplică tuturor elementelor tipului selectat, nu doar primului. Simbolul tilde ~ este utilizat în loc de +.
Exemplu: să modificăm puțin sarcina anterioară și să ne imaginăm că trebuie să faceți caractere cursive pentru toate paragrafele
Asta vine după titlu
... Codul CSS va arăta astfel:
H1 ~ p (font-style: italic;)
... și ceva HTML pentru un exemplu:
Titlul 1
Rubrica 2
Aruncați o privire la HTML: stilul se va aplica tuturor etichetelor
Care urmează după etichetă
și sunt inainte de eticheta de închidere a părintelui ... Versiunea noastră are 3 elemente La care se va aplica stilul. Rețineți că eticheta
nu va interfera în nici un fel. Observați, de asemenea, că, în acest caz, stilul nu va fi aplicat acelei etichete
Care se află peste
și, de asemenea, la etichetă
Având un alt părinte
.
constatări
Utilizând selectoare adiacente (adiacente), puteți stiliza un element atunci când urmează imediat un alt element (sau grup de elemente). Acest lucru funcționează cu elemente care se află la același nivel și au un părinte comun.
Cu selectoarele conexe, puteți stiliza toate elementele tipului selectat atunci când urmează imediat un alt element (sau grup de elemente). Acest lucru funcționează cu elemente care se află la același nivel și au un părinte comun.
Descriere
Elementele unei pagini web sunt numite vecini atunci când se succed imediat în codul documentului.
Sintaxă
E + F (Descrierea regulilor de stil)
Pentru a controla stilul elementelor adiacente, utilizați caracterul plus (+) dintre cele două selectoare E și F. Spațiile din jurul plusului sunt opționale. Acest stil se aplică elementului F, dar numai dacă este adiacent elementului E și îl urmează imediat. Să ne uităm la câteva exemple.
Lorem ipsum dolor stai amet.
Etichetă este un copil al etichetei
Pentru că se află în interiorul acestui container. Respectiv
Acționează ca părinte
.
Lorem ipsum dolor sta amet.
Etichete și nu se suprapune în nici un fel și reprezintă elemente adiacente. Faptul că sunt amplasate în interiorul containerului Nu le afectează atitudinea.
Lorem ipsum dolor sit amet, consectetuer adipiscare elit.
Etichetele sunt adiacente aici și , și și ... Unde și elementele adiacente nu sunt legate datorită faptului că există un container între ele
.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selectoare adiacente
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Rezultatul acestui exemplu este prezentat în Fig. unu.
Figura: 1. Culoarea textului roșu pentru selectoarele adiacente
Browsere
Internet Explorer 7 nu este stilat dacă există un comentariu (B + / * plus * / I) între selectoare.
Buna dragi cititori! Continuăm tema selectorilor CSS și astăzi voi încerca să explic într-un mod accesibil ce este selectoare CSS adiacenteși, de asemenea, ce rol are selector universal... Cunoașterea mecanismului de utilizare a tuturor tipurilor de instrumente CSS vă va permite să obțineți un conținut optim și compact al documentului, care descrie stilurile elementelor, care este una dintre componentele promovării cu succes a resursei dvs., deci în niciun caz nu ar trebui neglijați posibilitatea de a obține informații utile despre conceptul de selector și toate tipurile sale.
Dacă vă amintiți și urmăriți îndeaproape publicațiile, multe tipuri de selectoare au fost deja luate în considerare; ; ... Încă o dată, vă îndemn să nu neglijați învățarea elementelor de bază ale CSS, deoarece acest lucru vă va oferi multe preferințe în viitor.
Selector universal
Acum să mergem direct la esența publicației de astăzi. În ceea ce privește selectorul universal, este destul de simplu, așa că nu mă voi opri mult timp pe el. Sintaxa pentru scrierea unei reguli CSS care utilizează un selector universal este următoarea:
Aici operatorul „*” înseamnă că avem un selector universal. Este utilizat atunci când este necesar să se stabilească un stil uniform pentru toate elementele de pe o pagină web. Uneori, un selector universal este opțional. De exemplu, notația. * Class și .class sunt exact aceleași în aceste cazuri. Acum este necesar un exemplu. De obicei, cea mai comună este definirea unui font, dimensiune și culoare uniformă, precum și locația textului obișnuit pe o pagină de blog sau site-ul web.
* (font-family: Tahoma, Arial, Helvetica, sans-serif; / * Text text * / color: # 646464; / * Color text * / font-size: 75%; / * Text size * / text-align: stânga; / * Aspect text * /)
În acest fel, puteți determina aspectul textului pentru toate elementele care se află pe pagină. Rețineți că, în acest caz, rezultatul va fi același dacă în locul selectorului universal utilizați numele etichetei de corp, care include etichetele tuturor elementelor.
Selectoare CSS adiacente
Ei bine, acum să alocăm puțin mai mult timp selectorilor vecini. Elementele unei pagini web sunt adiacente atunci când sunt direct una lângă alta în codul documentului. În acest caz, sintaxa stilurilor CSS arată astfel:
Acum, să luăm un paragraf de text definit de eticheta p, care va include b, i și etichete mari ca copii, care determină formatarea textului, respectiv, aldin, cursiv și evidențiind mărind fontul:
Acest paragraf folosește eticheta b, eticheta i, etichetă mare.
Și folosind instrumentul de editare CSS și HTML, care este încorporat în cele mai recente versiuni ale tuturor browserelor populare (,) și care este un analog al celebrului plugin pentru browser Firefox (), vom insera acest paragraf oriunde pe absolut orice pagină web (I a făcut-o chiar pe pagina articolului anterior din primul paragraf). Acest instrument, de exemplu, în Chrome este invocat prin simpla apăsare a tastei F12. Poate fi folosit ca referință practică pentru HTML Basics și CSS Tutorial. Așadar, inserez o bucată de text ca primul paragraf:
Acest paragraf va fi experimental și, folosind exemplul său, vom lua în considerare aplicația selectoare adiacente... După cum am spus, etichetele b, i și mari sunt copii ale etichetei de paragraf p, deoarece toate sunt direct în interiorul containerului p. Aici, etichetele adiacente sunt b și i, precum și i și mare. Acum să aplicăm regula CSS pentru selectoarele adiacente:
B + i (culoare: roșu;) i + mare (culoare: verde;)
După aplicarea acestor stiluri, paragraful va arăta astfel:
Acest lucru este valabil pentru toate etichetele de pe o pagină web care includ elementele b, i și mari. Mai mult, b și i, i și big trebuie să fie lângă ele, pentru alte combinații, această regulă CSS nu va funcționa. Cred că acum vă este clar cum sunt utilizate selectoarele adiacente atunci când scrieți sau editați un document CSS. O altă notă foarte importantă: dacă ați observat deja, în cazul elementelor adiacente, stilul specificat se aplică doar celui de-al doilea element.
Exemplul de paragraf, care a fost considerat foarte descriptiv și vă permite să înțelegeți rapid esența selectorilor adiacenți în CSS. Cu toate acestea, în practică, se folosesc de obicei alte domenii de aplicare a selectoarelor adiacente. De exemplu, foarte des este necesar să se includă o bucată de text în corpul unui articol, în special o bucată de text, cum ar fi note de subsol, note etc.
În aceste scopuri, este obișnuit să creați o clasă separată și să o aplicați la paragraful dorit. Dar o modalitate mult mai optimă este de a folosi selectoare adiacente. De exemplu, pe blogul meu există stiluri create pentru a stiliza un titlu h3 obișnuit.
H3 (font-size: 1.7em; / * Font size * / text-align: center; / * Text placement * / font-weight: normal; / * Style normal text * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Stil font * / color: # 646464; / * Culoare text * /)
Pentru a evidenția titlul unei note sau note de subsol, să definim o clasă specială, să zicem, puneți:
H3.put (culoare: roșu; / * Culoarea textului * / margin-left: 5px; / * marginea stângă * / margin-top: 0,5em; / * marginea superioară * / padding: 10px; / * marginile textului * / text -align: left; / * Poziția textului * /)
Acum, să folosim selectorele adiacente pentru a crea un stil de paragraf personalizat, acest paragraf va fi plasat direct sub titlu cu stilul „h3.put”:
H3.put + p (fundal: # ffefd5; / * Culoare fundal * / margin-left: 15px; / * Left margin * / margin-right: 120px; / * Right margin * / margin-top: 0.5em; / * Căptușeală superioară * / căptușeală: 5 px; / * margini în jurul textului * /)
Din nou, folosind instrumentul de editare Google Chrome, pe care l-am bâzâit la toate urechile (dar merită), introduceți titlul pentru nota de subsol, fără a uita să puneți clasa put pentru aceasta:
Atenţie!
Apoi scriem textul notei de subsol în sine:
Materialul prezentat în această publicație este foarte important în ceea ce privește învățarea elementelor de bază ale CSS (Cascading Style Sheets)
.
După toate aceste gesturi, primim un astfel de paragraf al notei de subsol pe pagina web (amintiți-vă că am inserat acest paragraf la sfârșitul articolului meu anterior despre selectorul de copii și context):
Acum, pe un blog sau un site web, când legați clasa „put” la orice etichetă h3, o astfel de notă de subsol va apărea pe pagina web. Mai mult decât atât, numai primul paragraf după eticheta h3 cu „class \u003d„ put ”” va fi decorat într-un mod special. Dar asta am vrut, nu?
Cu aceasta, permiteți-mi să termin manualul de astăzi, în care a fost dat un algoritm pentru utilizarea selectorilor vecini, precum și a celor universale. Sper că acest articol vă va încuraja, dragi cititori, să vă abonați
La care se va aplica stilul. Rețineți că eticheta
nu va interfera în nici un fel. Observați, de asemenea, că, în acest caz, stilul nu va fi aplicat acelei etichete
Care se află peste
și, de asemenea, la etichetă
Având un alt părinte
constatări
Utilizând selectoare adiacente (adiacente), puteți stiliza un element atunci când urmează imediat un alt element (sau grup de elemente). Acest lucru funcționează cu elemente care se află la același nivel și au un părinte comun.
Cu selectoarele conexe, puteți stiliza toate elementele tipului selectat atunci când urmează imediat un alt element (sau grup de elemente). Acest lucru funcționează cu elemente care se află la același nivel și au un părinte comun.
Descriere
Elementele unei pagini web sunt numite vecini atunci când se succed imediat în codul documentului.
Sintaxă
E + F (Descrierea regulilor de stil)
Pentru a controla stilul elementelor adiacente, utilizați caracterul plus (+) dintre cele două selectoare E și F. Spațiile din jurul plusului sunt opționale. Acest stil se aplică elementului F, dar numai dacă este adiacent elementului E și îl urmează imediat. Să ne uităm la câteva exemple.
Lorem ipsum dolor stai amet.
Etichetă este un copil al etichetei
Pentru că se află în interiorul acestui container. Respectiv
Acționează ca părinte .
Lorem ipsum dolor sta amet.
Etichete și nu se suprapune în nici un fel și reprezintă elemente adiacente. Faptul că sunt amplasate în interiorul containerului Nu le afectează atitudinea. Lorem ipsum dolor sit amet, consectetuer adipiscare elit.
Etichetele sunt adiacente aici și , și și ... Unde și elementele adiacente nu sunt legate datorită faptului că există un container între ele .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Rezultatul acestui exemplu este prezentat în Fig. unu.
Figura: 1. Culoarea textului roșu pentru selectoarele adiacente
Browsere
Internet Explorer 7 nu este stilat dacă există un comentariu (B + / * plus * / I) între selectoare.
Buna dragi cititori! Continuăm tema selectorilor CSS și astăzi voi încerca să explic într-un mod accesibil ce este selectoare CSS adiacenteși, de asemenea, ce rol are selector universal... Cunoașterea mecanismului de utilizare a tuturor tipurilor de instrumente CSS vă va permite să obțineți un conținut optim și compact al documentului, care descrie stilurile elementelor, care este una dintre componentele promovării cu succes a resursei dvs., deci în niciun caz nu ar trebui neglijați posibilitatea de a obține informații utile despre conceptul de selector și toate tipurile sale.
Dacă vă amintiți și urmăriți îndeaproape publicațiile, multe tipuri de selectoare au fost deja luate în considerare; ; ... Încă o dată, vă îndemn să nu neglijați învățarea elementelor de bază ale CSS, deoarece acest lucru vă va oferi multe preferințe în viitor.
Selector universal
Acum să mergem direct la esența publicației de astăzi. În ceea ce privește selectorul universal, este destul de simplu, așa că nu mă voi opri mult timp pe el. Sintaxa pentru scrierea unei reguli CSS care utilizează un selector universal este următoarea:
Aici operatorul „*” înseamnă că avem un selector universal. Este utilizat atunci când este necesar să se stabilească un stil uniform pentru toate elementele de pe o pagină web. Uneori, un selector universal este opțional. De exemplu, notația. * Class și .class sunt exact aceleași în aceste cazuri. Acum este necesar un exemplu. De obicei, cea mai comună este definirea unui font, dimensiune și culoare uniformă, precum și locația textului obișnuit pe o pagină de blog sau site-ul web.
* (font-family: Tahoma, Arial, Helvetica, sans-serif; / * Text text * / color: # 646464; / * Color text * / font-size: 75%; / * Text size * / text-align: stânga; / * Aspect text * /)
În acest fel, puteți determina aspectul textului pentru toate elementele care se află pe pagină. Rețineți că, în acest caz, rezultatul va fi același dacă în locul selectorului universal utilizați numele etichetei de corp, care include etichetele tuturor elementelor.
Selectoare CSS adiacente
Ei bine, acum să alocăm puțin mai mult timp selectorilor vecini. Elementele unei pagini web sunt adiacente atunci când sunt direct una lângă alta în codul documentului. În acest caz, sintaxa stilurilor CSS arată astfel:
Acum, să luăm un paragraf de text definit de eticheta p, care va include b, i și etichete mari ca copii, care determină formatarea textului, respectiv, aldin, cursiv și evidențiind mărind fontul:
Acest paragraf folosește eticheta b, eticheta i, etichetă mare.
Și folosind instrumentul de editare CSS și HTML, care este încorporat în cele mai recente versiuni ale tuturor browserelor populare (,) și care este un analog al celebrului plugin pentru browser Firefox (), vom insera acest paragraf oriunde pe absolut orice pagină web (I a făcut-o chiar pe pagina articolului anterior din primul paragraf). Acest instrument, de exemplu, în Chrome este invocat prin simpla apăsare a tastei F12. Poate fi folosit ca referință practică pentru HTML Basics și CSS Tutorial. Așadar, inserez o bucată de text ca primul paragraf:
Acest paragraf va fi experimental și, folosind exemplul său, vom lua în considerare aplicația selectoare adiacente... După cum am spus, etichetele b, i și mari sunt copii ale etichetei de paragraf p, deoarece toate sunt direct în interiorul containerului p. Aici, etichetele adiacente sunt b și i, precum și i și mare. Acum să aplicăm regula CSS pentru selectoarele adiacente:
B + i (culoare: roșu;) i + mare (culoare: verde;)
După aplicarea acestor stiluri, paragraful va arăta astfel:
Acest lucru este valabil pentru toate etichetele de pe o pagină web care includ elementele b, i și mari. Mai mult, b și i, i și big trebuie să fie lângă ele, pentru alte combinații, această regulă CSS nu va funcționa. Cred că acum vă este clar cum sunt utilizate selectoarele adiacente atunci când scrieți sau editați un document CSS. O altă notă foarte importantă: dacă ați observat deja, în cazul elementelor adiacente, stilul specificat se aplică doar celui de-al doilea element.
Exemplul de paragraf, care a fost considerat foarte descriptiv și vă permite să înțelegeți rapid esența selectorilor adiacenți în CSS. Cu toate acestea, în practică, se folosesc de obicei alte domenii de aplicare a selectoarelor adiacente. De exemplu, foarte des este necesar să se includă o bucată de text în corpul unui articol, în special o bucată de text, cum ar fi note de subsol, note etc.
În aceste scopuri, este obișnuit să creați o clasă separată și să o aplicați la paragraful dorit. Dar o modalitate mult mai optimă este de a folosi selectoare adiacente. De exemplu, pe blogul meu există stiluri create pentru a stiliza un titlu h3 obișnuit.
H3 (font-size: 1.7em; / * Font size * / text-align: center; / * Text placement * / font-weight: normal; / * Style normal text * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Stil font * / color: # 646464; / * Culoare text * /)
Pentru a evidenția titlul unei note sau note de subsol, să definim o clasă specială, să zicem, puneți:
H3.put (culoare: roșu; / * Culoarea textului * / margin-left: 5px; / * marginea stângă * / margin-top: 0,5em; / * marginea superioară * / padding: 10px; / * marginile textului * / text -align: left; / * Poziția textului * /)
Acum, să folosim selectorele adiacente pentru a crea un stil de paragraf personalizat, acest paragraf va fi plasat direct sub titlu cu stilul „h3.put”:
H3.put + p (fundal: # ffefd5; / * Culoare fundal * / margin-left: 15px; / * Left margin * / margin-right: 120px; / * Right margin * / margin-top: 0.5em; / * Căptușeală superioară * / căptușeală: 5 px; / * margini în jurul textului * /)
Din nou, folosind instrumentul de editare Google Chrome, pe care l-am bâzâit la toate urechile (dar merită), introduceți titlul pentru nota de subsol, fără a uita să puneți clasa put pentru aceasta:
Atenţie!
Apoi scriem textul notei de subsol în sine:
Materialul prezentat în această publicație este foarte important în ceea ce privește învățarea elementelor de bază ale CSS (Cascading Style Sheets)
.După toate aceste gesturi, primim un astfel de paragraf al notei de subsol pe pagina web (amintiți-vă că am inserat acest paragraf la sfârșitul articolului meu anterior despre selectorul de copii și context):
Acum, pe un blog sau un site web, când legați clasa „put” la orice etichetă h3, o astfel de notă de subsol va apărea pe pagina web. Mai mult decât atât, numai primul paragraf după eticheta h3 cu „class \u003d„ put ”” va fi decorat într-un mod special. Dar asta am vrut, nu?
Cu aceasta, permiteți-mi să termin manualul de astăzi, în care a fost dat un algoritm pentru utilizarea selectorilor vecini, precum și a celor universale. Sper că acest articol vă va încuraja, dragi cititori, să vă abonați
