Materiale
Lectie: Bazele Web Dev
Material: Selectori CSS
Selectori CSS
Selectoarele CSS sunt folosite pentru a selecta și aplica stiluri asupra elementelor HTML. Ele îți permit să vizezi anumite elemente sau grupuri de elemente din documentul HTML pentru a le stiliza în mod specific.
Tipuri de selectori
Există mai multe tipuri de selectori CSS, fiecare având un scop specific:
- Selector de tip: Selectează toate elementele de un anumit tip HTML (ex:
div,p,h1). - Selector de clasă: Selectează elementele care au o anumită clasă (ex:
.nume-clasa). - Selector de ID: Selectează un element care are un anumit ID (ex:
#nume-id). - Selector de atribut: Selectează elementele care au un anumit atribut (ex:
[type="text"]).
Exemple de selectori
Iată câteva exemple de selectori și cum pot fi utilizați:
/* Selector de tip */
p {
color: #333;
}
/* Selector de clasă */
.nume-clasa {
font-size: 16px;
}
/* Selector de ID */
#nume-id {
background-color: #A3CEF1;
}
/* Selector de atribut */
input[type="text"] {
border: 1px solid #ccc;
}
Combinații de selectori
Poți combina selectori pentru a aplica stiluri mai precise:
/* Selector de tip și de clasă */
div.nume-clasa {
padding: 20px;
}
/* Selector de ID și de atribut */
#nume-id[type="text"] {
border-color: #F8CFA4;
}
Concluzie
Selectoarele CSS sunt esențiale pentru a aplica stiluri precise și eficiente asupra elementelor HTML. Învață să le folosești corect pentru a obține un control total asupra designului paginii tale.