Uvod u vrste CSS birača
Vrste CSS Selektora koriste se za odabir sadržaja koji želimo stilizirati. Pomaže u odabiru elemenata na temelju njihove klase, id-a, vrste itd. CSS Selektor je sastavni dio CSS Ruleset-a.
Vrste CSS birača
Na raspolaganju su nam 5 varijanti CSS selektora. Pogledat ćemo sljedeće važne CSS odabire:
- CSS univerzalni izbornik.
- Selektor CSS elemenata.
- CSS izbornik.
- Selektor CSS klase.
- Selektor CSS atributa.
1. CSS univerzalni izbornik
Na HTML stranici, sadržaj ovisi o HTML oznakama. Par oznaka definira određeni element web stranice. CSS univerzalni selektor bira sve elemente na web stranici.
Primjer:
* (
color: blue;
font-size: 21px;
)
Ove dvije linije koda okružene kovrčavim zagradama utjecati će na sve elemente prisutne na HTML stranici. Proglašavamo univerzalni selektor uz pomoć zvjezdice na početku kovrčave narukvice. Universal Selector se može koristiti zajedno s ostalim selektorima u kombinaciji.
2. Selektor CSS elemenata
Selektor CSS elemenata poznat je i kao izbornik tipa. Element Selector u CSS-u pokušava pokušati uskladiti HTML elemente s istim nazivom. Dakle, selektor od
- odgovara svim
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Tribine CSS3
- CSS pitanja za intervju
- SASS vs SCSS
- SASS Intervjui pitanja
- Primjeri popisa naručenih HTML-om
- elemenata tj. svih neuređenih popisa na toj HTML stranici.
Pogledajmo primjer selektora elemenata.
ul (
border: solid 1px #ccc;
)
Da bismo ovo bolje razumjeli, pogledajmo primjer HTML koda za primjenu CSS koda koji smo gore napisali.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demo tekst
U ovom ćemo primjeru pronaći uglavnom tri elementa, a to je
- element, oznaka i drugo
- element. Budući da se naš CSS kod primjenjuje na
- specifično, promjene na granici učinit će se samo za naše
- oznake, a ne za oznake. Obično se te promjene ne odnose na sadržaj
- oznake, ali u nekim scenarijima stilovi se mogu odnositi i na unutarnje elemente.
3. Selektor CSS ID-a
Selektor CSS ID-a pomaže programeru da ID ID-a kreiran od strane proizvođača uskladi sa svojim stilskim sadržajem. Selektor ID-a upotrebljava se uz pomoć hash (#) znaka prije ID-a kojeg je deklar objavio. Selektor ID odgovara svakom HTML elementu koji ima atribut ID sa vrijednošću jednakom vrijednosti selektora, bez hash znaka.
Evo primjera:
#box (
width: 90px;
margin: 10px;
)
Ovaj CSS kôd može se koristiti za podudaranje s elementom koji ima id "okvir", kao u sljedećoj rečenici.
Ovdje je oznaka samo primjer. Za bilo koju HTML oznaku možemo napisati atribut ID. Selektor ID podudara se s atributom ID unutar elementa i traži njegov stil. U našem primjeru, stil se primjenjuje sve dok bilo koji element sadrži ID atribut "okvir".
Vrijednost ID-a koji se koristi treba biti jedinstvena. Ako se isti ID koristi za dva ili više elemenata, kôd je tehnički nevažeći, ali oblikovanje elementa i dalje će se primjenjivati, stoga se obično izbjegava isti ID.
Korištenje različitog ID-a svaki put za svaku HTML stranicu prilično je kruto. Osim što se suočavaju s problemima krutosti, ID-ovi selektori u CSS-u također se suočavaju s problemom specifičnosti.
4. CSS izbornik klase
Selektor CSS klase jedan je od najkorisnijih selektora svih odabirača. Deklarira se pomoću točke koja slijedi ime klase. Naziv ove klase definira koder, kao što je slučaj s odabirom ID-a. Selektor klase traži svaki element koji ima vrijednost atributa s istim nazivom kao i ime klase, bez točke.
Primjer:
.square (
margin: 20px;
width: 20px;
)
Ovaj CSS kôd može se koristiti za podudaranje elementa koji ima klasu 'kvadrat', kao u sljedećoj rečenici.
Ovaj se stil također primjenjuje na sve ostale HTML elemente koji imaju vrijednost atributa za klasu kao "kvadrat". Element koji ima istu vrijednost atributa klase pomaže nam u ponovnoj upotrebi stilova i izbjegava nepotrebno ponavljanje. Uz to, Selektor klase je koristan jer nam omogućuje dodavanje nekoliko klasa određenom elementu. Atributu možemo dodati više klasa odvajanjem svake klase s razmakom.
Primjer:
Ovdje su kvadrat, podebljani i oblika tri različite vrste klase.
5. Selektor CSS atributa
Selektor CSS atributa oblikuje sadržaj prema atributu i vrijednosti atributa navedenom u uglatim zagradama. Ispred četvrtastog nosača otvaranja ne mogu biti razmaci.
input(type="text") (
background-color: #fff;
width: 100px;
)
Ovaj CSS kôd bi odgovarao sljedećem HTML elementu.
Slično tome, ako se vrijednost atributa 'type' promijeni, selektor Atributa ne odgovara njemu. Na primjer, selektor se ne bi podudarao s atributom ako bi se vrijednost 'vrste' promijenila iz 'teksta' u 'pošalji'. Ako je selektor atributa deklariran samo s atributom i bez vrijednosti atributa, tada će se podudarati sa svim HTML elementima s atributom 'type', bez obzira je li vrijednost 'text' ili 'submit'.
Primjer:
input(type) (
background-color: #fff;
width: 100px;
)
Također možemo koristiti selektore atributa bez specifikacije vrijednosti izvan uglatih zagrada. Ovo će nam pomoći da ciljamo samo atribut, bez obzira na element. U našem primjeru ciljat će se na temelju atributa 'type', bez obzira na element 'input'. CSS Selektori pomažu nam da pojednostavimo kôd i omogućuju nam da isti i CSS kôd koristimo i koristimo za razne HTML elemente. Oni nam pomažu u oblikovanju određenih segmenata i dijelova naše web stranice. Pružaju nam mogućnost ravnomjernog oblikovanja sličnih elemenata na našoj web stranici. CSS-ovi selektori stoga su važan dio krivulje učenja CSS-a.
Preporučeni članci
Ovo je vodič za Vrste CSS birača. Ovdje smo s primjerom razgovarali o različitim vrstama CSS odabirača. Možete i proći naše druge predložene članke da biste saznali više -