Deoarece nu vrem să stilizăm toate elementele HTML în același timp, trebuie să putem selecta un subset din aceste elemente.
Selectorii CSS determină la care elemente vrem să aplicăm stilul.
Selectori de bază pentru etichete
Direcționarea etichetelor HTML de bază este ușor: trebuie doar să utilizați numele etichetei.
Există o legătură directă între numele etichetei HTML și selectorul CSS utilizat.
Având în vedere că, probabil, nu dorim să stilizăm toate paragrafele sau toate titlurile în mod egal, trebuie să le distingem.
Din toate atributele HTML, atributul de clasă este cel mai important pentru CSS. Acesta vă permite să definiți un grup de elemente HTML pe care le putem direcționa cu precizie. Pur și simplu puneți un punct în fața numelui de clasă pe care doriți să îl utilizați:
Pe de altă parte, există un atribut de clasă HTML cu o valoare de dată. Trebuie să se potrivească cu numele clasei CSS.
Puteți utiliza orice nume pentru clasa dvs., dar nu ar trebui să înceapă cu un număr.
Selectorul de clasă .date va viza toate elementele HTML cu atributul class = "date". Astfel, următoarele elemente HTML vor fi stilizate:
Rețineți că numele etichetei nu este important. este considerat doar atributul de clasă.
identificatorii
De asemenea, puteți utiliza atributul id în codul HTML și îl puteți defini în CSS utilizând o rețea:
Identificatorii sunt asemănători clasei, deoarece se bazează și pe atributul HTML.
fiecare
fiecare
- în interiorul unui strămoș cu clasa = "dico"
Asociația selectorilor
Să folosim exemplul nostru anterior, în care dorim să ne facem datele roșii:
Dacă vrem să avem datele înăuntru afișate în albastru? Putem adăuga următoarea regulă CSS:
em.date combină următoarele:
- em selector de etichete;
- clasa selector .date.
Se va aplica numai elementelor . Acest lucru nu va afecta alte date sau .
Ierarhia selectorilor
Spațiul din selector determină relația strămoșilor / copilului. De exemplu, dorim ca legăturile din antetul nostru să fie roșii:
pseudo
Elementele HTML pot avea stări diferite. Cel mai obișnuit caz este când plasați cursorul peste link. În CSS, este posibil să aplicați un stil diferit atunci când apare un eveniment.
Pseudo-clasele sunt legate de selectorii obișnuiți și încep cu un colon:
Articole similare
Trimiteți-le prietenilor:
fiecare