Selectorul CSS și rolul său în formatarea documentelor html

Prin crearea site-ului dvs. și completarea acestuia cu anumite elemente ale unei pagini web, toată lumea va întâlni cu siguranță un concept precum un selector CSS. Acesta servește pentru a determina cu exactitate toate elementele fișierului html, designul și locul lor pe pagină. Pentru a face acest lucru, creați un document CSS, care prestează aceste sau alți selectori și parametri pentru formatul lor: culoare, dimensiune, poziție și altele. Fiecare designer web ar trebui să știe și să poată introduce corect selectorii doriți. Ele sunt împărțite în tipuri, principalele dintre care vom lua în considerare mai jos.

Tipuri de selectori în CSS

În funcție de elementul html la care se aplică formatul, selectorul CSS se poate referi la unul din următoarele grupuri:

• selectorul de etichete;
• selector de clasă;
• id-selector;
• atribut selector.

Selectorul de etichete

Se mai numește și "selector de tip" sau "după element", este cel mai simplu și mai obișnuit. Ca și numele său în documentul CSS sunt numele acelor elemente ale fișierului html pe care îl descriem. De exemplu, dacă trebuie să specificăm un stil de paragraf, specificăm proprietățile și valorile lor pentru elementul p {fundal: x-color: y-size: z}. În acest caz, toate paragrafele paginii web vor avea același format (culoarea de fundal, text, dimensiune etc.).

Selector de clasă

Și dacă trebuie să îți stabilești propriul stil diferit pentru alții pentru fiecare paragraf? Pentru aceasta, există un selector de clasă.

Documentul CSS în acest caz va conține următoarea intrare: p.first {culoare: x- font-size: y}. Astfel, setăm proprietățile "color" și "size" doar pentru primul paragraf din clasă.

În documentul html în acest caz, introduceți mai întâi atributul class cu numele stilului. Clasele pot fi la fel de multe ca stilurile pe care doriți să le aplicați elementelor unei pagini web.

Selector prin id

Deseori, este necesar să se definească stilul cu mai multă precizie, de exemplu, la un singur element al paginii sau la eșantionul acesteia. În această situație, id-selectorul vine la salvare. În fișierul html, atribuim numele elementului dorit, identificându-l printre altele. De exemplu, elementul pe care dorim să-l setăm diferit de celălalt stil va fi titlul articolului.

Apoi, în html-document le atribuim antet h1 un identificator, de exemplu articlename. În fișierul CSS, setați stilul adăugând o latură înainte de numele identificatorului: #articlename {color: blue-text-align: center}. Acum, titlul nostru va avea o culoare albastră și o aliniere în centru.

Fiecare dintre tipurile de mai sus poate fi numit "simplu CSS-selector". Ele definesc formatarea pentru un anumit parametru al HTML-document: împreună elemente similare (de exemplu, toate punctele din articol), o clasă (de exemplu, numai primul paragraf) sau un anumit element (de exemplu, titlul articolului).

Selector de atribute

În plus față de cele de mai sus, există selectori de atribute CSS - un mod mai complex de a aplica stiluri. Acesta vă permite să formatați elemente html de atributul selectat sau de valoarea acestuia. Există mai multe soiuri ale acestui selector:

• prin prezența unui atribut;
• cu valoarea exactă;
• prin valoarea atributului parțial;
• prin semnificația sa specifică.

Să analizăm în detaliu fiecare dintre aceste soiuri:

1. Primul caz. Formatarea este utilizată dacă există un atribut specific în codul html (acestea pot fi p, div, antet și altele). Dacă lipsește, se folosește un stil universal pentru toate elementele. De exemplu, pentru articole care au un titlu (Vârful Tool).
2. Cel de-al doilea caz. Stilul este aplicat numai acelor elemente html care au potriviri exacte ale valorilor atributelor. De exemplu, la acele elemente de intrare a căror valoare a atributului de tip este egală cu supunerea.
3. Cel de-al treilea caz. Formatarea este limitată la articole cu un anumit cuvânt din lista de valori. De exemplu, sidebar în atributul "class" al elementelor div.
4. Cel de-al patrulea caz. Stilul este specificat numai pentru acele elemente ale html-documentului, pentru care un anumit atribut are o anumită valoare și începe cu acesta. De exemplu, aplicarea culorii specificate la toate elementele a căror limbă de atribute este engleza (aceasta poate fi en, en-rus, en-au, etc.).

Astfel, folosind un anumit selector CSS, puteți să proiectați cel mai bine întreaga pagină web și să descrieți elementele sale individuale.