Curs Css

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:

obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte.

:after

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>
- Rezultatul va fi cel de jos.
- Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea stil propriu.

Continutul din primul tag H4 ... MarPlo

Un alt text din alt element H4MarPlo

- In loc de selector puteti folosi si ID sau clasa.

:before

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:

obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; }

Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent.
<!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>
- De data aceasta continutul "MarPlo- " este adaugat imediat in fata, doar primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos:

MarPlo- Continutul din primul tag H4 ...

Un alt text din alt element H4

- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti codul CSS astfel:
h4:first-child:before { content:url(imagine.gif); }

:first-letter

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>
- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul fiecarui tag cu class="test" este de culoare rosie si marime 25px.

Textul din paragraf ...

Alt continut int-un tag DIV, dar cu aceeasi clasa.

:first-line

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>
- Rezultat, prima linie din fiecare element cu class="test" are textul albastru si ingrosat.

Paragraf cu mai multe linii
A doua linie ...
Alta linie din acelasi paragraf.

Continut pe doua linii intr-un tag DIV
A doua linie din DIV.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul HTML care afiseaza o linie orizontala.
<br> <em> <hr>
Continut ...
<hr />
Alt continut sub linie ...
Care proprietate CSS defineste culoarea textului?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");
Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?
array_merge() explode() implode()
$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
Indicati asocierea corecta: "luna-anotimp".
April - Autumn October - Spring July - Summer
July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.
Indicati asocierea corecta: "luna-anotimp".
Octubre - Primavera Julio - Verano Abril - OtoƱo
Julio es un hermoso mes de verano.
- Iulie este o frumoasa luna de vara.
Pseudo-elemente CSS

Last accessed pages

  1. Hace adica acum (1258)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (70685)
  3. Pronume posesiv (2664)
  4. Select in doua tabele MySQL (1454)
  5. Verbele regulate 3 (5655)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (243)
  2. Gramatica limbii engleze - Prezentare Generala (136)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (118)
  4. Coduri pt culori (116)
  5. Cursuri limba engleza gratuite si lectii online (97)