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.

3 thoughts on “Scurt tutorial CSS – Diferenta dintre CLASS si ID

  1. Pingback: Scurt tutorial CSS: formatarea textului - simple-webdesign.com

  2. Vlad says:

    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”).

  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>