CSS-selektor in njegova vloga pri oblikovanju html-dokumentov

Z ustvarjanjem vaše spletne strani in polnjenjem z določenimi elementi spletne strani bodo vsi zagotovo našli koncept, kot je izbirnik CSS. Služi za natančno določitev vseh elementov html datoteke, njihovega oblikovanja in položaja na strani. Če želite to narediti, ustvarite dokument CSS, ki predpisuje tiste ali druge selektorje in parametre za njihovo oblikovanje: barva, velikost, položaj in druge. Vsak spletni oblikovalec mora vedeti in biti sposoben pravilno vnesti želene selektorje. Razdeljeni so na vrste, od katerih bodo glavne obravnavane spodaj.

Vrste selektorjev v CSS

Odvisno od tega, na katerega html element se uporablja oblikovanje, se lahko izbirnik CSS nanaša na eno od naslednjih skupin:

• izbirnik oznak;
• izbirnik razreda;
• id-selektor;
• izbirnik atributa.

Oznaka izbirnika

Imenuje se tudi "izbirnik tipa" ali "po elementu", ki je najpreprostejši in najpogostejši. Ker je njegovo ime v dokumentu CSS, so imena tistih elementov html-datoteke, ki jo opisujemo. Na primer, če moramo določiti slog odstavka, določimo lastnosti in njihove vrednosti za element p {background: x-color: y-size: z}. V tem primeru bodo vsi odstavki spletne strani enako oblikovani (barva ozadja, besedilo, velikost itd.).

Izbirnik razreda

In kaj, če želite za vsak odstavek določiti svoj slog drugačen za druge? Za to obstaja izbirnik razreda.

Dokument CSS v tem primeru vsebuje naslednji vnos: p.first {color: x-font-size: y}. Tako smo lastnosti "barva" in "velikost" nastavili le za prvi razred.

V html-dokumentu v tem primeru v prvi razred vnesete atribut razreda z imenom sloga. Razredi so lahko toliko kot slogi, ki jih želite uporabiti za elemente spletne strani.

Izbirnik po id

Pogosto je treba še bolj natančno opredeliti slog, na primer na posamezni element strani ali na njihov vzorec. V tem primeru se izbirnik id pri reševanju reši. V datoteki html imenu imenujemo želeni element, ki ga identificira med drugim. Na primer, element, ki ga želimo nastaviti drugače od drugega sloga, bo naslov članka.

Nato v html-dokumentu h1 naslovu dodelimo identifikator, na primer articlename. In v datoteki CSS nastavite slog tako, da dodate rešetko pred imenom identifikatorja: #articlename {color: blue-text-align: center}. Zdaj bo naš naslov imel modro barvo in poravnavo v središču.

Vsak od zgornjih tipov lahko imenujemo "preprost CSS-selektor". Določajo oblikovanje za določen parameter html dokumenta: zbirka podobnih elementov (na primer, vsi odstavki članka), en razred (na primer samo prvi odstavek) ali določen element (na primer naslov članka).

Izbirnik atributa

Poleg zgoraj navedenega so tudi izbirniki atributov CSS - bolj zapleten način uporabe slogov. Omogoča formatiranje html elementov po izbranem atributu ali njegovi vrednosti. Obstaja več vrst tega izbora:

• s prisotnostjo atributa;
• po natančni vrednosti;
• z delno vrednostjo atributa;
• po svojem posebnem pomenu.

Podrobno preuči vsako od teh sort:

1. Prvi primer. Formatiranje se uporablja, če je v html kodi določen atribut (lahko so p, div, glava in drugi). Če manjka, se uporabi univerzalni slog za vse elemente. Na primer, za elemente, ki imajo naslov (opis orodja).
2. Drugi primer. Slog se uporablja le za tiste elemente html, ki imajo natančno ujemanje vrednosti atributov. Na primer, za tiste vhodne elemente, katerih vrednost atributa je enaka oddaji.
3. Tretji primer. Oblikovanje je omejeno na elemente s posebno besedo na seznamu vrednosti. Na primer, sideBar v atributu "razred" div elementov.
4. Četrti primer. Stavek je podan le za tiste elemente html dokumenta, za katere ima določen atribut določeno vrednost in se začne z njo. Na primer, uporabite določeno barvo za vse elemente, katerih jezikovni jezik je angleščina (to je lahko en, en-rus, en-au itd.).

Tako lahko z uporabo določenega izbirnika CSS najbolje načrtujete tako celotno spletno stran kot tudi opisate posamezne elemente.