Evaluare utilizator: 0 / 5

Steluță inactivăSteluță inactivăSteluță inactivăSteluță inactivăSteluță inactivă
 

Selectorul ID este utilizat pentru a specifica un stil css către un singur (unic) element html. El este folosit o dată pe o pagină şi este un identificator unic pentru un element. Pentru a defini un selector id utilizaţi simbolul diez (#) după care numele selectorului id. Numele ar trebui să conţină doar litere, cifre, liniuţă, fără spaţii. El utilizat pentru orice element unic pe o pagină web, cum ar fi antetul (header), meniul principal de navigare (main meniu), subsolul (footer) sau altă parte a interfeţei. Pentru a insera într-un element html stilul css creat de un selector id, va trebui să utilizaţi un atribut id, iar valoarea acestuia va fi numele selectorului id ( id=”nume id”).

 

 Exemplu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Selectorul Class</title>

<style type="text/css">

                                   #antet

                                               {

                                               text-align:center;

                                               color: blue;

                                               border: 3px double orange;

                                               background-color: lightgray;

                                   }

       </style>

</head>

<body>

<div id="antet">

<h1>Selectorul ID</h1></div>

</body>

</html>

 

Combinare selector ID cu selectoare tip (simple)

În practică, se întâlnesc situaţii în care combinăm selectorul id cu selectoare tip pentru a adăuga un stil diferit către acelaşi element html pe o anumită pagină.

Exemplu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Selectorul Class</title>

<style type="text/css">

                                  

                        h2

                                    {

                                    text-align:center;

                                   color: blue;

                        }

                       

                        h2#titlu

                                   {

                                   color: red;                              

                        }

       </style>

</head>

<body>

<h2 id="titlu">Selectorul ID</h2>

<p>..........</p>

<h2>Selectorul ID</h2>       

<ul>

</body>

</html>

 

În exemplul de mai sus, am combinat selectorul tip h2 cu un selector id #titlu, pentru a schimba culoarea titlului paginii din albastru in rosu, considerând că este pagina principală a site-ului. Numele selectorului id, titlu, este unic identificator, el nu mai poate fi folosit din nou în această pagină. O altă utilizare în pagină a elementului <h2> va avea ca efect aplicarea stilului implicit, adică nu se va utiliza atributul id, iar culoarea lui va fi albastru.

Combinare selector ID cu multiple selectoare Class

Selectorul Class este utilizat atunci când doriţi un control asupra unui număr mai mare de elemente.

Exemplu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Selectorul Class</title>

<style type="text/css">

                       

                        /* Stiluri lista dulciuri */                   

                        ul#dulciuri {

                                   border: 3px double orange;

                                   background-color: lightgray;

                                   width: 150px;

                        }

                       

                        /* Culoare ciocolata */

                        .ciocolata {

                                   color:#000000 ;

                        }

                        /* Culoare bomboane */

                        .bomboane {

                                   color:#880000;

                        }

                        /* Culoare prajituri */

                        .prajituri {

                                   color:#CC9900;

                        }

</style>

</head>

<body>

<ul id="dulciuri">

<li class="ciocolata">Ciocolata Neagra</li>

<li class="ciocolata">Ciocolata cu alune</li>

<li class="bomboane">Bomboane simple</li>

<li class="bomboane">Bomboane cu crema</li>

<li class="prajituri">Prajitura cu nuca</li>

<li class="prajituri">Prajitura cu miere</li>

</ul>

</body>

</html>

 

Selectorul id dulciuri l-am utilizat pentru a stabili stilurile css pentru întreaga listă de dulciuri, după care pentru fiecare tip de dulciuri am utilizat un selector class pentru a stabili culoarea. Repet, selectorul id dulciuri este unic şi va putea fi utilizat doar o dată pentru elementul <ul> într-o pagină web.

Notă:

Evitaţi utilizarea selectorului id acolo unde este necesar să se utilizeze de mai multe ori pe pagină regula css al selectorului id. Sau evitaţi utilizarea selectorului id, dacă în viitor este posibil să multiplicaţi utilizarea lui în pagină, cum ar fi link-uri, imagini, paragrafe etc.

Notă:

În practică, browser-ele nu verifică unicitatea selectorului id. Ca urmare, dacă veţi utiliza în pagina web mai multe elemente html, care conţin aceeaşi valoare pentru atributul id, atunci, probabil, browser-ul va aplica acelaşi stil css pentru fiecare element. Dar, acesta nu este o bună practică. De asemenea, având mai multe elemente cu aceeaşi valoare pentru atributul id într-un document html, va crea confuzie atunci când utilizăm JavaScript DOM. Funcţionarea corectă a unor funcţii precum getElementById () depind de utilizarea unui singur id pentru un element html.

Mai jos, aveţi un exemplu de utilizare incorectă a selectorului id într-un document html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Selectorul Class</title>

<style type="text/css">

                                  

                        #titlu

                                   {

                                   text-align:center;

                                   border: 3px double orange;

                                   background-color: lightgray;

                                   color: red;                              

                        }

       </style>

</head>

<body>

<h2 id="titlu">Selectorul ID</h2>

<h3 id="titlu">Selectorul ID</h3>

<h4 id="titlu">Selectorul ID</h4>

</body>

</html>                                                                                                                                         

 

Exemplul de mai sus constituie o practică incorectă de a utiliza selectorul id  într-un document html, deoarece elementele h2, h3, h4 au aceeaşi valoare pentru atributul id.

Files:
id_selector
Date 2013-12-14 Filesize 119.67 KB Download 201