Stiiliklasside ja ID-de kasutamine

Klassid ja ID-d aitavad CSS-i laiendada

Tänapäeva veebisaitide loomine nõuab sügavat arusaamist CSSist (kaskaaditavate stiilide lehed). Need on juhendid, mille abil saate veebisaiti määrata, kuidas see brauseri aknas paigutus. Rakendate HTML-dokumendis rea "stiile", mis loob teie veebisaidi välimuse ja tunde.

Nende ülalnimetatud stiilide kasutamisel on dokumendis palju võimalusi, kuid sageli soovid kasutada stiili ainult mõnedele dokumendi elementidele, kuid mitte kõik selle elemendi eksemplarid.

Samuti võite soovida luua stiili, mida saate kohaldada mitme dokumendi elemendi suhtes, ilma et peaksite iga üksikjuhtumi puhul kasutama stiili reegli. Nende soovitud stiilide saavutamiseks kasutate klassi ja ID HTML atribuute. Need atribuudid on globaalsed atribuudid, mida saab rakendada peaaegu iga HTML-i sildi jaoks. See tähendab, et teie dokumendis on disainide, lõikude, linkide, loendite või mõne muu HTML-i osa kujundus, võite pöörduda klassi- ja ID-atribuutide poole aitad teil seda ülesannet täita!

Klassi valijad

Klassi valija võimaldab teil dokumendis sama elemendi või siltiga määrata mitu stiili. Näiteks võite soovida, et teie teksti teatud osad välja kutsutaksid erinevast värvist dokumendi ülejäänud tekstist. Need esile tõstetud lõigud võivad olla lehel olevad märguanded. Võite oma lõigud määrata selliseks klassideks:

p {värv: # 0000ff; }
p.alert {color: # ff0000; }

Need stiilid määravad kõikide punktide värvi siniseks (# 0000ff), kuid kõik märguande klassi atribuudiga paragrahvi kujundatakse punaselt (# ff0000). Seda seetõttu, et klassi atribuudil on kõrgem spetsiifilisus kui esimene CSS-reegel, mis kasutab ainult sildivalijat.

CSS-iga töötades valib konkreetsem reegel vähem spetsiifilise reegli. Seega näeb käesolev näide üldisemas reeglis kõigi paragrahvide värvi, kuid teine, spetsiifilisem reegel kui tühistab selle ainult mõne paragrahvi puhul.

Siin on, kuidas seda mõnes HTML-märgistuses kasutada:

See punkt kuvatakse sinisega, mis on lehe vaikimisi.

See punkt oleks ka sinine.

Ja see punkt kuvatakse punaselt, kuna klassi atribuut kirjutab standardse sinise värvi üle elemendi valija stiililt.

Selles näites kasutataks "p.alert" stiili ainult lõiketailide suhtes, mis kasutavad seda "hoiatus" klassi. Kui soovite seda klassi kasutada mitmes HTML-elemendis, eemaldaksite selle HTML-elemendi algusest peale stiilis kõne (lihtsalt kindlasti jätke periood (.) paigas), nagu see:

.alert {taustavärv: # ff0000;}

See klass on nüüd saadaval kõikidele elementidele, mis seda vajavad. Iga HTML-i osa, millel on märguande klassi atribuudi väärtus, saab nüüd selle stiili. Allpool oleval HTML-il on meil mõlemad lõik ja rubriik 2, mis kasutavad märguande klassi. Mõlemal on punase taustavärv, mis põhineb CSS-il, mida me lihtsalt näitasime.

See lõige kirjutatakse punaselt.

Ja see h2 ka punane.

Täna veebisaitidel kasutatakse klassi atribuute sageli enamikul elementidel, kuna neid on lihtsam kasutada spetsiifilisuse vaatevinklist, mille ID-id on. Leiad kõige hilisemad HTML-leheküljed, mida tuleb täita klassi atribuutidega, millest mõnda dokumendis korratakse mitu korda ja teised, mis võivad ilmuda ainult üks kord.

ID-valijad

ID- valija võimaldab teil anda teatud stiilile nime, seostamata seda sildi või muu HTML-elemendiga . Ütle, et teil oli HTML-märgistusel jagunemine, mis sisaldab teavet sündmuse kohta.

Võite anda sellele jagunemisele sündmuse ID-atribuudi ja siis, kui sooviksite seda jaotust 1-pikslise mustaga piirjoonega joonistada, kirjutades selle ID-koodi:

#event {border: 1px tahke number 000; }

ID-valijatega seotud väljakutse on see, et neid ei saa HTML-dokumendis korrata. Need peavad olema unikaalsed (saate kasutada sama ID mitme saidi lehel, kuid ainult üks kord igas HTML-dokumendis). Nii et kui teil oleks olnud 3 sündmust, mis kõik seda piiri vajasid, peate andma neile sündmuse "event1", "event2" ja "event3" ID-atribuudid ning igaüks neist stiili. Seetõttu oleks palju lihtsam kasutada ülalnimetatud sündmuse klassi atribuuti ja neid kõiki korraga stiilida.

Teine väljakutse ID-atribuutidega on see, et neil on kõrgem klasside atribuutide spetsiifilisus. See tähendab, et kui teil on vaja CSS-i, mis tühistab eelnevalt loodud stiili, võib see olla keeruline, kui kasutate liiga palju ID-sid. Just sellepärast paljud veebiarendajad on oma märgistuses ID-d kasutades kasutamata hakanud, isegi kui nad kavatsevad seda väärtust kasutada ainult üks kord, ja on selle asemel pöördunud peaaegu kõikide stiilide poole vähemtähtsate klassi atribuutide poole.

Üks ala, kus ID-atribuudid hakkavad mängima, on siis, kui soovite luua lehte, millel on lehtede ankurdussidemed. Näiteks kui teil on parallaksi stiilis veebisait, mis sisaldab kogu ühe lehe sisu, millel on linke, mis "hüpata" selle lehe eri osadesse. Seda tehakse ID-atribuutide ja teksti linkide abil, mis kasutavad neid ankurühendusi.

Sa lisad selle atribuudi väärtuse, millele eelneb # sümbol, linki atribuudile href, nagu see:

See on link

Kui klõpsate või puudutate, hüpatakse sellel lehel selle ID-atribuudi lehe osaga. Kui ükski sellel ID-väärtusel lehe elementi ei kasutata, ei tee link midagi.