Stiliaus klasių ir ID naudojimas

Klasės ir ID praplečia jūsų CSS

E+/Getty Images

Norint sukurti gero stiliaus svetaines šiandieniniame žiniatinklyje, reikia gerai suprasti Kaskadiniai stiliaus lapai . Taikykite keletą CSS stilių savo HTML dokumentui, kad informuotumėte apie savo tinklalapio išvaizdą.

Klasės ir ID atributai

Dizaineriai kartais turi taikyti tik stilių kai kurie dokumento elementų, bet ne visi to elemento atvejai. Norėdami pasiekti šiuos norimus stilius, naudokite klasė ir ID HTML atributai. Šie atributai yra visuotiniai atributai, taikomi beveik kiekvienam HTML žyma Taigi, nesvarbu, ar savo dokumente formuojate skirsnius, pastraipas, nuorodas, sąrašus ar bet kurią kitą HTML dalį, galite kreiptis į klasės ir ID atributus, kurie padės atlikti šią užduotį!

Klasių parinkėjai

Klasės parinkiklis nustato kelis stilius tam pačiam elementui arba žymai dokumente. Pavyzdžiui, norėdami kaip perspėjimą nurodyti tam tikras teksto dalis kita spalva, pastraipoms priskirkite tokias klases:

|_+_|

Šie stiliai nustatys spalvą visi pastraipas į mėlyną (#0000ff), bet bet kurią pastraipą su klasės atributu budrus Vietoj to, stilius būtų raudonas (#ff0000). Taip yra todėl, kad klasės atributas yra specifiškesnis nei pirmoji CSS taisyklė, kuri naudoja tik žymų parinkiklį. Dirbant su CSS , konkretesnė taisyklė panaikins ne tokią konkrečią. Taigi šiame pavyzdyje bendresnė taisyklė nustato visų pastraipų spalvą, tačiau antroji, konkretesnė taisyklė, nepaiso šios nuostatos tik kai kuriose pastraipose.

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

|_+_|

Ši pastraipa būtų rodoma mėlyna spalva, kuri yra puslapio numatytoji parinktis.

Ši pastraipa taip pat būtų mėlyna.

Ir ši pastraipa būtų rodoma raudona spalva, nes klasės atributas perrašytų standartinę mėlyną spalvą iš elementų parinkiklio stiliaus.

Šiame pavyzdyje stilius p.alert būtų taikomas tik pastraipos elementams, kuriuose tai naudojama budrus klasė. Norėdami naudoti šią klasę keliuose HTML elementuose, pašalinkite HTML elementą iš stiliaus iškvietimo pradžios, kaip nurodyta toliau:

|_+_|

Ši klasė dabar pasiekiama bet kuriam elementui, kuriam to reikia. Bet kuri jūsų HTML dalis, turinti klasės atributo reikšmę budrus dabar gausite šį stilių. Žemiau esančiame HTML yra ir pastraipa, ir antrojo lygio antraštė, kurioje naudojama budrus klasė. Abiejų fono spalva yra raudona:

|_+_|

Ši pastraipa būtų parašyta raudona spalva.

Šiuolaikinėse svetainėse klasės atributai dažnai naudojami daugumoje elementų, nes su jais konkretumo požiūriu dirbti lengviau nei su ID. Daugumą dabartinių HTML puslapių rasite užpildyti klasės atributais, kai kurie iš jų dažnai kartojami dokumente, o kiti gali būti rodomi tik vieną kartą.

ID parinkikliai

ID parinkiklis įvardija konkretų stilių, nesiejant jo su žyma ar kt HTML elementas .

Tarkime, kad jūsų HTML žymėjimas yra padalinys, kuriame yra informacijos apie įvykį. Galite suteikti šiam skyriui ID atributas apie renginys , tada apibrėžkite tą padalijimą 1 pikselio pločio juodu rėmeliu:

|_+_|

Iššūkis su ID parinkikliai yra tai, kad jie negali būti kartojami HTML dokumente. Jie turi būti unikalūs (tą patį ID galite naudoti keliuose svetainės puslapiuose, bet tik vieną kartą kiekviename atskirame HTML dokumente). Taigi trims įvykiams, kuriems reikia šios kraštinės, turite nustatyti ID atributus įvykis1 , įvykis2 , ir įvykis 3 ir stilizuokite kiekvieną iš jų. Todėl būtų daug lengviau naudoti minėtą klasės atributą renginys ir formuoti juos visus iš karto.

ID atributų komplikacijos

Kitas ID atributų iššūkis yra tas, kad jie turi didesnį specifiškumą nei klasės atributai. Norint nepaisyti anksčiau nustatyto stiliaus, gali būti sunku tai padaryti, jei per daug pasitikėjote ID. Daugelis žiniatinklio kūrėjų nustojo naudoti ID savo žymėjime, net jei jie ketina naudoti šią reikšmę tik vieną kartą, o beveik visiems stiliams naudojo mažiau specifinius klasės atributus.

Vienintelė sritis, kurioje naudojami ID atributai, yra tada, kai norite sukurti puslapį, kuriame būtų puslapio prieraišo nuorodos. Pavyzdžiui, apsvarstykite paralakso stiliaus svetainę, kurioje yra visas turinys viename puslapyje su nuorodomis, kurios „peršoka“ į įvairias to puslapio dalis. ID atributuose ir teksto nuorodose naudojamos šios prierašo nuorodos. Pridėkite to atributo reikšmę, prieš tai nurodydami # simbolis, į href nuorodos atributas, pavyzdžiui:

|_+_|

Spustelėjus arba palietus ši nuoroda pereina į tą puslapio dalį, kurioje yra šis ID atributas. Jei nė vienas puslapio elementas nenaudoja šios ID reikšmės, nuoroda nieko nedarys.

Norint svetainėje sukurti puslapio nuorodas, reikės naudoti ID atributus, tačiau vis tiek galite pereiti prie klasių bendriems CSS stiliaus kūrimo tikslams. Taip dizaineriai šiandien pažymi puslapius – jie kiek įmanoma dažniau naudoja klasių parinkiklius ir kreipiasi į ID tik tada, kai reikia, kad atributas veiktų ne tik kaip CSS kabliukas, bet ir kaip nuoroda puslapyje.