Foi de stil în cascadă definiți aspectul unui element de pagină web conectându-vă la atributele pe care le aplicați acelui element. Aceste atribute pot fi fie un ID, fie o clasă și, ca toate atributele, adaugă informații utile elementelor la care sunt atașate.
În funcție de atributul pe care îl adăugați unui element, puteți scrie un selector CSS pentru a aplica stilurile vizuale necesare, care sunt necesare pentru a atinge aspectul pentru acel element și site-ul web ca un intreg, per total.
În timp ce ID-urile sau cursurile funcționează în scopul de a vă conecta la regulile CSS, designul web modern metodele favorizează clasele în locul ID-urilor, în parte, deoarece acestea sunt mai puțin specifice și mai ușor de lucrat în general.
Una sau mai multe clase în CSS?
În majoritatea cazurilor, atribuiți un singur atribut de clasă unui element, dar de fapt nu sunteți limitat la o singură clasă așa cum sunteți cu ID-uri. În timp ce un element poate avea doar un singur atribut ID, puteți da unui element mai multe clase și, în unele cazuri, acest lucru va face pagina dvs. mai ușor de stilat și mult mai mult flexibil.
Dacă trebuie să atribuiți mai multe clase unui element, adăugați clasele suplimentare și pur și simplu separați-le cu un spațiu în atributul dvs.
De exemplu, acest paragraf are trei clase:
Acesta ar fi textul paragrafului
Aceasta setează următoarele trei clase pe eticheta de paragraf:
- Pullquote
- Recomandate
- Stânga
Observați spațiile dintre fiecare dintre aceste valori ale clasei. Aceste spații sunt cele care le configurează ca clase diferite, individuale. Acesta este și motivul pentru care numele claselor nu pot avea spații în ele, deoarece acest lucru le-ar seta ca clase separate.
Odată ce ai valorile clasei în HTML, puteți apoi să le atribuiți ca clase în CSS și să aplicați stilurile pe care doriți să le adăugați. De exemplu.
.pullquote {... }
.Recomandate {... }
p.stânga {... }
În aceste exemple, declarațiile CSS și perechile de valori apar în interiorul acoladelor, astfel încât aceste stiluri ar fi aplicate selectorului corespunzător.
daca tu setați o clasă la un anumit element (de exemplu, p. stânga), îl puteți utiliza în continuare ca parte a unei liste de clase; totuși, rețineți că va afecta doar acele elemente care sunt specificate în CSS. Cu alte cuvinte, p. stânga stilul se va aplica numai paragrafelor cu această clasă, deoarece selectorul dvs. spune de fapt să îl aplicați la "paragrafele cu o valoare a clasei de stânga„În schimb, ceilalți doi selectori din exemplu nu specifică un anumit element, așa că s-ar aplica oricărui element care folosește acele valori ale clasei.
Mai multe clase, semantică și JavaScript
Un alt avantaj al utilizării mai multor clase este că crește posibilitățile de interactivitate.
Aplicați clase noi elementelor existente folosind JavaScript fără a elimina niciuna dintre clasele inițiale. De asemenea, puteți utiliza clase pentru a defini semantica unui element - adăugați clase suplimentare pentru a defini ce înseamnă semantic acel element. Această abordare este cum Microformate lucrări.
Avantajele mai multor clase
Stratarea mai multor clase poate face mai ușoară adăugarea de efecte speciale elementelor fără a fi nevoie să creați un stil complet nou pentru acel element.
De exemplu, pentru a pluti elemente la stânga sau la dreapta, puteți scrie două clase:
stânga.
și.
dreapta.
cu doar.
plutește la stânga;
și.
plutitor: dreapta;
în ele. Apoi, ori de câte ori aveai un element pe care trebuie să-l plutești la stânga, pur și simplu ai adăuga clasa „stânga” la lista de clase.
Cu toate acestea, există o linie fină de mers pe jos aici. Amintiți-vă că standardele web dictează separarea stilului și structurii. Structura este gestionată folosind HTML în timp ce stilul este în CSS. Dacă documentul dvs. HTML este plin de elemente care au toate nume de clasă precum „roșu” sau „stâng”, care sunt nume care dictează modul în care ar trebui să arate elementele, mai degrabă decât ceea ce sunt, treci această linie între structură și stil.
Dezavantaje ale mai multor clase
Cel mai mare dezavantaj al utilizării mai multor clase simultane pe elementele dvs. este că le poate face puțin dificil să le priviți și să le gestionați în timp. Poate deveni dificil să stabiliți ce stiluri afectează un element și dacă vreun script îl afectează. Multe dintre cadrele disponibile astăzi, cum ar fi Bootstrap, utilizează intens elementele cu clase multiple. Acest cod poate scăpa de sub control și greu de lucrat foarte repede dacă nu sunteți atent.
Când utilizați mai multe clase, riscați, de asemenea, ca stilul pentru o clasă să suprascrie stilul altuia. Această coliziune poate face dificil să vă dați seama de ce stilurile dvs. nu sunt aplicate chiar și atunci când se pare că ar trebui. Rămâneți conștienți de specificitate, chiar și cu atributele aplicate acelui element.
Utilizând un instrument precum instrumentele pentru webmasteri din Google Chrome, puteți vedea mai ușor modul în care clasele dvs. vă afectează stilurile și puteți evita această problemă a stilurilor și atributelor conflictuale.