Stilių klasių ir ID naudojimas

Klasės ir ID padeda išplėsti jūsų CSS

Šiuolaikinio žiniatinklio svetainių kūrimas reikalauja gilių CSS (kaskadinių stilių lapų) supratimo. Tai yra instrukcijos, kurias pateikiate tinklalapiui, kad nustatytumėte, kaip ji bus išdėstyta naršyklės lange. Savo "HTML" dokumente galite taikyti "stilių" seriją, kuri sukurs jūsų svetainės išvaizdą ir jausmą.

Yra keletas būdų, kaip taikyti tuos aukščiau minėtus stiliaus elementus dokumente, tačiau dažnai norite naudoti stilių tik kai kuriuose dokumento elementuose, bet ne visuose šio elemento pavyzdžiuose.

Taip pat galite sukurti stilių, kurį galite taikyti keliems dokumento elementams, nereikėtų pakartoti stiliaus taisyklės kiekvienam atskiram egzemplioriui. Norėdami pasiekti norimus stilius, naudosite klasės ir ID HTML atributus. Šie atributai yra globalūs atributai, kuriuos galima pritaikyti beveik kiekvienai HTML žyma. Tai reiškia, kad jūsų dokumente esate stilizuojantys skyriai, pastraipos, nuorodos, sąrašai ar bet kurie kiti HTML elementai, galite kreiptis į klasės ir ID atributus padėti jums atlikti šią užduotį!

Klasių parinkėjai

Klasės selektorius leidžia nustatyti kelis stilius viename dokumente esančiam elementui ar žymei. Pavyzdžiui, galbūt norėsite, kad tam tikros jūsų teksto skilties dalys skambėtų kitokia spalva nei likusi dokumento teksto dalis. Šie išskirti skyriai gali būti "įspėjimas", kurį nustatote puslapyje. Galite priskirti savo pastraipas tokiomis klasėmis:

p (spalva: # 0000ff; }
p.alert {color: # ff0000; }

Šie stiliai nustatys visų pastraipų spalvą mėlynai (# 0000ff), bet bet kuri pastraipa su klasės įspėjimu klasėje bus raudona (# ff0000). Taip yra todėl, kad klasės atributas turi didesnę specifiškumą nei pirmoji CSS taisyklė, kuri naudoja tik žymeklio parinkiklį.

Kai dirbate su CSS, konkretesnė taisyklė ignoruoja mažiau konkrečią. Taigi šiame pavyzdyje bendresnė taisyklė nustato visų pastraipų spalvą, tačiau antra, konkretesnė taisyklė nei pakeičia šį nustatymą tik kai kuriose pastraipose.

Štai kaip tai gali būti naudojama kai kuriuose HTML žymėjimuose:

Ši pastraipa bus rodoma mėlynai, kuri yra puslapio numatytoji reikšmė.

Ši pastraipa taip pat bus mėlyna.

Ir ši pastraipa bus rodoma raudonai, nes klasės atributas perrašys standartinę mėlyną spalvą iš elementų parinkiklio stiliaus.

Pavyzdžiui, "p.alert" stilius būtų taikomas tik elementų elementams, kurie naudoja tą "alert" klasę.Jei norite naudoti šią klasę keliuose HTML elementuose, jūs tiesiog pašalinsite HTML elementą nuo pradžios stiliaus skambutis (tiesiog būtinai palikite laikotarpį (.) vietoje), pavyzdžiui:

.alert {fono spalva: # ff0000;}

Ši klasė dabar yra prieinama visiems elementams, kuriems to reikia. Bet koks jūsų HTML elementas, turintis "įspėjimo" klasės atributo reikšmę, dabar gaus šį stilių. Žemiau pateiktame HTML puslapyje mes turime tiek pastraipą, tiek antraštę 2 lygį, kuriuose naudojama "įspėjimo" klasė. Abu šie paveikslėliai turėtų būti raudonos spalvos pagal CSS, kurį ką tik parodėme.

Ši pastraipa būtų parašyta raudonai.

Ir šis h2 taip pat bus raudonas.

Šiandien tinklalapiuose klasės elementai dažnai naudojami daugumoje elementų, nes jiems lengviau dirbti, atsižvelgiant į specifines nuostatas, kurios yra ID. Rasite naujausius HTML puslapius, kurie bus užpildyti klasės atributais, kai kurie iš jų kartojami kelis kartus dokumente ir kiti, kurie gali būti rodomi tik vieną kartą.

ID rinktuvai

ID atrankos priemonė leidžia nurodyti tam tikro stiliaus pavadinimą, nesiejant jo su žyma ar kitais HTML elementais . Tarkime, kad turėjote padalijimą į HTML žymėjimą, kuriame yra informacijos apie įvykį.

Galite suteikti šį padalijimą "įvykio" ID atributą, o tada, jei norėtumėte apibūdinti tą padalijimą su 1 pikselių pločio juodą sieną, rašote tokį kodą:

#event {border: 1px solid # 000; }

Problema su ID atranka yra tai, kad HTML dokumentas negali būti kartojamas. Jie turi būti unikalūs (galite naudoti tą patį ID keliuose jūsų svetainės puslapiuose, bet tik vieną kartą kiekviename atskirame HTML dokumente). Taigi, jei jums buvo 3 įvykiai, kuriems visiems reikėjo šios sienos, reikės nurodyti jiems "event1", "event2" ir "event3" ID atributus ir kiekvieno iš jų stilių. Todėl būtų daug lengviau naudoti pirmiau minėtą "įvykio" klasės požymį ir juos vienu metu sudaryti.

Kitas ID atributų iššūkis yra tas, kad jie turi aukštesnę specifiškumą nei klasės atributai. Tai reiškia, kad jei jums reikia CSS, kuris pakeičia anksčiau nustatytą stilių, tai gali būti sunku tai padaryti, jei per daug rėmėsi ID. Dėl šios priežasties daugelis žiniatinklio kūrėjų atsisakė naudoti identifikatorius savo žymėjime, net jei jie tik ketina tą vertę naudoti tik vieną kartą, o vietoj to kreipėsi į mažiau specifinius klasės atributus beveik visiems stiliams.

Viena sritis, kurioje ID atributai įsitvirtina, yra tada, kai norite sukurti puslapį, kuriame yra puslapio inkaro nuorodos. Pvz., Jei turite paralaksinio stiliaus svetainę, kurioje yra visas vieno puslapio turinys su nuorodomis, kurios "peršokti" į įvairias šio puslapio dalis. Tai atliekama naudojant ID atributus ir tekstinius saitus, kurie naudoja šiuos inkaro saitus.

Jūs tiesiog pridėsite šio atributo reikšmę, prieš kurį bus simbolis #, į nuorodos href atributą, tokį kaip:

Tai nuoroda

Kai paspausite arba paliesite, ši nuoroda pereis į puslapio dalį, kurioje yra šis ID atributas. Jei nė vienas elementas šiame puslapyje nenaudojo šios ID vertės, nuoroda nieko nedarytų.