Pseudo-elementele CSS permit adaugarea de stiluri CSS anumitor parti din continutul unui element HTML.
De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS diferit primei litere sau primului rand dintr-un paragraf, se folosesc pseudo-elemente.
Sintaxa pentru utilizare pseudo-elemente:
Pentru a adauga un anumit continut (text, imagine, sunet .wav) in HTML prin CSS, se foloseste proprietatea content
si valoarea ce reprezinta continutul respectiv: 'textul' se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier)
- In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>.
<!DOCTYPE html> <html> <head> <title>Title</title> <style> h4:after { content:'MarPlo'; color:blue; } </style> </head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html>
Pseudo-elementul Before
este similar cu "after", continutul se adauga la fel, dar la inceputul elementului.
Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind sintaxa:
<!DOCTYPE html> <html> <head> <title>Title</title> <style> h4:first-child:before { content:'MarPlo- '; color:blue; } </style> </head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html>
h4:first-child:before { content:url(imagine.gif); }
Pseudo-elementul first-letter
aplica un stil CSS primului caracter dintr-un text.
- In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element cu clasa ".test".
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .test:first-letter { color:red; font-size:25px; } </style> </head> <body> <p class="test">Textul din paragraf ...</p> <div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div> </body> </html>
Textul din paragraf ...
Pseudo-elementul First-line
aplica un stil CSS primei linii din continutul elementului HTML.
- Exemplul:
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .test:first-line { color:blue; font-weight:bold; } </style> </head> <body> <p class="test">Paragraf cu mai multe linii<br /> A doua linie ...<br /> Alta linie din acelasi paragraf.</p> <div class="test">Continut pe doua linii intr-un tag DIV<br /> A doua linie din DIV.</div> </body> </html>
Paragraf cu mai multe linii
A doua linie ...
Alta linie din acelasi paragraf.
<dl> <dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Limbaj de cod pentru pagini web</dd> </dl>
#id { visibility: hidden; }
document.getElementById("id").onclick = function(){ alert("http://www.MarPlo.net/"); }
if(isset($_REQUEST["id"])) { echo $_REQUEST["id"]; }
I believe in my path. - Eu cred in calea mea.
creer = a crede; camino = cale /drum; iluminación = iluminare