- 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-Clase
O pseudo-clasa este folosita pentru a specifica o anumita stare a unui element.
De exemplu, putem folos pseudo-clasele pentru:
- modifica stilul unui element cand este pus deaasupra lui cursorul.
- modifca stilul uni link vizitat
Sintaxa
Sintaxa unei pseudo clase:
a:visited{ color: red; }
De exemplu, cand discutam despre link-uri avem 4 tipuri de pseudo-clase: link, visited, hover si active
link – Un link care nu a fost vizitat
visited – Un link ce deja a fost vizitat
hover – Stilul pe care il are link-ul atunci cand utilizatorul tine cursorul deasupra lui.
active – Stilul pe care il ia link-ul atunci cand e apasat.
a:link { color: navyblue; } a:visited { color: lightblue; } a:hover { color: red; } a:active { color: orange; }
Cumbinatii intre clase CSS si pseudo-clase
Dca nu v-ati dat seama deja am sa va spun eu acum, putem combina clasele css cu pseudo-clasele.
a.linkulMeu:hover { color: red; }
Pseudo-clasa first-child
Aceasta pseudo-clasa va cauta si aplica un anumit stil decat primului element din interiorul altuia.Codul de mai jos va schimba decat stilul primului element li al tuturor listelor ul:
ul li:first-child{ background: red; }
La fel de simplu putem schimba stilul tuturor elementelor <span> aflate in elemente <p> ce sunt primul element al altor elemente:
p:first-child span{ color: blue; }
Pseudo-clasa :lang
Aceasta pseudo-clasa permite definirea anumitor reguli pentru diferite limbi.In exemplul de mai jos pseudo-clasa :lang defineste delimitatorul elementului q cu lang=”ro”
<html> <head> <style> q:lang(ro) { quotes: "~" "~"; } </style> </head> <body> <p>Am alfat ca site-ul <q lang="no">Invata-Programare</q> ma ajuta foarte mult sa invat.</p> </body> </html>
Comentarii
Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!