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

Internetul

Crearea site-ului dvs. și completarea acestuia cu anumiteelemente 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.

css selector

Selectorul de etichete

Se mai numește și "selector de tip" sau "de tip"Element“, acesta este cel mai comun și simplu. După cum sa CSS-document sunt numele elementelor HTML-fișier, pe care le descriem. De exemplu, dacă avem nevoie pentru a seta stilul de paragraf, vom specifica proprietățile și valorile lor pentru elementul p { fundal: x; culoare: y; dimensiunea :. z} În acest caz, toate punctele de pe pagina de web va avea același format (culoare de fundal, dimensiunea textului, 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 {color: 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.

css selectorul atributului

Selector prin id

Deseori este nevoie să definim un stilchiar mai precis, 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 titlul h1id, 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 apelat"CSS-selector simplu". Ele definesc formatul pentru un anumit parametru al documentului html: o colecție de elemente similare (de exemplu, toate paragrafele unui articol), o clasă (de exemplu doar primul paragraf) sau un element specific (de exemplu, titlul unui articol).

css selector

Selector de atribute

În plus față de cele de mai sus, există selectori CSSatributele reprezintă 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 (o sugestie).
  2. Cel de-al doilea caz. Stilul este aplicat numai acelor elemente html care au potriviri exacte ale valorilor atributului. 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. Numai elementele cu un anumit cuvânt din lista de valori intră sub forma formatării. De exemplu, sidebar-ul în atributul "class" al div.
  4. Cel de-al patrulea caz. Stilul este setat 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 tuturor elementelor a căror limbă de atribut este engleza (aceasta poate fi en, en-rus, en-au etc.).

Astfel, utilizând unul sau altul selector CSS, puteți să proiectați cel mai bine întreaga pagină web și să descrieți elementele sale individuale.