Uvod v vrste izbirnikov CSS
Vrste izbirnikov CSS se uporabljajo za izbiro vsebine, ki jo želimo oblikovati. Pomaga pri izbiri elementov na podlagi njihovega razreda, id-ja, vrste itd. Izbirnik CSS je sestavni del pravilnika CSS.
Vrste izbirnikov CSS
Na voljo je 5 sort CSS izbirnikov. Ogledali si bomo naslednje pomembne izbirnike CSS:
- CSS univerzalni izbirnik.
- Izbirnik elementov CSS.
- Izbirnik CSS Id.
- Izbirnik razreda CSS
- Izbira atributov CSS.
1. CSS Universal Selector
Na strani HTML je vsebina odvisna od oznak HTML. Par oznak določa določen element spletne strani. Univerzalni izbirnik CSS izbere vse elemente na spletni strani.
Primer:
* (
color: blue;
font-size: 21px;
)
Ti dve vrstici kode, obdani z zavitimi naramnicami, bosta vplivali na vse elemente na strani HTML. Univerzalni izbirnik razglasimo s pomočjo zvezdice na začetku kodraste naramnice. Univerzalni izbirnik se lahko uporablja skupaj z drugimi izbirniki v kombinaciji.
2. Izbirnik elementov CSS
Izbirnik elementov CSS je znan tudi kot izbira vrste. Element Selector v CSS se poskuša ujemati z elementi HTML z istim imenom. Torej, selektor of
- ustreza vsem
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Vprašanja za intervju CSS
- SASS proti SCSS
- Vprašanja za intervju SASS
- Primeri seznama urejenih HTML
- elementi, tj. vsi neurejeni seznami na tej strani HTML.
Poglejmo primer za izbiro elementov.
ul (
border: solid 1px #ccc;
)
Da bi to bolje razumeli, poglejmo primer HTML kode za uporabo CSS kode, ki smo jo napisali zgoraj.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demo besedilo
V tem primeru bomo našli predvsem tri elemente, in sicer
- element, oznako in drugo
- element. Ker naša koda CSS velja za
- označimo posebej, spremembe na meji bodo opravljene samo za naše
- oznake in ne za oznake. Običajno te spremembe ne veljajo za vsebino
- oznake tudi, vendar v nekaterih scenarijih lahko slogi veljajo za notranje elemente.
3. Izbirnik CSS ID
Izbirnik ID-jev CSS pomaga razvijalcu, da ID, ki ga je ustvaril razvrstilec, primerja s svojo stilsko vsebino. Izbirnik ID-jev se uporablja s pomočjo oznake hash (#) pred imenom ID-ja, ki ga je razvijal razvijalec. Izbirnik ID se ujema z vsakim elementom HTML, ki ima atribut ID, vrednost, ki je enaka vrednosti izbirnika, brez oznake hash.
Tu je primer:
#box (
width: 90px;
margin: 10px;
)
To kodo CSS lahko uporabite za ujemanje z elementom, ki ima id 'polje', kot je v naslednjem stavku.
Tu je oznaka le primer. Za katero koli oznako HTML lahko zapišemo atribut ID. Izbirnik ID-jev ustreza atributu ID znotraj elementa in išče njegovo obliko. V našem primeru se slog uporablja, če kateri koli element vsebuje atribut ID "polje".
Vrednost ID-ja naj bi bil edinstven. Če se isti ID uporablja za dva ali več elementov, je koda tehnično neveljavna, vendar bo oblikovanje elementa še vedno veljalo, zato se običajno izogibamo istemu ID-ju.
Uporaba vsakega ID-ja vsakič za vsako stran HTML je precej toga. Poleg tega, da se soočajo s težavami togosti, se izbirniki ID-jev v CSS spopadajo tudi s težavo specifičnosti.
4. Izbirnik razreda CSS
Izbirnik razreda CSS je eden izmed najbolj uporabnih izbirnikov vseh izbirnikov. Deklarira se z uporabo pike, ki ji sledi ime razreda. To ime razreda definira koder, kot je to pri izbirniku ID-jev. Izbirnik razreda išče vsak element, ki ima vrednost atributa z istim imenom kot ime razreda, brez pike.
Primer:
.square (
margin: 20px;
width: 20px;
)
To kodo CSS lahko uporabite za ujemanje elementa, ki ima razred 'kvadrat', kot je v naslednjem stavku.
Ta slog velja tudi za vse druge elemente HTML, ki imajo vrednost atributa za razred kot 'kvadrat'. Element z enako vrednostjo atributa razreda nam pomaga pri ponovni uporabi slogov in se izogne nepotrebnemu ponavljanju. Poleg tega je izbirnik razredov koristen, ker nam omogoča, da posameznemu elementu dodamo več razredov. Atributu lahko dodamo več razredov tako, da ločimo vsak razred s presledkom.
Primer:
Tu so kvadrat, krepka in oblika tri različne vrste razredov.
5. Izbira atributov CSS
Izbirnik atributov CSS oblikuje vsebino glede na atribut in vrednost atributa, omenjeno v oglatih oklepajih. Pred odprtjem kvadratnega nosilca ni nobenih presledkov.
input(type="text") (
background-color: #fff;
width: 100px;
)
Ta koda CSS bi se ujemala za naslednji element HTML.
Podobno, če se vrednost atributa 'type' spremeni, se izbirnik Atributi ne bi ujemal z njim. Na primer, izbirnik se ne bi ujemal z atributom, če bi se vrednost 'type' spremenila iz 'text' v 'submit'. Če je izbirnik atributa deklariran samo z atributom in brez vrednosti atributa, se bo ujemal z vsemi elementi HTML z atributom 'type', ne glede na to, ali je vrednost 'text' ali 'submit'.
Primer:
input(type) (
background-color: #fff;
width: 100px;
)
Izbiramo lahko tudi izbirnike atributov brez specifikacije vrednosti zunaj kvadratnih oklepajev. To nam bo pomagalo ciljati samo na atribut, ne glede na element. V našem primeru bo ciljal na podlagi atributa 'type', ne glede na element 'input'. Izbirniki CSS nam pomagajo poenostaviti kodo in nam omogočajo uporabo in ponovno uporabo iste kode CSS za različne elemente HTML. Pomagajo nam pri oblikovanju določenih segmentov in delov naše spletne strani. Ponujajo nam možnost enakomernega oblikovanja podobnih elementov na naši spletni strani. Izbirniki CSS so tako pomemben del učne krivulje CSS.
Priporočeni članki
To je vodnik za Vrste izbirnikov CSS. Tu smo s primerom razpravljali o različnih vrstah izbirnikov CSS. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -