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.