Kõik, mida peate teadma CSS-i valijate kohta



See artikkel toob välja huvitava ja olulise teema, mida nimetatakse CSS-i valijateks, ja järgneb sellele toetava praktilise tutvustusega.

See artikkel toob välja huvitava ja olulise teema, mida nimetatakse Selektorid ja järgib seda toetava praktilise tutvustusega. Järgmisi näpunäiteid käsitletakse selles artiklis,

Alustagem siis





HTML-elementide kujundamine

Mõistame, mis CSS on, enne kui jõuame CSS-i valijateni. Kui HTML-i tuleb pidada luustikuks, siis CSS (Cascading Style Sheets) on nagu lihased ja nahk. Aju on JavaScript. Nii et CSS-i stiilid on veebilehe jaoks sisuliselt paigutus ja kujundus. Alates piltide ja teksti positsioneerimisest kuni fondi suuruse ja taustavärvini kontrollib CSS, kuidas HTML-elemendid brauseris välja näevad.

CSS-ist saate paremini aru, kui olete CSS-i valijatest hästi aru saanud. Need valijad võimaldavad teil sihtida konkreetseid HTML-elemente, et saaksite neile õiget stiili rakendada.



Näide - CSS-i valijad - EdurekaMõistame, kuidas saame HTML-elemente valida,

Kuidas elemente valida?

Oletame, et soovite, et teatud pealkirja stiil oleks erinev veebilehe ülejäänud sisust. Nüüd saate CSS-i valijaid kasutades selle HTML-elemendi sihtida, et see erinevalt kujundada. CSS-i valijad aitavad määratleda elemente, mille suhtes kehtivad teatud CSS-reeglite kogumid. CSS-i valijaid on erinevat tüüpi, mis võimaldavad teil täpselt valida elemendid, mida soovite stiilida. Võite anda kogu veebisaidile üldise stiili ja seejärel kujundada lehe muid elemente.

Valijad on osa CSS-reeglist ja need valijad tulevad vahetult enne CSS-plokkide deklareerimist. Parema mõistmise huvides võite viidata allolevale pildile.



CSS-i selektorite artikliga edasi liikumine

CSS-i valijad

Selle valija abil saate HTML-elemendi valida nime järgi.

Mõelge allolevale koodile:

p {teksti joondamine: keskvärv: magenta}

Seda stiili rakendatakse igas lõigus.

Lõige 1

Lõige 2

See kood annab teile järgmise väljundi:

Seda stiili rakendatakse igas lõigus

Lõige 1

Lõige 2

Ülalolevas koodis on HTML-elemendid joondatud keskele ja nende värv on “magenta”.

CSS-i selektorite artikliga edasi liikumine

CSS-i ID-valija

Valides HTML-elemendi atribuudi id, saate selle konkreetse elemendi valida. Kuna ID on lehele ainulaadne, saate atribuudi id abil valida õige elemendi.

python def __init__

HTML-elemendi saate valida, kasutades tähist '#', millele järgneb selle elemendi ID. Näiteks valib „#firstname” elemendi, mille ID on „eesnimi”.

Mõelge järgmisele koodile:

# para1 {text-align: keskvärv: oranž}

Tere, Maailm

Seda lõiku see ei mõjuta.

Ülaltoodud koodi väljund on:

Tere, Maailm

Seda lõiku see ei mõjuta.

Nagu ülaltoodud väljundist näha, suutsime id = ”para1” lisades selle elemendi värvi muuta oranžiks. Teine element, millel seda pole, jääb mõjutamata.

CSS-i selektorite artikliga edasi liikumine

CSS klassi valija

Kursuse valija abil saate valida HTML-elemendid, millel on kindel klassi atribuut. Valija saab määratleda, kasutades punkti (täispeatuse sümbolit), millele järgneb klassi nimi. Näiteks valib .intro elemendid, kus klass on „sissejuhatav”. Üks asi, mida meeles pidada, on see, et klassi nime ei saa kunagi alustada numbriga.

Mõelge järgmisele koodile:

.center {text-align: keskvärv: roosa}

See pealkiri on roosa ja joondatud keskele.

See lõik on roosa ja joondatud keskele.



Ülaltoodud koodi väljund on:

See pealkiri on roosa ja joondatud keskele.



See lõik on roosa ja joondatud keskele.

Konkreetse elemendi jaoks saate kasutada CSS-klassi valijaid. Kui soovite, et stiiliks oleks ainult üks konkreetne element, saate koos klassi valijaga kasutada ka elemendi nime.



Näiteks kaaluge järgmist koodi:

p.center {teksti joondamine: keskvärv: roosa}

Seda pealkirja ei mõjutata

See lõik on roosa ja joondatud keskele.



Ülaltoodud koodi väljund on:



tüübi teisendamine c ++

Seda pealkirja ei mõjutata



See lõik on roosa ja joondatud keskele.

Nagu väljundist näha, ei mõjuta stiil pealkirja h2. Kuna oleme määranud „p.center“, mõjutab stiil ainult lõiku.



Selle CSS-selektorite artikliga edasi liikudes

CSS-i universaalne valija

Seda tüüpi valijat võib pidada metamärgiks, mis valib kõik lehe elemendid. See valib kõik lehe elemendid ja selle määrab täht “*”.

Näiteks kaaluge järgmist koodi:

* {värv: tumeroheline fondi suurus: 30 pikslit}

See on test (väiksem font)

See on lõik.

Ülaltoodud koodi väljund on:

Tere, Maailm

See on test (väiksem font)

See on lõik.

Nagu väljundist näha, on kõigil rühmavalija abil määratletud elementidel sama stiilimääratlus - need on joondatud keskele ja fondi värv on tsüaan.

See viib meid selle artikli lõppu.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda artikli kommentaaride jaotises ja võtame teiega ühendust.