CSS-selector, și rolul său în formatare document HTML

Crearea unui site web și umplându-l cu anumite elemente ale paginii web, toată lumea se va confrunta cu un termen cum ar fi CSS-selectorului. Ea servește pentru a determina mai precis toate elementele HTML-fișier de proiectare și localizarea lor pe pagină. Pentru a face acest lucru, creați un CSS-un document care precizează anumite selectori și opțiunile de formatare: culoare, dimensiune, locația și altele. Fiecare web designer ar trebui să știe și să poată să introducă în mod corespunzător selecțiile dorite. Acestea sunt împărțite în funcție de tipul, principalele dintre care vom discuta mai jos.

Tipuri de selectoare în CSS

În funcție de la care elementul este aplicat formatat HTML, CSS-selector se poate referi la una dintre următoarele grupe:

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

selector de etichete

Este, de asemenea, numit „selector de tip“ sau „element de“, acesta este cel mai comun și simplu. După cum sa CSS-document sunt numele elementelor HTML-fișier, pe care le descrie. De exemplu, dacă avem nevoie pentru a seta stilul de paragraf, vom specifica proprietățile și valorile lor pentru elementul p {background: x; Culoare: y; size: z}. În acest caz, toate punctele de pe pagina de web va avea același format (culoarea de fundal, dimensiunea textului, și așa mai departe. D.).

selectorul de clasă

Și dacă aveți nevoie pentru a cere fiecare paragraf este diferit de alte stiluri? Pentru a face acest lucru, există un selector de clasă.

CSS document în acest caz, ar conține o intrare de forma: p.first {color: x; font-size: y}. Astfel, definim proprietatile „culoare“ și „dimensiunea“ numai pentru prima clasa paragraf.

Într-un document HTML în acest caz, a intrat un atribut de clasă la numele stilului primului. Clasele pot fi la fel de mult ca și stilul pe care doriți să se aplice pentru o elemente ale paginii web.

Selector de id

De multe ori este necesar să se definească un stil mai precis, de exemplu pentru oricare element al paginii, sau pentru a le proba. În această situație, ajutorul vine id-selector. Fișierul HTML atribuie un nume pentru elementul dorit, pe care îl identifică printre altele. De exemplu, elementele pe care dorim să stabilim diferit de alt stil va fi titlul articolului.

Apoi, într-un document HTML care atribuie identificatorul h1 antet, astfel NumeArticol. Și în CSS-fișier, specificați stilul, adăugând la grila ID-ul: #articlename {culoare: albastru; text-align: center}. Acum titlul nostru va avea culoarea albastră și centrată.

Fiecare dintre tipurile de mai sus pot fi descrise ca fiind „un 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).

atribut selectoare

În plus față de cele de mai sus, există un CSS-selectori atribute - metoda mai complicate de stiluri de aplicare. Acesta permite elementelor de format HTML pe atributul sau valoarea selectată. Există mai multe soiuri de acest selector:

• prin prezența atributului;
• la valoarea sa exactă;
• prin valoarea atributului parțială;
• privind valoarea sa specifică.

Să luăm în considerare fiecare dintre aceste specii:

1. Primul caz. Formatarea se aplică, dacă este prezent într-un atribut cod html specific (acesta poate fi un p, div, antet, etc.). Dacă nu este, foloseste un generic pentru toate elementele de stil. De exemplu, pentru elementele având titlu (vârful sculei).
2. Al doilea caz. Stilul se aplică numai pentru elementele-html care au o potrivire exactă a valorilor atributelor. De exemplu, pentru a introduce elemente, în cazul în care valoarea atributului type este egal submit.
3. Al treilea caz. Sub formatul va include numai articolele din lista de valori, care are un anumit cuvânt. De exemplu, atributul bara laterală „clasă“ pentru elementele div.
4. Al patrulea caz. Stilul este definit numai pentru acele elemente ale documentului HTML, al cărui atribut particular are o anumită valoare, și începe cu el. De exemplu, utilizarea culorii specificate la toate elementele care atributul limba engleza (care poate fi en, en-rus, en-au și t. D.).

Astfel, folosind una sau alta, selectorul CSS, poate fi cel mai bine specificat ca o întreagă pagină web, și să descrie unele dintre elementele sale.