Construirea de site-uri web bine stilate pe web-ul de astăzi necesită o înțelegere profundă Foi de stil în cascadă. Aplicați o serie de stiluri CSS documentului HTML pentru a informa aspectul paginii dvs. web.
Atribute de clasă și ID
Uneori, designerii trebuie să aplice doar un stil niste elementelor dintr-un document, dar nu toate instanțele acelui element. Pentru a obține aceste stiluri dorite, utilizați clasă și ID Atribute HTML. Aceste atribute sunt atribute globale aplicabile aproape tuturor Etichetă HTML- indiferent dacă stilizați diviziuni, paragrafe, linkuri, liste sau oricare dintre celelalte fragmente de HTML din documentul dvs., puteți apela la atribute de clasă și ID pentru a vă ajuta să îndepliniți această sarcină!
Selectoare de clasă
Selectorul de clase setează mai multe stiluri pe același element sau etichetă într-un document. De exemplu, pentru a apela anumite secțiuni ale textului într-o culoare diferită ca alertă, atribuiți paragrafele dvs. cu clase de acest gen:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Aceste stiluri ar seta culoareatoate paragrafe în albastru (# 0000ff), dar orice paragraf cu un atribut de clasă de alerta ar în loc de stilizat în 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 una mai puțin specifică. Deci, în acest exemplu, regula mai generală stabilește culoarea tuturor paragrafelor, dar a doua regulă, mai specifică, decât înlocuiește setarea numai în unele paragrafe.
Iată cum ar putea fi folosit acest lucru în unele marcaje HTML:
Acest paragraf va fi afișat în albastru, care este implicit pentru pagină.
Acest paragraf ar fi, de asemenea, în albastru.
Și acest paragraf va fi afișat cu roșu, deoarece atributul de clasă ar suprascrie culoarea albastră standard din stilul selectorului de elemente.
În acest exemplu, stilul p. alertă s-ar aplica numai elementelor de paragraf care folosesc acest lucru alerta clasă. Pentru a utiliza acea clasă în mai multe elemente HTML, eliminați elementul HTML de la începutul apelului de stil, astfel:
.alert {background-color: # ff0000;}
Această clasă este acum disponibilă pentru orice element care are nevoie de ea. Orice bucată din HTML care are o valoare de atribut de clasă de alerta va primi acum acest stil. În HTML-ul de mai jos, avem atât un paragraf, cât și un titlu de nivel doi care utilizează alerta clasă. Ambele afișează o culoare de fundal roșie:
Acest paragraf ar fi scris cu roșu.
Pe site-urile web de astăzi, atributele de clasă sunt adesea folosite pe majoritatea elementelor, deoarece sunt mai ușor de lucrat dintr-o perspectivă specifică decât ID-urile. Veți găsi majoritatea paginilor HTML curente care trebuie completate cu atribute de clasă, dintre care unele sunt repetate frecvent într-un document și altele care pot apărea o singură dată.
Selectoare ID
ID-ul selector numește un anumit stil fără a-l asocia cu o etichetă sau altul Element HTML.
Să presupunem o diviziune în marcajul HTML care conține informații despre un eveniment. Ai putea da acestei diviziuni un Atribut ID de evenimentși apoi conturați această diviziune cu o margine neagră de 1 pixel:
#eveniment {border: 1px solid # 000; }
Provocarea cu Selectoare ID 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 o singură dată în fiecare document HTML individual). Deci, pentru trei evenimente care au nevoie de această margine, trebuie să identificați atributele ID ale eveniment1, eveniment2, și eveniment3 și stilează fiecare dintre ele. Prin urmare, ar fi mult mai ușor să folosiți atributul de clasă menționat mai sus al eveniment și stilează-le pe toate deodată.
Complicații ale atributelor de identificare
O altă provocare cu atributele ID este că au o specificitate mai mare decât atributele clasei. Pentru a suprascrie un stil stabilit anterior, poate fi dificil să faceți acest lucru dacă v-ați bazat prea mult pe ID-uri. Mulți dezvoltatori web s-au îndepărtat de folosind ID-uri în marcajul lor, chiar dacă intenționează să folosească acea valoare doar o dată și, în schimb, au apelat la atributele de clasă mai puțin specifice pentru aproape toate stiluri.
Singura zonă în care intră în joc atributele ID este atunci când doriți să creați o pagină care are linkuri de ancorare în pagină. De exemplu, luați în considerare un site web în stil paralaxă, care conține tot conținutul pe o singură pagină, cu link-uri care „trec” la diferite părți ale paginii respective. Atributele ID și legăturile text utilizează aceste legături ancore. Adăugați valoarea acelui atribut, precedat de # simbol, la href atributul linkului, astfel:
Acesta este linkul
Când faceți clic sau atingeți, acest link sare la partea de pagină care are acest atribut ID. Dacă niciun element de pe pagină nu folosește această valoare ID, linkul nu ar face nimic.
Pentru a crea legături în pagină pe un site, va fi necesară utilizarea atributelor de ID, dar puteți totuși apela la clase în scopuri generale de stil CSS. Acesta este modul în care designerii marchează astăzi paginile - utilizează selectoare de clasă cât mai mult posibil și apelează la ID-uri doar atunci când au nevoie de atribut pentru a acționa nu numai ca un cârlig pentru CSS, ci și ca un link în pagină.