- Introducere in CSS
- Sintaxa CSS
- Clase si Id-uri
- Cunostinte de Baza
- Background
- Text
- Familii de fonturi
- Link-uri
- Liste
- Tabele
- Containere
- Outline
- Margin si Padding
- Dimensiuni
- Display si Visibility
- Position si z-index
- Floating
- Aliniere elemente HTML
- Combinators si Selectors
- Pseudo-Clase
- Pseudo-Elemente
- Opacitatea
- @Reguli
- Media Types
- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
Pseudo-Elemente
Pseudo-elementele sunt folosite pentru aedita stilul unei anumite parti a unui element.
De exmplu, putem folosi pseudo-elemente pentru:
- A modifica stilul primei litere a unui text, primei linii, etc
- A adauga continut inaintea sau la urma unui anumit element.
Sintaxa
Atentie! Aici se pune de doua ori caracterul :, spre deosebire de pseudo-clase unde puneam doar o data (ex:::first-line vs :first-line)
Pseudo-Elementul ::first-line
Acest pseudo-element este folosit pentru a adauga un stil mai special primei linii de text dintr-un anumit element HTML.
Acest alement poate fi aplicat doar elementelor de tip block.
Exemplu:Fomratam prima linie e fiecarui <div> din document:
div::first-line { color: rgb(255, 0, 0); font-family: Helvetica; }
Pseudo-Elementul ::first-letter
Acest pseudo-element este folosit pentru a adauga un stil mai special primei litere dintr-un anumit element HTML.
p::first-letter { color: red; font-size: 4em; }
Pseudo-Elemente si Clasele CSS
Pseudo-elementele pot fi combinate cu clase CSS.
Iata un exemplu simplu:
div.mainContent::first-letter { color: rgb(255, 0, 0); font-size: 2em; }
Acest cod va afisa prima litera a div-ului cu clasa mainContent rosie si de cu o marime a fontului de 200%.
Bineteles ca putem folosi si mai multe pseudo-elemente, precum in exemplul de mai jos:
div::first-letter { color: rgb(255, 0, 0); font-size: 2em; } div::first-line { color: rgb(0, 255, 0); font-size: .7em; }
Pseudo-Elementul ::before
Acest pseudo-element poate fi folosit pentru a adauga continut ineintea continutului elementului HTML. Urmatorul exemplu adauga o imagine inaintea fiecarui element <h1>:
h1::before { content: url('imagini/sageata.gif'); }
Pseudo-Elementul ::after
Acest pseudo-element poate fi folosit pentru a adauga continut dupa continutului elementului HTML. Urmatorul exemplu adauga o imagine dupa fiecare element <h1>:
h1::after { content: url('imagini/sfarsit_rand.gif'); }
Pseudo-Elementul ::selection
Acest pseudo-element ne permite sa editam stilul selectiei utilizatorului.
Cu acest element nu functioneaza decat urmatoarele proprietati: color, background, cursor si outline.
::selection { color: red; background: green; }
Comentarii