Pasul 9. Selectori de context
Când creați o pagină web, adesea trebuie să puneți niște etichete în interiorul altora. Pentru a vă asigura că stilurile pentru aceste etichete sunt utilizate corect, selectorii care funcționează numai într-un anumit context vă vor ajuta. De exemplu, setați stilul pentru etichetă Numai atunci când este amplasat în interiorul containerului
. În acest fel, puteți seta stilul pentru o singură etichetă în același timp, precum și pentru o etichetă care se află în interiorul alteia.
Selectorul de context constă din selectori simpli, separați de un spațiu. Deci, pentru selectorul etichetei, sintaxa este după cum urmează.
În acest caz, stilul va fi aplicat la Teg2 atunci când acesta este plasat în interiorul Tag1, după cum se arată mai jos.
<Тег1>
<Тег2>.
Utilizarea selectorilor de context este demonstrată în Exemplul 9.1.
Exemplul 9.1. Selectori de context
Bold Text Outline
În același timp, textul îndrăzneț al textului și culoarea evidențiată
Acest exemplu arată utilizarea normală a unei etichete și aceeași etichetă, atunci când este încorporată în interiorul paragrafului
. Aceasta schimbă culoarea și fontul textului, după cum se arată mai jos.
Bold Text Outline
În același timp, textul îndrăzneț al textului și culoarea evidențiată
Nu este necesar ca selectorii de context să conțină numai o singură etichetă imbricată. În funcție de situație, este acceptabil să utilizați două sau mai multe etichete succesive imbricate.
Seturile de selecție de context mai larg sunt furnizate când se utilizează identificatori și clase. Aceasta vă permite să setați stilul numai pentru elementul care se află într-o anumită clasă, după cum se arată în Exemplul 9.2.
Exemplul 9.2. Utilizarea claselor
Alte materiale pe această temă
Rezultatul acestui exemplu este prezentat mai jos.
Cu această abordare, este ușor să controlați stilul acelorași elemente, cum ar fi imaginile și legăturile, proiectarea cărora trebuie să fie diferită în diferite zone ale paginii web.