Calculatoare si Aplicații Gratuite Online Aplicatii Utile
Pagina de pornire
Postări

CSS Înțelegere Selecții simple vs Selecții complexe - Tutorial CSS Gratuit Online

În CSS, selecțiile pot fi simple sau complexe, în funcție de cum sunt construite. 

Aceste selecții sunt folosite pentru a identifica și aplica stiluri asupra elementelor HTML în pagină. Să explorăm mai detaliat diferențele dintre selecțiile simple și complexe:

Selecții Simple:

  1. Selectarea pe bază de nume de element: Selectați toate instanțele unui anumit element HTML. Exemplu: p selectează toate elementele <p> (paragrafele).

  2. Selectarea pe bază de clasă: Selectați elementele care au o anumită clasă atribuită. Exemplu: .highlight selectează toate elementele cu clasa highlight.

  3. Selectarea pe bază de ID: Selectați un element specific folosind ID-ul său unic. Exemplu: #main-title selectează elementul cu ID-ul main-title.

Selecții Complexe:

  1. Selectarea prin înlănțuire: Combinarea a două sau mai multe selecții simple într-o singură selecție. Exemplu: header nav selectează toate elementele <nav> din cadrul unui element <header>.

  2. Selectarea copilului direct: Selectați un element care este copil direct al altui element. Exemplu: ul > li selectează toate elementele <li> care sunt copii direcți ai unui element <ul>.

  3. Selectarea după clasă în interiorul unui element: Selectați elementele cu o anumită clasă în cadrul unui alt element. Exemplu: article .info selectează elementele cu clasa .info în interiorul elementelor <article>.

  4. Selectarea prin combinarea clasei și a numelui de element: Combinați numele elementului și clasa pentru a selecta elementele cu o anumită clasă în cadrul unui tip specific de element. Exemplu: h2.title selectează toate elementele <h2> cu clasa .title.

  5. Selectarea prin atribut: Selectați elementele în funcție de anumite atribute. Exemplu: input[type="text"] selectează toate elementele <input> de tip text.

Exemple Practice CSS si HTML:

Foloseste butonul Testare sau Salveaza ca HTMl si deschide pagina in browser.
Studiază Tutoriale cu Exemple Practice:

Lecții Invatare HTML

Lecții CSS


În acest exemplu, fiecare tip de selecție este ilustrat astfel:

  1. h1: Stilizează toate elementele <h1> pentru a avea culoarea albastră.
  2. nav a: Stilizează toate elementele <a> din interiorul unui <nav> pentru a nu avea subliniere și pentru a avea culoarea verde.
  3. article .title: Stilizează elementele cu clasa .title din interiorul elementelor <article> pentru a avea dimensiunea fontului mărită și pentru a avea bold.
  4. article.info: Stilizează elementele <article> cu clasa .info pentru a avea un fundal de culoare deschisă și un spațiu de padding.
  5. nav > ul: Stilizează toate elementele <ul> care sunt copii direcți ai unui <nav> pentru a nu avea stilurile implicite ale listei.
  6. nav ul li: Stilizează toate elementele <li> din interiorul unui <ul> din interiorul unui <nav> pentru a avea margin-top și margin-bottom.
  7. article h2 + p: Stilizează paragraful care urmează un element <h2> din interiorul unui <article> pentru a avea stil italic.
  8. input[type="text"]: Stilizează toate elementele <input> de tip text pentru a avea un chenar subțire și un spațiu de padding.

Aceste exemple practice ilustrează modul în care puteți folosi diverse tipuri de selecții pentru a aplica stiluri specifice elementelor HTML într-o pagină web.

Trimiteți un comentariu