Sissejuhatus CSS-i valijate tüüpidesse
CSS-i valijate tüüpe kasutatakse selle sisu valimiseks, mida me tahame stiilida. See aitab elementide valimisel vastavalt nende klassile, ID-le, tüübile jne. CSS-valija on CSS-i reeglistiku komponent.
CSS-i valijate tüübid
Meie jaoks on saadaval 5 CSS-selektorite sorti. Vaatleme järgmisi olulisi CSS-i valijaid:
- CSS universaalne selektor.
- CSS-i elemendi valija.
- CSS-i valija.
- CSS-klassi valija.
- CSS-i atribuudi valija.
1. CSS universaalne selektor
HTML-lehel sõltub sisu HTML-siltidest. Paar silte määratleb konkreetse veebilehe elemendi. CSS-universaalvalija valib kõik veebilehe elemendid.
Näide:
* (
color: blue;
font-size: 21px;
)
Need kaks lokirullidega ümbritsetud koodirida mõjutavad kõiki HTML-lehel olevaid elemente. Kuulutame universaalse valija tärnide abil lokkide trakside alguses. Universaalset valijat saab kasutada koos teiste valijatega kombinatsioonis.
2. CSS-i elemendi valija
CSS-i elemendi valijat tuntakse ka tüübi valijana. Elementide valija CSS-is proovib sobitada sama nimega HTML-i elemente. Seetõttu valib
- sobib kõigile
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS-i intervjuu küsimused
- SASS vs SCSS
- SASS-i intervjuu küsimused
- HTML-i tellitud loendi näited
- elemendid, st kõik sellel HTML-lehel olevad järjestamata loendid.
Vaatame näidet elemendi valija kohta.
ul (
border: solid 1px #ccc;
)
Selle paremaks mõistmiseks vaatame HTML-i näite näidist, et kohaldada ülalkirjeldatud CSS-koodi.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demotekst
Selles näites leiame peamiselt kolm elementi, nimelt
- element, silt ja veel üks
- element. Kuna meie CSS-kood kehtib
- konkreetselt sildi piires tehakse muudatused ainult meie
- ja mitte siltide jaoks. Tavaliselt ei kehti need muudatused programmi sisus
- silte, kuid mõne stsenaariumi korral võivad stiilid kehtida sisemiste elementide suhtes.
3. CSS ID valija
CSS ID valija aitab arendajal sobitada arendaja loodud ID selle stiililise sisuga. ID-valijat kasutatakse räsi (#) märgi abil enne arendaja poolt deklareeritud ID-nime. ID-valija sobib igale HTML-elemendile, millel on ID-atribuut, väärtusega, mis on sama, mis valijal, ilma räsimärgita.
Siin on näide:
#box (
width: 90px;
margin: 10px;
)
Seda CSS-koodi saab kasutada elemendi, mille tunnus on „kast”, sobitamiseks, nagu järgmises lauses.
Siin on silt vaid näide. Saame kirjutada iga atribuudi HTML-i atribuudi. ID-selektor sobib elemendi ID atribuudiga ja otsib selle stiili. Meie näites kehtib stiil seni, kuni mõni element sisaldab ID atribuuti „kast”.
Kasutatava ID väärtus peaks olema ainulaadne. Kui kahe või enama elemendi jaoks kasutatakse sama ID-d, on kood tehniliselt vale, kuid elemendi stiil jääb kehtima, seega välditakse tavaliselt sama ID kasutamist.
On üsna jäik, kui peate iga HTML-lehe jaoks iga kord kasutama erinevat ID-d. Lisaks jäikusega seotud probleemidele seisavad CSS-i ID-valijad ka spetsiifilisuse küsimuse.
4. CSS-klassi valija
CSS-klassi valija on kõigi valijate jaoks kõige kasulikum. Selle deklareerimiseks kasutatakse punkti, millele järgneb klassi nimi. Selle klassi nime määratleb kooder, nagu ka ID valija puhul. Klassivalija otsib ilma punktideta iga elemendi kohta, millel on klassi nimega sama nimega atribuudi väärtus.
Näide:
.square (
margin: 20px;
width: 20px;
)
Seda CSS-koodi saab kasutada elemendi, millel on klassi ruut, sobitamiseks, nagu järgmises lauses.
See stiil kehtib ka kõigi muude HTML-i elementide kohta, millel on klassi atribuudi väärtus ruudukujuline. Sama klassi atribuudi väärtusega element aitab meil stiile uuesti kasutada ja väldib asjatut kordamist. Lisaks on klassi valija kasulik, kuna see võimaldab meil teatud elemendile lisada mitu klassi. Saame atribuudile lisada mitu klassi, eraldades iga klassi tühikuga.
Näide:
Siin on ruut, paks ja kuju kolm erinevat tüüpi klassi.
5. CSS-i atribuudi valija
CSS-i atribuudi valija stiilide sisu vastab atribuudile ja nurksulgudes nimetatud atribuudi väärtusele. Enne avatavat sulgu ei tohi olla tühikuid.
input(type="text") (
background-color: #fff;
width: 100px;
)
See CSS-kood sobib järgmise HTML-i elemendiga.
Samamoodi, kui atribuudi 'tüüp' väärtus muutub, ei vasta atribuudi selektor sellele. Näiteks ei vasta valija atribuudile, kui tüübi väärtus muutub tekstist tekstiks „esitamine”. Kui atribuuti valija deklareeritakse ainult atribuudiga ja ilma atribuudi väärtuseta, siis sobib see atribuudiga 'type' kõigi HTML-elementidega, sõltumata sellest, kas väärtus on 'tekst' või 'esitamine'.
Näide:
input(type) (
background-color: #fff;
width: 100px;
)
Saame kasutada ka atribuutide valijaid, mille puhul väärtust ei täpsustata nurksulgudes. See aitab meil suunata ainult atribuuti, olenemata elemendist. Meie näites sihib see atribuudi 'type' alusel, olenemata elemendist 'input'. CSS-selektorid aitavad meil oma koodi lihtsustada ning võimaldavad meil sama CSS-i koodi kasutada ja uuesti kasutada erinevate HTML-elementide jaoks. Need aitavad meil kujundada meie veebilehe konkreetseid lõike ja osi. Need pakuvad meile võimalust sarnased elemendid meie veebilehel ühtlaselt kujundada. CSS-i valijad on seega CSS-i õppimiskõvera oluline osa.
Soovitatavad artiklid
See on olnud CSS-i valijate tüüpide juhend. Siin oleme näitega arutanud erinevaid CSS-valija tüüpe. Lisateavet leiate ka meie muudest soovitatud artiklitest -