Deci, să aruncăm o privire la un exemplu:
După cum se poate observa, dosarul constă în reguli ale formularului:
Astfel, folosind selectorii, selectăm elementele de care avem nevoie și atribuim valorile necesare pentru anumite proprietăți.
Există mai multe tipuri:
Generalizator. Acestea conțin un asterisc. Utilizându-le, atribuim reguli simultan tuturor elementelor din document sau obiect-mamă. În exemplul * se specifică fontul Tahom pentru toate elementele paginii noastre.
Numele etichetei. Dacă trebuie să procesăm toate etichetele cu același nume, atunci această regulă se potrivește cel mai bine. Putem repeta toate paragrafele, sau putem schimba dimensiunea tuturor titlurilor. Aici și corpul nostru
O clasă de elemente. Vă permite să specificați simultan stilurile dorite pentru toate elementele dintr-o clasă. De exemplu, dacă doriți să repetați unele dintre elementele din listă, le atribuiți atributul class = "class-name". iar în proprietăți scrie construcția pornind de la punctul - .class-name. În exemplul nostru
Identificatorul elementului. Este foarte convenabil în acele cazuri când trebuie să modificați proprietățile unui singur element pe pagină. De exemplu, setați fundalul pentru antetul site-ului sau schimbați dimensiunea formularului de abonament la dreapta. Și mult mai mult. Pentru a face acest lucru, elementul de pagină trebuie să seteze atributul id = "attr-id" și să specifice # attr-id în proprietăți. În exemplul nostru, #r
Nesting selectorilor
Puteți extinde chiar și funcționalitatea selectorilor CSS prin asamblarea lor.
De exemplu, trebuie să reparați linkurile în roșu în toate paragrafele paginii. Puteți scrie un astfel de selector.
În loc de nume de etichete, puteți utiliza clase și identificatori, nu există restricții.
După cum puteți vedea, această abordare ne permite să creăm un caz mai particular și să schimbăm maxim proprietățile numai a elementelor de care avem nevoie, fără a afecta toate celelalte.
Moștenirea proprietăților
O altă caracteristică importantă a CSS este moștenirea proprietăților.
Prima instrucțiune restabilește umplutura pentru toate elementele de pagină.
Al doilea - stabilește indentarea la 10 pixeli pentru toate paragrafele.
Dacă pentru unele clase este dată clasa = "clasă", atunci indentsul lor se schimbă la 5 pixeli.
Și dacă între aceste paragrafe există unul cu id = "id", indentsul său va avea o lățime de 6 pixeli.
Astfel, regulile de bază ale moștenirii sunt următoarele:
Regulile de mai jos se referă la cele din fișierul de mai sus.
Regulile mai specifice se suprapun mai general. De exemplu, p va suprascrie *. Sau ".class p" va suprascrie un simplu "p".
O regulă cu o clasă este mai importantă decât o regulă fără ea. Iar ID-ul este mai important decât clasa.
Îmbinați proprietățile
Pentru a mări compactitatea foilor de stil, utilizați operatorul virgulei. De exemplu:
Aceasta înseamnă că toate legăturile și textul îndrăzneț vor fi roșii. Astfel, putem evita duplicarea codului și reduce dimensiunea foilor de stil prin combinarea mai multor selectori într-o singură regulă.