Scurt tutorial CSS – Diferenta dintre CLASS si ID
Nu de mult va spuneam ca am sa revin putin la selectorii de tip CLASS si ID, deoarece nu e chiar tot una care dintre ei sunt folositi, iar daca sunteti incepatori in ai CSS-ului, e bine de stiut care este diferenta dintre cei doi.
In primul rand, ID-urile se pot folosi doar o singura data intr-un document html. CLASS-urile se pot folosi de mai multe ori. In general, ID-urile se folosesc pentru elementele principale ale unei pagini, de exemplu header-ul, continutul principal, elementele din subsolul paginii (footer), etc. Selectorii de tip CLASS se folosesc pentru elementele care apar de mai multe ori intr-un fisier html sau intr-un document (la meniuri de exemplu).
In al doilea rand, e bine de stiut ca ID-urile vor fi intotdeauna prioritare fata de selectorii de tip CLASS.
<style type="text/css">
#verde {color:green}
.rosu {color:red}
</style>
<body>
<p id="verde">rand pentru ID verde</p>
<p class="rosu">rand pentru CLASS rosu</p>
<p id="verde" class="rosu">rand pentru ID si CLASS combinat</p>
</body>
Codul de mai sus va avea urmatorul efect:
rand pentru ID verde
rand pentru CLASS rosu
rand pentru ID si CLASS combinat
Mai exact, in primul rand am setat un ID pentru un font verde si s-a afisat verde, apoi un CLASS pentru un font rosu si se afiseaza rosu, iar in ultimul rand le-am introduse pe amandoua. Se vede insa in rezultat ca doar ID-ul are efect, din moment ce randul este in afisat in verde. In practica, e bine sa nu se procedeze astfel, mai sus fiind doar un exemplu. Cei doi selectori trebuiesc folositi separat pentru elementele html dintr-o pagina.
2 Comments
Dupa cum zice in tutorial, id-urile pot fi folosite o singura data intr-un document html, dar in exemplu il folositi de 2 ori (id=”verde”).
Exemplul de mai sus e pur demonstrativ si teoretic, am presupus ca fiecare paragraf de acest fel este folosit o singura data intr-o pagina. Insa intradevar ai dreptate, puteam sa aleg un exemplu mai bun si sa nu folosesc acelasi ID. Multumesc pentru observatie.
One Trackback
[...] pe care dorim sa le formatam folosind CSS-ul. Pentru fiecare din aceste div-uri, am folosit ID-uri (click aici pentru e afla de [...]