Clasele și ID-urile Ajută la extinderea CSS-ului
Construirea de site-uri web de astăzi necesită o înțelegere profundă a CSS (Cascading Style Sheets). Acestea sunt instrucțiunile pe care le dați unui site web pentru a determina modul în care acesta va fi structurat în fereastra browserului. Aplicați o serie de "stiluri" documentului dvs. HTML, care va crea aspectul și aspectul paginii dvs. Web.
Există mai multe moduri de a aplica acele stiluri menționate mai sus într-un document, dar de multe ori doriți să utilizați un stil numai pe unele elemente dintr-un document, dar nu toate instanțele acelui element.
De asemenea, este posibil să doriți să creați un stil pe care să îl puteți aplica mai multor elemente dintr-un document, fără a trebui să repetați regula de stil pentru fiecare instanță individuală. Pentru a atinge aceste stiluri dorite, veți folosi atributele clasei și ID-ul HTML. Aceste atribute sunt atribute globale care pot fi aplicate la aproape fiecare etichetă HTML . Asta înseamnă că, indiferent dacă sunt diviziuni de stil, paragrafe, linkuri, liste sau oricare din celelalte piese HTML din document, puteți să vă îndreptați către atributele de clasă și ID vă ajuta să vă îndepliniți această sarcină!
Selectorii de clasă
Selectorul de clasă vă permite să setați mai multe stiluri la același element sau aceeași etichetă într-un document. De exemplu, este posibil să doriți ca anumite secțiuni ale textului dvs. să fie numite într-o culoare diferită de restul textului din document. Aceste secțiuni evidențiate ar putea fi o "alertă" pe care o setați pe pagină. Puteți aloca paragrafele dvs. cu clase precum:
p {culoare: # 0000ff; }
p.alert {culoare: # ff0000; }
Aceste stiluri ar determina culoarea tuturor paragrafelor la albastru (# 0000ff), dar orice paragraf cu un atribut de clasă de "alertă" ar fi înlocuit în stil roșu (# ff0000). Acest lucru se datorează faptului că atributul de clasă are o specificitate mai mare decât prima regulă CSS, care utilizează doar un selector de etichete.
Când lucrați cu CSS, o regulă mai specifică va suprascrie o caracteristică mai puțin specifică. Deci, în acest exemplu, regula mai generală stabilește culoarea tuturor paragrafelor, dar regula a doua, mai specifică, depășește acea setare doar pe unele paragrafe.
Iată cum ar putea fi folosit acest lucru în anumite marcări HTML:
Acest paragraf ar fi afișat în albastru, care este implicit pentru pagină.
Acest paragraf ar fi de asemenea albastru.
Și acest paragraf ar fi afișat în roșu, deoarece atributul de clasă ar suprascrie culoarea albastră standard din stylingul elementului selector.
În acest exemplu, stilul "p.alert" se va aplica numai elementelor din paragraf care utilizează acea clasă "alertă". Dacă doriți să utilizați această clasă pe mai multe elemente HTML, pur și simplu eliminați elementul HTML de la începutul (doar asigurați-vă că părăsiți perioada (.)), după cum urmează:
.alert {background-color: # ff0000;}
Această clasă este acum disponibilă pentru orice element care are nevoie de el. Orice bucată din codul HTML care are o valoare de atribut de clasă de "alertă" va primi acum acest stil. În codul HTML de mai jos, avem atât un paragraf, cât și un titlu de nivel 2 care utilizează clasa "alertă". Ambele ar avea o culoare de fundal roșie pe baza CSS pe care tocmai am arătat-o.
Acest paragraf va fi scris în roșu.
Și acest h2 ar fi de asemenea roșu.
Pe site-urile de astăzi, atributele de clasă sunt adesea folosite pe majoritatea elementelor, deoarece acestea sunt mai ușor de utilizat din punct de vedere al specificității. Veți găsi paginile HTML cele mai actuale care vor fi completate cu atribute de clasă, unele dintre ele repetate de mai multe ori într-un document și altele care pot apărea doar o singură dată.
Selectori de ID
Selectorul de ID vă permite să dați un nume unui anumit stil fără a îl asocia cu o etichetă sau alt element HTML . Spuneți că ați avut o diviziune în marcajul HTML care conține informații despre un eveniment.
Ați putea da această diviziune un atribut de identitate al "evenimentului", iar dacă doriți să subliniați acea diviziune cu o margine neagră de 1 pixel, scrieți un cod ID ca acesta:
#event {graniță: 1px solid # 000; }
Provocarea cu selectori de identificare este că nu pot fi repetate într-un document HTML. Acestea trebuie să fie unice (puteți utiliza același ID pe mai multe pagini ale site-ului dvs., dar numai o singură dată în fiecare document HTML individual). Deci, dacă ați avea 3 evenimente care au nevoie de toate aceste granițe, va trebui să le dați atributele ID ale evenimentului "event1", "event2" și "event3" și stilul fiecăruia. Ar fi, prin urmare, mult mai ușor să folosim atributul de clasă menționat anterior al "evenimentului" și să-i stilim pe toate odată.
O altă provocare cu atributele ID este că au o specificitate mai mare decât atributele de clasă. Aceasta înseamnă că, dacă aveți nevoie să aveți CSS care să înlocuiască un stil stabilit anterior, poate fi dificil să faceți acest lucru dacă v-ați bazat prea mult pe ID-uri. Acesta este motivul pentru care mulți dezvoltatori web s-au mutat departe de utilizarea ID-urilor în marcarea lor, chiar dacă intenționează să utilizeze această valoare doar o singură dată și în schimb au apelat la atributele de clasă mai puțin specifice pentru aproape toate stilurile.
Singura zonă în care pot intra în joc atributele de identificare este atunci când doriți să creați o pagină care să aibă link-uri de ancorare în pagină. De exemplu, dacă aveți un site web în stil parallax care conține tot conținutul dintr-o singură pagină cu link-uri care "sare" în diferite părți ale acelei pagini. Acest lucru se face folosind atributele ID și legăturile text care utilizează aceste link-uri de ancorare.
Ați adăuga pur și simplu valoarea acelui atribut, precedat de simbolul #, atributului href al linkului, astfel:
Acesta este linkul
Când faceți clic sau atingeți, acest link va trece la partea din pagină care are acest atribut ID. Dacă niciun element din pagină nu folosește această valoare ID, linkul nu ar face nimic.
Rețineți că, dacă doriți să creați link-uri în pagină pe un site, va fi necesară utilizarea atributelor de identitate, dar puteți totuși să vă întoarceți la clase pentru scopuri generale de stil CSS. Acesta este modul în care mărginesc paginile de astăzi - am folosit selectorii de clasă cât mai mult posibil și am apelat doar la ID-uri atunci când am nevoie ca atributul să acționeze nu doar ca un cârlig pentru CSS, ci și ca o legătură în pagină.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 8/9/17