Descriere: Pseudo-elemente
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
Pseudo-elementele permit adăugarea de stiluri CSS anumitor părţi din conţinutul unui element HTML.
De exemplu, când definiţi un stil pentru un anumit tag HTML (sau pentru o clasă), tot conţinutul încadrat de acel tag va avea acelaşi stil, iar dacă vreţi să adăugaţi un stil CSS diferit primei litere sau primului rând dintr-un paragraf, se folosesc pseudo-elemente.
Sintaxa pentru utilizarea pseudo-elementelor este următoarea:
obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasă, iar "pseudo-element" este una din expresiile următoare:
after - Adaugă conţinut după un element HTML (nu e suportat de versiuni IE mai mici de 8)
before - Adaugă conţinut înaintea unui element HTML (nu e suportat de versiuni IE mai mici de 8)
first-letter - Adaugă un stil css primului caracter dintr-un text
first-line - Adaugă un stil primei linii dintr-un text
Ca să înţelegeţi mai bine cum funcţionează şi ce fac pseudo-elementele, iată câteva exemple cu fiecare în parte.
1. after
Pentru a adăuga un anumit conţinut (text, imagine, sunet .wav) prin CSS, se foloseşte proprietatea content şi valoarea ce reprezintă conţinutul respectiv: text se adaugă între ghilimele, iar imagine sau sunet .wav se adaugă folosind ca valoare url(adresa_fisier)
În următorul exemplu va fi adăugat un conţinut text după fiecare element <h4>.
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 1</title>
<style type="text/css">
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> - În loc de selector puteţi folosi şi ID sau clasă.
2. before
Before este similar cu "after", conţinutul se adaugă la fel, dar la începutul elementului.
Pentru o mai mare diversitate, puteţi combina pseudo-clasele cu pseudo-elemente folosind sintaxa:
obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; }
- Pseudo-clasele sunt explicate în lecţia anterioară.
Ca să vedeţi efectul, iată un exemplu aplicat cu "before" aceloraşi tag-uri H4 din exemplul precedent.
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 2</title>
<style type="text/css">
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> - Dacă vreţi să adăugaţi în loc de conţinut text o imagine, de exemplu .gif, scrieţi codul CSS astfel:
h4:first-child:before { content:url(imagine.gif); }
3. first-letter
First-letter aplică un stil CSS doar primului caracter dintr-un text.
În următorul exemplu este aplicat un stil CSS primului caracter din conţinutul fiecărui element definit printr-o clasă "test".
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 3</title>
<style type="text/css">
.test:first-letter {
font-size:25px;
color:red;
}
</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> 4. first-line
First-line aplică un stil CSS doar primei linii din conţinutul elementului HTML.
Studiaţi exemplul următor:
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 4</title>
<style type="text/css">
.test:first-line {
font-weight:bold;
color:blue;
}
</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>